jqueryui form submit button and using the dialog buttons

Question

I've been so frustrated by this I'm going crazy! I have a form that works if you use the submit button on the form.

I'm trying to drop it into a modal jqueryui dialog

so if you remove the input submit button in the html, the jqueryui button starts working, but breaks my action page.

normally the action page sends an email with the contents, then redirects to a thank you page

which is what it does with the html submit button, but using the jqueryui button it prints this:

Â

and doesn't continue

This is the section where the button is initialized

 $( "#dialog-form" ).dialog({
  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  buttons: {
    "Submit Request": function() {

   $("form[name='send']").submit()
   $('#send').submit();
      $(this).submit();
    $('#dialog-form').submit();

and this is the form

<div id="dialog-form" title="Request a Quote">
<p class="validateTips">You are also welcome to call us at </p>

<form id="send" name="send" action="process.php" method="POST">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="number">Phone Number</label>
<input type="name" name="contact" id="number" value="" class="text ui-widget-content ui-corner-all" />
<label for="message">Message</label>
<textarea cols="49" rows="6"name="message"/></textarea>
 <input name="submit" type="submit" value="submit" >
</form>
 </div>

and adding this to the form makes it work

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

but only if you click the html form submit button

This is the action page:

 <?php
 if(isset($_POST['submit'])) {
 $to = '@gmail.com' ;     //put your email address on which you want to receive the information
 $subject = 'Contact Form';   //set the subject of email.
 $headers  = 'MIME-Version: 1.0' . "\r\n";
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 $message = "<table><tr><td>Name: </td><td>".$_POST['name']."</td></tr>
           <tr><td>E-Mail: </td><td>".$_POST['email']."</td></tr>
           <tr><td>Phone Number: </td><td>".$_POST['contact']."</td></tr>
           <tr><td>Message: </td><td>".$_POST['message']."</td>
           </tr></table>" ;
   mail($to, $subject, $message, $headers);
   header('Location: contact_thanks.php');
 }
 ?>

You could try calling the 'click' event of the underlying form's submit button. i.e. trigger('click') — Rake36
– Rake36, Commented Jul 15, 2013 at 1:35

Katstevens · Accepted Answer · 2013-07-15 01:40:20Z

0

I believe this can be done with straight JavaScript; set the id of the form to something (in your case id="send" then call the Submit() event like so:

document.forms["send"].submit();

where the string in the square brackets is the id of the form. Another method would be using the name of the form (in your case also "send"):

<script type="text/javascript">
    function submitform()
    {
      document.send.submit(); <-- 'send' refers to your form name
    }
</script>

Hope this works for you!

Adapted from code found here.

EDIT: Question: in your original HTML does the form have a closing tag? That may be preventing the whole form from being found.

answered Jul 15, 2013 at 1:40

Katstevens

1,56913 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2581956 Over a year ago

Thank you so much for the reply!! unfortunately my action page still displays Â I tried both of your responses, (the second I stripped everything away but the call itself) I don't understand why changing from the input submit button to the javascript/jquery button makes any difference

Collectives™ on Stack Overflow

jqueryui form submit button and using the dialog buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related