CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Damien
Damien

Reputation: 4319

How do I control what form fields get submitted with jQuery/JavaScript?

I have a search form that when it gets submitted, it goes to someone elses search site. In my form i'm giving users options to choose from. For example, choose to search my site, or external site. They get to choose by selecting radio buttons.

Here's my problem: when searching the external site, because it's also submitting the radio button in the query, the search doesn't work. It's expecting ?SEARCH=Air+Jordan but instead is getting ?inlineRadioOptions=Catalog&SEARCH=Air+Jordan. This throws an error on the external site.

Is there a way I can submit this without the radio button? Here's the code I'm currently using:

<form name="catsearchform37675" id="sForm" method="post" action="">
<div style="margin-bottom: 5px;">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Catalog" onclick="$('.search_textField').attr({name:'searcharg',id:'searcharg'});$('#searchtype').val('t');$('#sForm').attr({action:'http://www.searchlocal.com/ch~S17/X',target:'_blank',method:'GET'});$('#hiddenField').append('<input type=\'hidden\' name=\'searchtype\' id=\'searchtype\' value=\'t\' />');" /> Catalog
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="Website" onclick="$('.search_textField').attr({name:'CAT_Search',id:'CAT_Search'});$('#sForm').attr({action:'/Default.aspx?SiteSearchID=2960&amp;ID=/search-results',target:'self',method:'POST'});" checked="checked" /> Website
</label>
</div>
<div id="hiddenField"></div>
<div class="clearfix"><input type="text" id="CAT_Search" name="CAT_Search" placeholder="Search" hidefocus="true" style="outline: none medium;" class="search_textField" /> <input type="submit" class="search-btn" value="Search" /></div>
</form>

Upvotes: 0

Views: 80

Answers (2)

Babes Florin
Babes Florin

Reputation: 236

You can add an event "onsubmit" to form and disable the radio inputs before submit:

<form onsubmit="$('input[name=inlineRadioOptions]').prop('disabled',true);return true;" name="catsearchform37675"
  id="sForm" method="post" action="">
<div style="margin-bottom: 5px;">
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Catalog"
               onclick="$('.search_textField').attr({name:'searcharg',id:'searcharg'});$('#searchtype').val('t');$('#sForm').attr({action:'http://www.searchlocal.com/ch~S17/X',target:'_blank',method:'GET'});$('#hiddenField').append('<input type=\'hidden\' name=\'searchtype\' id=\'searchtype\' value=\'t\' />');"/>
        Catalog
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="Website"
               onclick="$('.search_textField').attr({name:'CAT_Search',id:'CAT_Search'});$('#sForm').attr({action:'/Default.aspx?SiteSearchID=2960&amp;ID=/search-results',target:'self',method:'POST'});"
               checked="checked"/> Website
    </label>
</div>
<div id="hiddenField"></div>
<div class="clearfix"><input type="text" id="CAT_Search" name="CAT_Search" placeholder="Search" hidefocus="true"
                             style="outline: none medium;" class="search_textField"/> <input type="submit"
                                                                                             class="search-btn"
                                                                                             value="Search"/></div>

Here you have a jsfiddle

Upvotes: 0

spenibus
spenibus

Reputation: 4409

As pointed out in the comments, you must move the radio buttons out of the form.

Upvotes: 1

Related Questions