Adding Data To An Input Field

Question

I'm trying to add a search box to my page that will direct users to the search result page on a different site. I have the action and all of the other required data in hidden fields, to ensure it's posting correctly.

The problem is that they tack on extra data to the search term, making it an advanced search type of field. So instead of being searchTerm=X, it's expecting searchTerm=Locale(en):FQE=(KE,None,11)MY_SEARCH_TERM:And:LQE=(AC,None,8)fulltext$

How can I add that extra data around my search term, without having to hit an intermediate page to do the concatenation?

Here's what I have so far:

<form action="http://vendors.address/searchresult.do" method="post">
   <input type="hidden" name="type" value="search">
   <input type="hidden" name="sort" value="DateDescend">
   <input type="text" name="queryId">
</form>

And I need something that can result in this type of thing:

<form action="http://vendors.address/searchresult.do" method="post">
   <input type="hidden" name="type" value="search">
   <input type="hidden" name="sort" value="DateDescend">
   <input type="hidden" name="queryId" value="Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29MY_SEARCH_TERM_HERE%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24">
</form>

Any help would be appreciated.

Answer 1

Two things I can think of:
1. Just put the locale and stuff in hidden inputs:

<input type="hidden" name="locale" value="en" />

2. Use javascript to submit the form (this is a horrible idea -- you don't want to make your site break if Javascript is turned off).

Answer 2

You could use Javascript to do this with a hidden search field. In jQuery, it would be something like:

$("input[name='queryId']").keyup(function() {
   $("#hiddenField").val("Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29" + $(this).val() + "%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24");
});

But it would break with no JS.

Edit: Yea, beat to it, didn't refresh for the answers.

Answer 3

You can use JavaScript to do the concatenation before the form is submitted. There are a couple ways to do this but here is the recommended approach:

Since I don't see a submit button I'm assuming you counting your users to hit the enter key to submit the form so you will need to listen to the onSubmit event and concatenate the extra info before the post is sent to server.

Give the form element an id:
<form action="..." method="post" id="searchForm">

and give the text input field an id:
<input type="text" name="queryId" id="queryId">

Add this script block after the form

<script>
document.getElementById("searchForm").onSubmit = function(){  
  var queryField = document.getElementById("queryId");  
  queryField.value = "prepend_data" + queryField.value + "append_data";  
  return true;  
}
</script>

Or of you can use JQuery (please do) you can drop this anywhere:

<script>  
$(function(){
  $("#searchForm")
    .submit(
      function(){
        $("#queryId).val("prepend_data" + $(this).val() + "append_data");
      }
    );
});
</script>

Hope that helps