CODEWITHSUNDEEP
jquery
user431619
user431619

Reputation:

Submit form with jQuery not working?

I have a form looking like: 

<form action="/Soeg.aspx" method="GET" id="searchFormHeader"></form>

In the code further down, I have a submit button, the form is triggered by the form="" However, that isnt supported by IE, and then i've tried making a solution in jQuery for IE

<input type="submit" form="searchFormHeader" value="Søg" class="site-search-input">

The jQuery solution looks like: 

//If IE submit site search form
if ($jq(".ie")) {
    $jq(".site-search-input").click(function () {
        alert("clicked");
        $jq('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    });
}

However, it never gets into the submit(), which doesn't make any sense?

Upvotes: 1

Views: 4758

Answers (4)

Rune FS
Rune FS

Reputation: 21742

The submit function is very much a like the click the argument passed is an event handler for the respective event. So in the click event case you seem to have it nail correctly but the only thing you do inside that event handler is to attach an event handler to the form.submit event. You do not trigger that event.

Looking at your code and your question it seems you wish to submit the form upon button click. If so you could change your code to the below

if ($jq(".ie")) {
    $jq('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    $jq(".site-search-input").click(function () {
        alert("clicked");
        $jq('#searchFormHeader').submit();
    });
}

I've moved the event handler outside the click event to avoid attaching the same function as event handler over and over again (each time the button is clicked). This will ensure that if you click the button multiple times you do not attach an event handler to the submit event each time

EDIT There's three options to your problem with not having the input values submitted

  • Move the input to inside the form if you wish to support IE8-. This would be my preferred option it's simple an eliminates the entire problem.
  • Not use submit but post back using $.post
  • Clone the input element add it to the form and remove it again after submission. I find this to be hackish

if you wish to post back you could do something like this

    var form,formId,data,url,id,
    submit = function () {
          //find the form of whatever activated the submitting
          form = $(this).closest("form");
          formId = form.attr('id');
          //iterate all related input fields and collect the data
          //note selects, textareas and checkbox/radiobuttons 
          //needs attention if those are also possible
          data = {};
          $jq("input[form="+formId + "]").each(function(){
                id = this.attr('name') ? this.attr('name') : this.attr('id');
                data[id] = this.val();
          });
          //find the url to post to
          url = form.attr('action') ? form.attr('action') : windows.location;
          //post the data to the server
          //using your original submit event handler as callback
          $jq.post(url,data,function () {
            alert('Handler for .submit() called.');
          });
          return false;
    }

    //make sure they all have a form attribut
    $jq("input").each(function(){
        if(!this.attr('form')){
            formId = this.closest("form").attr('id');
            this.attr('form',formId);
        }
    }

    //attach click event handler to the button
    $jq(".site-search-input").click(submit.call(this))
                             .closest("form")
                             .submit(submit.call(this));

Upvotes: 0

Umair Noor
Umair Noor

Reputation: 442

HTML Code:

<form action="#" method="POST" id="searchFormHeader">
<input type="submit" form="searchFormHeader" value="Søg" class="site-search-input">
</form>

JQ Code:

$(document).ready(function () {
if ($(".ie")) {
    $(".site-search-input").click(function () {
        alert("clicked");
        $('#searchFormHeader').submit(function () {
            alert('Handler for .submit() called.');
            return false;
        });
    });
}
});

Upvotes: 0

Alpesh Prajapati
Alpesh Prajapati

Reputation: 1643

Jquery Function :

$jq(".site-search-input").click(function () {
    alert("clicked");
    $jq('#searchFormHeader').submit(function () {
        alert('Handler for .submit() called.');
        return false;
    });
});

HTML Elements:

<form action="/Soeg.aspx" method="GET" id="searchFormHeader">

  <input type="submit" form="searchFormHeader" value="Søg" class="site-search-input"/>

</form>

Upvotes: 0

Saeed Neamati
Saeed Neamati

Reputation: 35822

You have provided a handler for form submission, but you have never actually submitted the form. Call:

$jq('#searchFormHeader').submit();

Upvotes: 1

Related Questions