Multiple search inputs to output as one search in

Question

I'm trying to create a search box that would have 4 inputs but output as one search. Here is my current code:

 <form method="get" id="searchform" action="http://sitename.com/">
 <input type="text"  name="s" />
 <input type="text" name="a" />
 <input type="text"  name="b" />
 <input type="text"  name="c" />
 <div class="clear_space"></div>
 <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
 </form>

But that outputs like this in wordpress: /?s=milk&a=eggs&b=cheese&c=garlic&submit=Search

But I need it to output like this: /?s=milk+egg+cheese+garlic&submit=Search

So somehow those additional inputs need to add their text to the first ?s= with just a +... Any help is massively appreciated.

Answer 1

Are you kidding??

The + that you are seeking is simply a space. Have one text field, and when the form is submitted the spaces in between the words will be converted into +.

Answer 2

Wow, you have a lot of problems, but before we get deep into them let me tell you that your "output" is in fact a get parameter, or a URL. Now you should NEVER use the same id for different tags (!!!). If you think about a valid reason to do that, then think again.

Change your form as follows:

<form method="get" id="searchform" action="http://sitename.com/">
 <input type="text" class="field" placeholder="Search"   />
 <input type="text" class="field" placeholder="Search"  />
 <input type="text" class="field" placeholder="Search"  />
 <input type="text" class="field" placeholder="Search"  />
 <input type="hidden" name="s" id="s" />
 <div class="clear_space"></div>
 <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
 </form>

and then implement a form submit event to calculate your value and assign to your input field. Cheers.

EDIT:

Use the following js code to run before you submit your form:

//...
var value = "";
$(".field").each(function(){
    value += ((value !== "") ? (" ") : ("")) + $(this).val();
});
$("#s").val(value);
//...