Question 15091 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can't Submit Form Using Jquery

I need to know that what is the error in my code because everything is correct but form data could not be submitted and in php file the error popups that undefined index lname while submiting the form that means form is submitting through jquery but data is not going in backend. so please resolve this error or help me find out what the error is in code.

this is the html code:-

<span id="answer"></span>
            <form id='contact_form' method="post">
                <div class="modal-body">
                    <div id='name_error' class='error'>Please enter your name.</div>
                    <div>
                        <input type='text' name='lname' id='name' class="form-control" placeholder="Your Name" required>
                    </div>

                    <div id='email_error' class='error'>Please enter your valid E-mail ID.</div>
                    <div>
                        <input type='email' name='email' id='email' class="form-control" placeholder="Your Email" required>
                    </div>

                    <div id='phone_error' class='error'>Please enter your phone number.</div>
                    <div>
                        <input type='text' name='phone' id='phone' class="form-control" placeholder="Your Phone" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" onclick="formSubmit(event);" class="btn btn-primary">I Agree</button>
                </div>
            </form>

This is the jquery code:-

$('#subButton').click(function(e) {
        console.log('in');
        e.preventDefault();
        var FormData = $('#contact-form').submit();
        $.ajax({
            type: "POST",
            url: "admin/backend/leads.php",
            data: FormData,
            dataType: "json",
            success: function(data) {
                var html = '';
                if (data.errors) {
                    html = '<div class="alert alert-danger">' + data.errors + '</div>';
                }
                if (data.success) {
                    html = '<div class="alert alert-success">' + data.success + '</div>';
                    $('#contact-form')[0].reset();
                    localStorage.setItem('#phone', true);
                }
                $('#answer').html(html);
            },
            error: function(data) {
                html = '<div class="alert alert-danger">' + data.errors + '</div>';
                $('#answer').html(html);
            }
        });
    });
Tags:

2

Answers


  1. 0

    Problems in your code are…

    1. There is no element with id="subButton"
    2. There is no formSubmit function
    3. $('#contact-form').submit() submits the form normally which you don’t want. It also returns a jQuery object, not the form data.

    First, remove the onClick from your submit button.

    <button type="submit" class="btn btn-primary">I Agree</button>

    Second, either add id="subButton" to your <button> or, as is my preference, listen to the submit event on the form instead.

    Third, use jQuery’s .serialize() to capture all the form data

    $("#contact_form").on("submit", (e) => {
  e.preventDefault();
  const postData = $(e.target).serialize();

  $.post("admin/backend/leads.php", postData, null, "json")
    .done((data) => {
      // make HTML changes, etc
    })
    .fail((_, textStatus, errorThrown) => {
      // report error, etc
    });
});

    It’s 2022 and you might not need jQuery

    document
  .getElementById("contact_form")
  .addEventListener("submit", async (e) => {
    e.preventDefault();
    const body = new URLSearchParams(new FormData(e.target));
    try {
      const res = await fetch("admin/backend/leads.php", {
        method: "POST",
        body,
      });
      if (!res.ok) {
        throw res;
      }
      const data = await res.json();
      // make HTML changes, etc
    } catch (err) {
      // report error, etc
    }
  });
    Login or Signup to reply.
  2. 0

    Try this,

    $('#contact-form').submit(function(e) {
        console.log('in');
        e.preventDefault();
        var body = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "admin/backend/leads.php",
            data: JSON.stringify(body),
            dataType: "json",
            success: function(data) {
                var html = '';
                if (data.errors) {
                    html = '<div class="alert alert-danger">' + data.errors + '</div>';
                }
                if (data.success) {
                    html = '<div class="alert alert-success">' + data.success + '</div>';
                    $('#contact-form')[0].reset();
                    localStorage.setItem('#phone', true);
                }
                $('#answer').html(html);
            },
            error: function(data) {
                html = '<div class="alert alert-danger">' + data.errors + '</div>';
                $('#answer').html(html);
            }
        });
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search