onClick in html forms

[asif49]

Hi

I'm trying to have a search facility on my site which performs search without refreshing the page. The only problem I have encountered is to be able to take the input which is typed in a search box and associate an onClick event with it that passes that value through as a parameter, I have the following so far, just need to know how to put that value in there...

<form>
<input type="text" name="query" /> [B]<!--I want this value-->[/B]
<input type="button" value="Submit" onClick="myFunction([B]<!--IN HERE-->[/B])"/>
</form>

[Airshow]

Asif,

The clean way to do this is to attach, in javascript, an onsubmit handler to the form element. Be sure to return false to suppress normal form submission and associated page refresh.

onload = function(){
  var sf = document.getElementById("searchForm");
  if(sf){
    sf.onsubmit = function(){
      var searchTerm = this.query.value;
      alert(searchTerm);//debug statement
      ...
      ...
      ...
      return false; //Important! Suppresses default HTML form submission behaviour.
    };
  }
}

<form id="searchForm">
  <input type="text" name="query" />
  <input type="button" value="Submit"/>
</form>

Airshow

[stultuske]

couldn't that also be done by something like:

<input type="text" name="query" id="queryId" />
<input type="button" value="submit" onClick="runMe()" />

function runMe(){
  var queryVar = document.getElementById("queryId").getValue();
}

or something similar? I don't really use Javascript that much, so might be completely wrong :)

[Airshow]

You can do that. It's maybe more intuitive but generally considered clumsy.

The biggest issue is that runMe() would need to be in the global namespace, which should be avoided. In my code above, you will see that everything is contained in a window.onload handler. The global namespace is not used. Another advantage is that all your js functionality is in js; you don't need to hunt through the HTML to discover what event handlers are in place. This is a real issue in with large and/or templated code-bases and multi-programmer teams.

Airshow

[asif49]

The second solution I am not able to get to work, and the first one seems to half-work. The function gets called with the parameter when you press enter after typing the query but when you press the submit button it just doesn't do anything.

I want to have this similar to the way google has got it (big aspirations, I know). I mean having a big text box where you can type a query and search it either by pressing ENTER or by clicking on the button provided. When this button is pressed, one of the functions called is recursive which doesn't work if the "onsubmit" thing is used (or the way I use it) so best to avoid that. Can this be done?

[Airshow]

There's an error in my HTML:

<!--change-->
<input type="button" value="Submit"/>

<!--to-->
<input type="submit" value="Submit"/>

Airshow

[asif49]

of all the mistakes which could've been made Airshow! I just spent about 3 hours messing about with this haha

Thanks on the fix anyways!

[Airshow]

Sorry, I'll take the blame on this [rare?] occasion.

Airshow

[asif49]

Hey Airshow, I think you may be able to help me with this. I'm thinking of having an "advanced search" facility. I have got it to the point that when the user presses the advanced button, a div opens up and presents radio functions buttons allowing some options they can select for the search.

These radio buttons etc. should perhaps be in a separate form? I don't want it to be but if it's in the same form then whenever you even click on the "advanced" button it searches even before doing anything. Anyways, how would you recommend be the best way of doing this?

[Airshow]

Suggest a single form with a div containing all the advanced elements.

When the "advanced" div is hidden its form elements will not be submitted. When it's not hidden, its form elements will be submitted.

By implementing defaults server-side for any setting that is not included in the POST/GET, both standard and advanced search will behave correctly.

Airshow

[asif49]

Yes, but with the current method, javascript starts executing the script when any of the buttons either advanced or search are hit. What I would like is for when the advanced button is clicked to only upon up the div, not start searching as well

[asif49]

YES! I changed the input type to "button" and it worked!

[Airshow]

:cool: