Question

I am using the WordPress theme Studio8 and I have create some custom forms in pages loaded by custom URL Rewrites.

The problem is, while the HTML is Valid and with no errors, when the pages are loaded, through the jQuery $.load('URL Selelcor') moves the

<input type="submit" id="submit" value="Submit" />

outside the form.

My form looks like that:

<form attributes....>
    ....
    <input attributes .... />
    ....
    <input type="submit" id="submit" value="Submit" />
</form>

and the HTML result is like that:

<form attributes....>
    ....
    <input attributes .... />
    ....
</form>

<input type="submit" id="submit" value="Submit" />

Any idea on how to solve that issue ?

---

Another way I am thinking to solve that issue, is to check if the form is loaded, and then if the form does not containa submit button to add on with JavaScript.

The problem now is that I have to check if the form exists, after the AJAX load. In example, for the other events on form elements I use the

$('element_selector).live('event_name', function(){});

In my case how can I check if the form has a submit button after the AJAX load ?

Answer 1

Weird, here is an idea though:

 $(document).ready(function()
 {
      $('input[type="submit"]').live("click",function()
       {
           $('form').submit();
       });
 });

This should make the existing button submit your form. You can add the id on to it to prevent it from submiting all the forms on the page.

To check if it is there and add it if you want you could use:

$(document).ready(function()
{
      if(!$("form").find(':submit').attr("value"))
      {
          $("form").append("<input type=\"submit\" value=\"Submit!\" />");
      }
  });

See this jsFiddle.