add querystring to URL on buttonclick jquery

Question

How do I grab the selected radiobtn value and the keyword typed in the form and pass it to a URL on button click using jquery or javascript? If the radio button is selected as "all" and keyword typed is "Dance" and the URL is http://myschool.com/event.aspx, then i want the url to be appended like this on button click: http://myschool.com/event.aspx?all&dance

<div class="EventRadios" style="color:#574319; font:13px Trebuchet">
    <input type="radio" name="EventType" value="All" />All &nbsp;  
    <input type="radio" name="EventType" value="Class" />Class &nbsp;  
    <input type="radio" name="EventType" value="Event" />Event &nbsp;    
    <input type="radio" name="EventType" value="Support Group" />Support Group &nbsp;&nbsp;<br /><br />
</div>
<input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Keyword Search..."/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div>

manny · Answer 1 · 2011-12-28T15:12:26.037

4

best option is jQuery BBQ, this will allow you to keep your history too.

check this example: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

simple answer to your question is grab all your form value and make url string with your value and send to location.href = " your url + value ";

$(".searchButton").click(function(){
    var radioVal =  $('input:radio[name=EventType]:checked').val();
    var textVal = $("input:text[name=keywordBox]").val();

    value = "r="+ radioVal + "&t=" + textVal;
    location.href = "yourURL" + value;

});

edited Dec 28 '11 at 15:12

answered Dec 27 '11 at 14:47

manny

1,878
2
15
31

How do I grab the selected radio button value and the keyword on link click event, and store it as value=selected rdiobtn valu+&+keyword – Anju Thapa Dec 27 '11 at 15:06
is location.href safe to use? – CY5 Mar 26 '15 at 14:38
pls have a look here http://stackoverflow.com/questions/24078332/is-it-secure-to-use-window-location-href-directly-without-validation?answertab=active#tab-top – manny Mar 29 '15 at 18:44

score 0 · Answer 2 · answered Dec 27 '11 at 15:09

you could use the .serialize() method :

var queryString = $('#myForm').serialize();

which would give you something like :

EventType=All&KeywordBox=blablabla

you could then load the page you want like so :

document.location = 'http://myschool.com/event.aspx?'+queryString;

Summary :

<form id="myForm" method="GET"><div class="EventRadios" style="color:#574319; font:13px Trebuchet">
    <input type="radio" name="EventType" value="All" />All &nbsp;  
    <input type="radio" name="EventType" value="Class" />Class &nbsp;  
    <input type="radio" name="EventType" value="Event" />Event &nbsp;    
    <input type="radio" name="EventType" value="Support Group" />Support Group &nbsp;&nbsp;<br /><br />
</div>
<input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Keyword Search..."/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div></form>
<script type="text/javascript">
  $('.searchButton').click(function(ev){

    var queryString = $('#myForm').serialize();
    document.location = 'http://myschool.com/event.aspx?'+queryString;
  });
</script>

is it what you're looking for ?

add querystring to URL on buttonclick jquery

2 Answers2