php - HTML form with two submit buttons and two different actions - Stack Overflow

admin管理员组

文章数量:1026202

I have this form, with 2 submit buttons:

<form method="post" onsubmit="send_mail(this);return false">

    <select name="liste">
     <option value='0'>Choose list</option>
     <option value="1">list1</options>
         <option value="2">list2</options>      
    </select>

<p>Subject: <input type="text" name="subject" /><br />

<div id="editor">
<textarea value="editor1" name="editor1">Some text here</textarea>
</div>

 <input type="submit" value="Sent Mail!" />
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
</form>

On the form, as you can see, it has this javascript function: onsubmit="send_mail(this);return false

Which looks like this:

function send_mail(form) {
   jQuery.post('editor.php', jQuery(form).serialize(), function(data) {
   jQuery('#center').html(data);
});
    }

The script sends the form data to my editor.php script, which processes and send the mail, and then returns "email send". The scripts replaces the <div> with the <form>, with this return statement. This is working as I wanted it to.

Now I want to create another button and input textbox to let the user type in an email and send a test of the above form, before submitting it.

How can I do this? The problem is that the 2 button always submits the javascript send_mail, since its attached to the form tag onsubmit.

This is probably a basic question - I hope someone can point me in the right direction.

EDIT/UPDATE:

To clarify: The first button should send $post to my editor.php file and the javascript replaces the div that holds the entire form. My Second button should send $post to my testmail.php file and only replace the div that holds this button and input textfield (the with ID "testmail".

Hope that makes sense.. and thanks a lot for the help so fare.

I have this form, with 2 submit buttons:

<form method="post" onsubmit="send_mail(this);return false">

    <select name="liste">
     <option value='0'>Choose list</option>
     <option value="1">list1</options>
         <option value="2">list2</options>      
    </select>

<p>Subject: <input type="text" name="subject" /><br />

<div id="editor">
<textarea value="editor1" name="editor1">Some text here</textarea>
</div>

 <input type="submit" value="Sent Mail!" />
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
</form>

On the form, as you can see, it has this javascript function: onsubmit="send_mail(this);return false

Which looks like this:

function send_mail(form) {
   jQuery.post('editor.php', jQuery(form).serialize(), function(data) {
   jQuery('#center').html(data);
});
    }

The script sends the form data to my editor.php script, which processes and send the mail, and then returns "email send". The scripts replaces the <div> with the <form>, with this return statement. This is working as I wanted it to.

Now I want to create another button and input textbox to let the user type in an email and send a test of the above form, before submitting it.

How can I do this? The problem is that the 2 button always submits the javascript send_mail, since its attached to the form tag onsubmit.

This is probably a basic question - I hope someone can point me in the right direction.

EDIT/UPDATE:

To clarify: The first button should send $post to my editor.php file and the javascript replaces the div that holds the entire form. My Second button should send $post to my testmail.php file and only replace the div that holds this button and input textfield (the with ID "testmail".

Hope that makes sense.. and thanks a lot for the help so fare.

• php
• javascript
• html
• email
• button

Share Improve this question Follow edited Aug 12, 2012 at 16:09 Bolli asked Aug 12, 2012 at 15:43 BolliBolli 5,27466 gold badges3535 silver badges4949 bronze badges 1

• i find your approach overplicated ,anyway you can change your form action on click of button. – Tarun Commented Aug 12, 2012 at 15:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your JavaScript is not the best. You shouldn't be using it inline like you are (e.g. with the onsubmit attribute). Instead, it should be unobtrusive so your form should work even if JavaScript is not enabled in the user's browser. An example of which:

<form action="editor.php" method="post" id="contact-form">
  <div>
    <label for="to">To:</label>
    <input type="text" name="to" id="to" />
  </div>
  <div>
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject" />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div>
    <input type="submit" name="send" value="Send" />
  </div>
</form>
<div id="response"></div>
<script src="jquery.js"></script>
<script>
    $(document).ready(function() {
        $('#contact-form').submit(function() {
            var action = $(this).attr('action');
            var data = $(this).serialize();
            $.post(action, data, function(response) {
                $('#response').html(response);
            });
            return false;
        });
    });
</script>

The above will see your form still submit to editor.php if JavaScript is not available, but if JavaScript is available, then the JavaScript block will pick up for the form submission, and instead post it using AJAX rather than redirect to editor.php.

If you're wanting to also send test emails, I'd include a checkbox instead with the name test, and if it's checked change the logic in your form handler (in this case editor.php) rather than having an entirely different script. At the simplest, it would look like this:

<?php
$to = $_POST['to'];
$subject = $_POST['subject'];
$message = $_POST['message'];

if (isset($_POST['test'])) {
    // do something
    // maybe set $to to something different
}

if (mail($to, $subject, $message)) {
    echo 'Sent';
}
else {
    echo 'Not sent';
}

Why do you need to make an ajax post and submit the form. Do either one.

Have 2 normal buttons and do whatever you want via S.post.

<form>
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
<input type="button" id="button1" value="Send Mail!" />
</form>

$('#button1").click(function(form) {
   $.post('editor.php', $(form).serialize(), function(data) {
   $('#center').html(data);
   });
});

I have this form, with 2 submit buttons:

<form method="post" onsubmit="send_mail(this);return false">

    <select name="liste">
     <option value='0'>Choose list</option>
     <option value="1">list1</options>
         <option value="2">list2</options>      
    </select>

<p>Subject: <input type="text" name="subject" /><br />

<div id="editor">
<textarea value="editor1" name="editor1">Some text here</textarea>
</div>

 <input type="submit" value="Sent Mail!" />
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
</form>

On the form, as you can see, it has this javascript function: onsubmit="send_mail(this);return false

Which looks like this:

function send_mail(form) {
   jQuery.post('editor.php', jQuery(form).serialize(), function(data) {
   jQuery('#center').html(data);
});
    }

The script sends the form data to my editor.php script, which processes and send the mail, and then returns "email send". The scripts replaces the <div> with the <form>, with this return statement. This is working as I wanted it to.

Now I want to create another button and input textbox to let the user type in an email and send a test of the above form, before submitting it.

How can I do this? The problem is that the 2 button always submits the javascript send_mail, since its attached to the form tag onsubmit.

This is probably a basic question - I hope someone can point me in the right direction.

EDIT/UPDATE:

To clarify: The first button should send $post to my editor.php file and the javascript replaces the div that holds the entire form. My Second button should send $post to my testmail.php file and only replace the div that holds this button and input textfield (the with ID "testmail".

Hope that makes sense.. and thanks a lot for the help so fare.

I have this form, with 2 submit buttons:

<form method="post" onsubmit="send_mail(this);return false">

    <select name="liste">
     <option value='0'>Choose list</option>
     <option value="1">list1</options>
         <option value="2">list2</options>      
    </select>

<p>Subject: <input type="text" name="subject" /><br />

<div id="editor">
<textarea value="editor1" name="editor1">Some text here</textarea>
</div>

 <input type="submit" value="Sent Mail!" />
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
</form>

On the form, as you can see, it has this javascript function: onsubmit="send_mail(this);return false

Which looks like this:

function send_mail(form) {
   jQuery.post('editor.php', jQuery(form).serialize(), function(data) {
   jQuery('#center').html(data);
});
    }

The script sends the form data to my editor.php script, which processes and send the mail, and then returns "email send". The scripts replaces the <div> with the <form>, with this return statement. This is working as I wanted it to.

Now I want to create another button and input textbox to let the user type in an email and send a test of the above form, before submitting it.

How can I do this? The problem is that the 2 button always submits the javascript send_mail, since its attached to the form tag onsubmit.

This is probably a basic question - I hope someone can point me in the right direction.

EDIT/UPDATE:

To clarify: The first button should send $post to my editor.php file and the javascript replaces the div that holds the entire form. My Second button should send $post to my testmail.php file and only replace the div that holds this button and input textfield (the with ID "testmail".

Hope that makes sense.. and thanks a lot for the help so fare.

• php
• javascript
• html
• email
• button

Share Improve this question Follow edited Aug 12, 2012 at 16:09 Bolli asked Aug 12, 2012 at 15:43 BolliBolli 5,27466 gold badges3535 silver badges4949 bronze badges 1

• i find your approach overplicated ,anyway you can change your form action on click of button. – Tarun Commented Aug 12, 2012 at 15:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your JavaScript is not the best. You shouldn't be using it inline like you are (e.g. with the onsubmit attribute). Instead, it should be unobtrusive so your form should work even if JavaScript is not enabled in the user's browser. An example of which:

<form action="editor.php" method="post" id="contact-form">
  <div>
    <label for="to">To:</label>
    <input type="text" name="to" id="to" />
  </div>
  <div>
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject" />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div>
    <input type="submit" name="send" value="Send" />
  </div>
</form>
<div id="response"></div>
<script src="jquery.js"></script>
<script>
    $(document).ready(function() {
        $('#contact-form').submit(function() {
            var action = $(this).attr('action');
            var data = $(this).serialize();
            $.post(action, data, function(response) {
                $('#response').html(response);
            });
            return false;
        });
    });
</script>

The above will see your form still submit to editor.php if JavaScript is not available, but if JavaScript is available, then the JavaScript block will pick up for the form submission, and instead post it using AJAX rather than redirect to editor.php.

If you're wanting to also send test emails, I'd include a checkbox instead with the name test, and if it's checked change the logic in your form handler (in this case editor.php) rather than having an entirely different script. At the simplest, it would look like this:

<?php
$to = $_POST['to'];
$subject = $_POST['subject'];
$message = $_POST['message'];

if (isset($_POST['test'])) {
    // do something
    // maybe set $to to something different
}

if (mail($to, $subject, $message)) {
    echo 'Sent';
}
else {
    echo 'Not sent';
}

Why do you need to make an ajax post and submit the form. Do either one.

Have 2 normal buttons and do whatever you want via S.post.

<form>
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
<input type="button" id="button1" value="Send Mail!" />
</form>

$('#button1").click(function(form) {
   $.post('editor.php', $(form).serialize(), function(data) {
   $('#center').html(data);
   });
});

本文标签： phpHTML form with two submit buttons and two different actionsStack Overflow