Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stuck on a little Javascript project, could use a little help.

    Hey,

    So I have been working on a little piece of Javascript and I have gotten a little stuck.

    When I say that I have honestly tried for a couple hours but I can't seem to get anywhere with it...

    I am writing a little selector script to allow a user to select multiple options and then create a url dependent on the options the user has selected.

    Code:
    <div onclick="generate_url('data input by php')">A button</div>
    <div onclick="generate_url('different data)">A different button</div>
    
    <div class="view_mode" onclick="change_mode('single')">Singular</div>
    <div class="view_mode" onclick="change_mode('dual')">Dual</div>
    
    
    <script>
    var mode="single";
    var count="0"; 
    
    // Function to change view mode (working)
    function change_mode(newmode)
    {
    mode = newmode;
    count=0;
    }
    
    //Standard url that users selections are added to
    var standard_url='http://www.mywebsite.com/page.php?id=';
    
    // Function to generate a url or mutiple url's based off user input
    function generate_url(selection)
    {
    //Allow user to choose a single option
    	if (mode=='single')
    	{	
    		count++;
    		var singular_url=standard_url+selection;
    		if (count==1) 
    		{
    			window.location.href = singular_url;
    		}
    	}
    
    
    //Dual
    	if (mode=='dual')
    	{	
    		if (count==0)
    		{
    			var selection_1=selection;
    			count++;
    		}
    		if (count=1)
    		{
    			var selection_2=selection;
    			count++;
    		}
    		if (count==2) 
    		{
    dual_url=selection_1+selection_2;
    			window.location.href = dual_url;
    		}
    	}
    }
    
    </script>
    What should is if the user selects the first button then the second button after selecting dual view mode the javascript should load a url such as:

    http://www.mywebsite.com/page.php?id...neselectiontwo

    (I can go ahead and change out the final url myself that's not the problem)

    The problem is to do with the count it automatically jumps through the script and adds the first selection twice then loads the page before you can select a second option.

    I attempted to move around the if statements however this had no effect.

    Could someone point me in the right direction

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I went and changed some of the script around again.

    So that the if(count==1) is above if(count==0).

    What I now get is the url followed by:

    undefinedandthedatafromselection2

    The data from the first selection is not brought into the third if statement and then appended to the url.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Let's step through your code ... line by line. You can easily do that with pen & paper.

    Please try to reproduce the steps

    1 - Click single mode button ... so mode will be 'single'
    2 - Oh, you initialize count with a string. Why? You should use this
    Code:
    var count = 0;
    3 - Click on the first button. This method will be called
    Code:
    generate_url('data input by php')
    so the first parameter "selection" of the method generate_url is 'data input by php'
    4 - Inside generate_url() the first if statement will be true (because mode=='single'), so you go on with this part of the method
    5 - You increase count by 1 ... so count == 1 now
    6 - Now you add the "selection" to the url
    7 - if count == 1 (this is true) you change window.location.href which results in an immediate page refresh

    In 'dual' mode
    4 - The first if will be false
    5 - The second if will be true, because mode=='dual'
    6 - count is still 0, so the first if will be true
    7 - you copy "selection" to "selection_1" and increase count by 1 (so count == 1)
    8 - the second if is true ... but IS STILL WRONG because you are using the assignment operator "=" instead of the comparison operator "==". This will set count to 1 and the result of the if condition is true
    9 - you copy "selection" also to "selection_2" and increase count by 1 (so count == 2)
    10 - The third if is also true because count==2, so you append both copies of "selection" to the url and immediately refresh the browser because you change window.location.href

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay

    So I changed a couple things and this is what I have got:

    Code:
    <div onclick="generate_url('data input by php')">A button</div>
    <div onclick="generate_url('different data)">A different button</div>
    
    <div class="view_mode" onclick="change_mode('single')">Singular</div>
    <div class="view_mode" onclick="change_mode('dual')">Dual</div>
    
    
    <script>
    var mode="single";
    var count = 0; 
    
    // Function to change view mode (working)
    function change_mode(newmode)
    {
    mode = newmode;
    count=0;
    }
    
    //Standard url that users selections are added to
    var standard_url='http://www.mywebsite.com/page.php?id=';
    
    // Function to generate a url or mutiple url's based off user input
    function generate_url(selection)
    {
    //Allow user to choose a single option
    	if (mode=='single')
    	{	
    		count++;
    		var singular_url=standard_url+selection;
    		if (count==1) 
    		{
    			window.location.href = singular_url;
    		}
    	}
    
    
    //Dual
    	if (mode=='dual')
    	{	
    		if (count==1)
    		{
    			var selection_2=selection;
    			count++;
    		}
    		if (count==0)
    		{
    			var selection_1=selection;
    			count++;
    		}
    		if (count==2) 
    		{
    dual_url=selection_1+selection_2;
    			window.location.href = dual_url;
    		}
    	}
    }
    
    </script>
    So I fixed a couple of things, the count is now declared and assigned a variable not a string.

    I also fixed the if(count==1) statement so it's not using an assignment.

    I moved the if(count==1) statement above the if(count==0) statement so it would only activate the second time around.

    Previously it would add the first user input twice into the url.

    I am trying to get it so on the first click of one button it adds the first value dependent on what button the user clicked and on the second click it then adds a second user input and creates a url.

    Which then javascript sends the user too.

    I now have the problem where it creates the following url
    mywebsite.com/whatever?id=undefined(SECOND INPUT)

    It should give the following
    mywebsite.com/whatever?id=(FIRST INPUT)(SECOND INPUT)

    I think it's to do with the variables not being passed from one loop to the next.

    I am really a Javascript newbie. If you could help me get this working I would much appreciate it.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    With the "var" keyword you are declaring "selection_1" and "selection_2" as local variables to the method. Those local variables will be reinitialized with each call of the method.

    If you omit the "var" keyword it should work better.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •