html 无法使用Jquery提交表单

bfhwhh0e 于 2022-12-02 发布在 jQuery

关注(0)|答案(2)|浏览(258)

我需要知道什么是我的代码中的错误，因为一切都是正确的，但表单数据无法提交，并在PHP文件中的错误弹出，未定义的索引lname，而提交表单，这意味着表单是通过jquery提交，但数据是不是在后端.所以请解决这个错误或帮助我找出代码中的错误.
这是一个很好的例子。

<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>

下面是jquery的代码：

$('#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);
            }
        });
    });

Html

来源：https://stackoverflow.com/questions/74621056/cant-submit-form-using-jquery

2条答案

按热度按时间

wnavrhmk1#

代码中的问题是...
1.没有id="subButton"的元素
1.没有formSubmit函数

$('#contact-form').submit()正常提交您不需要的表单。它还返回一个jQuery对象，而不是表单数据。
首先，从提交按钮中删除onClick。

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

第二，将id="subButton"添加到<button>，或者按照我的偏好，改为监听表单上的 submit 事件。
第三，使用jQuery的.serialize()捕获所有表单数据

$("#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
    });
});

现在是2022年

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
    }
  });

赞(0）回复(0）举报 2022-12-02

vql8enpb2#

试试这个

$('#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);
            }
        });
    });

赞(0）回复(0）举报 2022-12-02

我来回答

html 无法使用Jquery提交表单

2条答案

相关问题

热门标签

最新问答