Question

We have a very long form that has a number of fields and 2 different submit buttons. When a user clicks the 1st submit button (“Photo Search”) the form should POST and our script will do a search for matching photos based on what the user entered in the text input (“photo_search_text”) next to the 1st submit button and reload the entire form with matching photos added to the form. Upon clicking the 2nd submit button (“Save Changes”) at the end of the form, it should POST and our script should update the database with the information the user entered in the form.

Unfortunately the layout of the form makes it impossible to separate it into 2 separate forms. I checked the entire form POST and unfortunately the submitted fields are identical to the perl script processing the form submission no matter which submit button is clicked so the perl script can’t differentiate which action to perform based on which submit button is pushed. The only thing I can think of is to update the onclick action of the 2nd submit button so it clears the “photo_search_text” field before the form is submitted and then only perform a photo search if that fields has a value.

Based on all this, my question is what does the JavaScript look that could clear out the “photo_search_text” field when someone clicks on the 2nd submit button? Here is what I’ve tried so far none of which has worked successfully:

<input type="submit" 
       name="submit" 
       onclick="document.update-form.photo_search_text.value='';" 
       value="Save Changes"
>

<input type="submit" 
       name="submit" 
       onsubmit="document.update-form.photo_search_text.value='';" 
       value="Save Changes"
>

<input type="submit" 
       name="submit" 
       onclick="document.getElementById('photo_search_text')='';" 
       value="Save Changes"
>

We also use JQuery on the site so if there is a way to do this with jQuery instead of plain JavaScript feel free to provide example code for that instead. Lastly, if there is another way to handle this that I’m not thinking of any and all suggestions would be welcome.

Thanks in advance for your help!

Answer 1

If you give the input an ID like this:

<input ID="nosearch" type="submit" name="submit" value="Save Changes">

You can do it via jQuery a bit easier, like this:

$(function() {
  $("#nosearch").click(function() {
    $("#photo_search_text").val("");
  });
});