Send multiple forms data on one page with ajax

user3906460

I have multiple forms on one web page. I need that user could post data from any form and this data must send to my email. Now working only 1st form.

HTML:

<form name="sentMessage" id="contactForm" novalidate>
        <div>
        <label>Name</label>
        <input type="text" placeholder="Name" class="name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" placeholder="Email" class="email">
    </div> 
    <div id="success"></div>
    <button type="submit">Submit</button>
</form>
<hr>
<form name="sentMessage" id="contactForm" novalidate>
    <div>
        <label>Name</label>
        <input type="text" placeholder="Name" class="name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" placeholder="Email" class="email">
    </div> 
    <div id="success"></div>
    <button type="submit">Submit</button>
</form>
<hr>
<form name="sentMessage" id="contactForm" novalidate>
    <div>
        <label>Name</label>
        <input type="text" placeholder="Name" class="name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" placeholder="Email" class="email">
    </div> 
    <div id="success"></div>
    <button type="submit">Submit</button>
</form>

PHP:

<?php   
$name = $_POST['name'];
$email = $_POST['email'];

// Create the email and send the message
$to = '[email protected]'; 
$email_subject = "Email from $name";
$email_body = "     Details:\n\n"."
                    Name: $name\n\n
                    Email: $email\n\n";
$headers = "Content-type: text/plain; charset=utf-8"; 

    mail($to,$email_subject,$email_body,$headers);
return true;    
?>

JS:

$(function() {

    $("input").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input.name").val();
            var email = $("input.email").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "././mail/contact.php",
                type: "POST",
                data: {
                    name: name,
                    email: email
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

What should I change? How can I submit all 3 forms?

codeGig

You can use single form like:

<form name="sentMessage" id="contactForm" novalidate>
    <div>
        <label>Name</label>
        <input type="text" name="name[]" placeholder="Name" class="name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" name="email[]" placeholder="Email" class="email">
    </div> 
<div>
        <label>Name</label>
        <input type="text" name="name[]" placeholder="Name" class="name">
    </div>
    <div>
        <label>Email</label>
        <input type="email" name="email[]" placeholder="Email" class="email">
    </div> 

    <div id="success"></div>
    <button type="submit">Submit</button>
</form>

JS

 $(function() {

$("input").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input.name").val();
        var email = $("input.email").val();
        var firstName = name; // For Success/Failure Message
        // Check for white space in name for Success/Fail message
        if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
        }
        $.ajax({
            url: "././mail/contact.php",
            type: "POST",
            data: $('#contactForm').serialize(),
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to send data from page with multiple forms

From Dev

multiple forms on one page using bootstrap, ajax and external php

From Dev

How to send data from multiple forms in one request?

From Dev

Send multiple data for one checkbox by ajax without submit form

From Dev

Multiple Login Forms On One Page

From Dev

Clear multiple forms on one page

From Dev

Rails one model multiple forms one page

From Dev

2 Ajax forms in a page but only one is working

From Dev

jQuery Validate for multiple forms on a page using ajax

From Dev

Working with multiple ajax forms in same page

From Dev

How to handle multiple forms in one page

From Dev

Having issues with multiple forms in one page in php

From Dev

Using one script for multiple forms on a single page

From Dev

Multiple forms in one page MVC 5

From Dev

Multiple forms on one page, get input value

From Dev

Multiple forms in one page MVC 5

From Dev

send one of multiple search result to another page

From Dev

send one of multiple search result to another page

From Dev

Send Multiple forms (edit multiple objects) in one Submit button (Ruby)

From Dev

I'm trying to send multiple data using jquery and ajax to another page to check if a value is present in database or not

From Dev

I'm trying to send multiple data using jquery and ajax to another page to check if a value is present in database or not

From Dev

Sending multiple forms data through jQuery Ajax

From Dev

send youtube url one page to another page using jquery ajax

From Dev

Php Ajax - Multiple calls in one page

From Dev

How to add values from multiple HTML forms to one array to send

From Dev

How to add values from multiple HTML forms to one array to send

From Dev

send data from one activity to multiple activity

From Dev

how to send data from a php page to ajax page

From Dev

ajax validation for multiple forms on page, all have same class

Related Related

  1. 1

    How to send data from page with multiple forms

  2. 2

    multiple forms on one page using bootstrap, ajax and external php

  3. 3

    How to send data from multiple forms in one request?

  4. 4

    Send multiple data for one checkbox by ajax without submit form

  5. 5

    Multiple Login Forms On One Page

  6. 6

    Clear multiple forms on one page

  7. 7

    Rails one model multiple forms one page

  8. 8

    2 Ajax forms in a page but only one is working

  9. 9

    jQuery Validate for multiple forms on a page using ajax

  10. 10

    Working with multiple ajax forms in same page

  11. 11

    How to handle multiple forms in one page

  12. 12

    Having issues with multiple forms in one page in php

  13. 13

    Using one script for multiple forms on a single page

  14. 14

    Multiple forms in one page MVC 5

  15. 15

    Multiple forms on one page, get input value

  16. 16

    Multiple forms in one page MVC 5

  17. 17

    send one of multiple search result to another page

  18. 18

    send one of multiple search result to another page

  19. 19

    Send Multiple forms (edit multiple objects) in one Submit button (Ruby)

  20. 20

    I'm trying to send multiple data using jquery and ajax to another page to check if a value is present in database or not

  21. 21

    I'm trying to send multiple data using jquery and ajax to another page to check if a value is present in database or not

  22. 22

    Sending multiple forms data through jQuery Ajax

  23. 23

    send youtube url one page to another page using jquery ajax

  24. 24

    Php Ajax - Multiple calls in one page

  25. 25

    How to add values from multiple HTML forms to one array to send

  26. 26

    How to add values from multiple HTML forms to one array to send

  27. 27

    send data from one activity to multiple activity

  28. 28

    how to send data from a php page to ajax page

  29. 29

    ajax validation for multiple forms on page, all have same class

HotTag

Archive