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 · Accepted Answer · 2011-12-28 15:12:26Z

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, 2011 at 15:12

answered Dec 27, 2011 at 14:47

manny

1,9682 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anju Thapa Over a year ago

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

CY5 Over a year ago

is location.href safe to use?

manny Over a year ago

pls have a look here stackoverflow.com/questions/24078332/…

Camille Hodoul · Accepted Answer · 2011-12-27 15:09:39Z

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 ?

Collectives™ on Stack Overflow

add querystring to URL on buttonclick jquery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related