Question

I am using a three part code below:

First part of the code: Basically a javascript function changeSearchEngine will be triggered when user select Google.

<p id="searchbox">This paragraph will change once javascript is triggered</p>
<form align=right>
<select name="searchengine" onchange="changeSearchEngine(this.form)">
<option value="google">Google</option>
</select>
</form>

This is my changeSearchEngine function in javascript.

function changeSearchEngine(form)
{
    var searchEngine=form.searchengine.value;
    if (searchEngine=="google")
    {
    var url_google='<form method="get" action="http://www.google.com/search" onsubmit="submitGoogle(this.form)" target="_blank"><input type="text" name="q" size="31" maxlength="255" value="" /><input type="submit" value="Google Search"/></form>';
    document.getElementById("searchbox").innerHTML=url_google;
    }
}

At this point of time, all is working well. When I select Google, the searchbox for google appears. I can search and everything.

Notice there is a onsubmit=”submitGoogle(this.form)” right? I need to save what the user search terms into SQL table. So I have this javascript function below to capture what user have type:

function submitGoogle(form)
{
    alert("Inside submitGoogle function");
        var searchterm=form.q.value;
    alert(searchterm); //to test. this part didnt capture the value.
}

I managed to invoke the submitGoogle function BUT however I can’t retrieve the value of q despite using searchterm=form.q.value. What did I do wrong here?

Answer 1

In your onsubmit handler, you are passing this.form. But, this already refers to the form since it is the form itself that triggers the submit event. Form fields have a form property, but the form itself does not have a form property. So, just change your handler to pass this instead of this.form.

http://jsfiddle.net/fmqNj/

onsubmit="submitGoogle(this)"