SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to change query string attribute

    Hey,
    I have a little proplem implementing a solution for such scenario:
    I have few radiobuttons and according what radiobutton is selected I need to update one links href attribute.

    The link is now like this: <a id="my" href="index.php?color=red&pid=2">
    (Debending what radiobutton is selected, color attribute should change accordingly, for example to color=blue etc..).

    Any suggestion much appreciated.

    Regards

  2. #2
    SitePoint Evangelist borna's Avatar
    Join Date
    Jun 2006
    Location
    Iran, Tehran
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by js_11
    I need to update one links href attribute.
    what do you mean, do you mean you want to change the color of the href or you want to send the color. No problem in the first case and in the second case why not use a submit form function.
    -1/2=999?

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just change the color query string attribute. Then I'll just click the link and I can get the color on server-side php ($color = $_GET['color']).

    Otherwords I should have following link if radiobutton for red color is selected:
    <a id="my" href="index.php?color=red&pid=2">

    And if radiobutton for black color is selected:
    <a id="my" href="index.php?color=black&pid=2">

    And if radiobutton for white color is selected:
    <a id="my" href="index.php?color=white&pid=2">

    So just one link with dynamic href.

  4. #4
    SitePoint Evangelist borna's Avatar
    Join Date
    Jun 2006
    Location
    Iran, Tehran
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile use option

    so in this case, put your color selection in sth like

    Code:
    <td>
    <select name="color" size="1" >
    	<option value="red">R</option>
    	<option value="blue">B</option>
    	<option value="yellow">Y</option>
    	<option value="Green">G</option>
    </select> 
    </td>
    you could send your color to server such way. So just send your choosen_color directly to web server. no worry about &color=+red .
    -1/2=999?

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi u can get the dynamic value of the radio button selected and pass it to the query string..
    check my sample code

    CODE:

    Code:
    <html>
    <head>
    <script language="javascript">
    function loadradio()
    {
    	document.myForm.IP.value = "";
    	for(var i = 0; i< document.myForm.rad.length; i++)
    	{
    		if(document.myForm.rad[i].checked)
    		{
    			document.myForm.IP.value = document.myForm.rad[i].value;
    			document.body.bgColor = document.myForm.rad[i].value;
    		}
    
    	}
    }
    </script>
    </head>
    <body onLoad = "loadradio()" bgcolor = "green">
    <form name="myForm">
    <input type="text" name="IP" value="">
    <input type="radio" name="rad" value="red" onclick = "loadradio()">red
    <input type="radio" name="rad" value="blue" onclick = "loadradio()">blue
    <input type="radio" name="rad" value="green" onclick = "loadradio()">green
    <input type="radio" name="rad" value="violet" onclick = "loadradio()">violet
    </form></body></html>
    hope this helps..

    thnx,
    krishna

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the replies.
    I managed to solve the problem..I did:

    var url = document.getElementById('my').href;
    var attributes = address.substring(index+1,address.length).split('&');

    And then on the for loop for each name/value pair I managed to modify the needed value and finally I updated the link href like this:
    document.getElementById('my').href = new_url;

  7. #7
    SitePoint Evangelist borna's Avatar
    Join Date
    Jun 2006
    Location
    Iran, Tehran
    Posts
    475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile good!

    js_11, why not attach your file if you'd like please. (in case, first zip it)
    -1/2=999?

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my href updater function:
    Code:
    function change_href(color_id)
    {
    	var address = document.getElementById('my_href').href;
    	var index = document.getElementById('my_href').href.indexOf('?');
    	
    	if ( index != -1 )
    	{
    		var query_parts = address.substring(index+1,address.length).split('&');
    		var new_address = address.substring(0,index);
    		new_address += "?";
    		for ( var i=0; i<query_parts.length; i++ )
    		{
    			nameVal = query_parts[i].split('=');
    			if (nameVal[0] == 'color')
    			{
    				//Here we change the colors value
    				new_address += nameVal[0]+"="+color_id+"&";
    				continue;
    			}
    			if (typeof(nameVal[1]) == 'string')
    			{
    				//In case we have name/value pair (index.php?something&x=y)
    				new_address += nameVal[0]+"="+nameVal[1]+"&";
    			}
    			else
    			{
    				//We just have name (index.php?something&x)
    				new_address += nameVal[0]+"&";
    			}
    		}
    
    	}
    	if (new_address.lastIndexOf('&')+1 == new_address.length)
    	{
    		new_address = new_address.substring(0, new_address.length-1);
    	}
    	document.getElementById('my_href').href = new_address;
    }


Bookmarks

Posting Permissions

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