Question

I have the following form from http://regain.sourceforge.net/:

<form name="search" action="search.jsp" method="get">
        <p class="searchinput">
          <b>Suchen nach: </b>
          <input name="query" size="30"/>
          <select name="order" size="1" ><option selected value="relevance_desc">Relevanz</option><option value="last-modified_asc">Dokumentendatum aufsteigend</option><option value="last-modified_desc">Dokumentendatum absteigend</option</select>

          <input type="submit" value="Suchen"/>
         </p>
      </form>

the search form works fine. The URL looks like the following:
http://localhost:8080/regain/search.jsp?query=queryfieldvalue&order=relevance_desc

Now I want to add a checkbox to manipulate the value of the input field query.
If the checkbox is checked then the query value should look like filename:”queryfieldvalue“

http://localhost:8080/regain/search.jsp?query=filename%3A%22queryfieldvalue%22&order=relevance_desc

What’s the best way to do this? Javascript? Do you have a short example for me because I’m really new to javascript.

Thanks a lot in advance.

Answer 1

one way with pure javascript (without jquery) would be

<script type="text/javascript">
function handler()
{
    var check = document.getElementById('check');
    var query = document.getElementsByName('query')[0];
    if(check.checked)
    {
        query.value = "filename:\"" + query.value + "\"";
    }
    else
    {
        query.value = query.value.replace(/^filename:"/, "").replace(/"$/, "");
    }
}
</script>

<form>
    <input type="text" name="query" />
    <input type="checkbox" id="check" onclick="handler()" />box
</form>

it should more or less work, it would be safer if you give query input field an id and then reference it by id, not name