CODEWITHSUNDEEP
jquerybuttonclickappend
Anju Thapa
Anju Thapa

Reputation: 257

add querystring to URL on buttonclick jquery

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>

Upvotes: 1

Views: 15615

Answers (2)

manny
manny

Reputation: 1948

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;

});

Upvotes: 4

Camille Hodoul
Camille Hodoul

Reputation: 386

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 ?

Upvotes: 0

Related Questions