Form Submit In Div Using Jquery

I'm referring to a problem similar to the one in this post, because the solution described there doesn't work for me. The starting point is a HTML page (called profile) with jQuery

Solution 1:

jQuery's serialize() function only gets <input> elements. A link element is not an input. Calling $(this).serialize() won't add the value of the <a> element to your data.

You need to add an <input> element to hold that data. Perhaps try

<inputtype="hidden" value="changePassword" name="cmd" />

EDIT: Can you post the full html? From the looks of it right now, your selectors won't select the form because it doesn't even have an id property....

Solution 2:

Here's my guesses --

First, you don't have an 'action' attribute on your form. So the JS line for $(this).attr('action') doesn't return anything. I'm not sure how jQuery Ajax handles that.

But I think the real issue is the example.php script and how it's handling your calls. I'm no Ajax expert, but that is not the way I would do it at all. If you take out the showFile() stuff, and just echo $_REQUEST['cmd'], does it work?

Other than that, I'm out of ideas. But it's not a quirk of the browsers, it's an issue with your code, I can say that much.

Solution 3:

The easiest way to solve this would be to add a hidden input to your form:

<inputtype="hidden" name="cmd" value="checkPassword"id="cmd-field" />

If this value needs to change depending on which tab is showing (though it doesn't sound like that's the case), you can change it dynamically when the tab is toggled:

$("#invent-an-id-for-the-link-that-switches-to-this-tab").click(function() {
    $("#cmd-field").value("checkPassword");
});

Solution 4:

Looks like you're handler is not being loaded for the latter browsers... Since the content of the form is dynamic you've gotta make sure is loaded into the DOM before setting the form's handler.

You have 2 possible solutions.

First, once the tab content is loaded, load the piece of script you posted (check jquery doc for tab event load: http://docs.jquery.com/UI/Tabs#event-load).

Second, use jquery live event on button click (currently event submit is not supported). Check out: http://docs.jquery.com/Events/live

The code for the second solution:

$('#subform input:submit').live('click', function() { // catch the form's submit event - should I use the form id?
$.ajax({ // create an AJAX call...data: $(this).serialize(), // get the form datatype: $(this).attr('method'), // GET or POSTurl: $(this).attr('action'), // the file to callsuccess: function(response) { // on success..
        $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
    }

}); return false; // cancel original event to prevent form submitting });

First solution

These are the changes I made to get it to work:

1. Remove generic.js from tpl_overview.tpl

2. Change the code (@tpl_overview.tpl):

   $(function() { $('#tabs').tabs() });

with this code:

 $(function() {
     $("#tabs").tabs( {
        load: function(event, ui) {
           // load specific script to handle form submissionif ($(ui.tab).attr('href') == '#pwd-settings') {
              $.getScript('generic.js');
           }
        }
     } );
  });

This will load and execute the generic.js script after the content of the tab is loaded.

If you see yourself doing this too many times, perhaps you can name your scripts after the tab link names...

Let us know if it worked!