Question

我编写了一个jQuery函数，其目的是在提交表单时从表单中提取参数。要提取表单数据，我使用的是FormData（）函数。之后，我还编写了一个循环来打印表单条目，但没有任何内容在控制台中打印出来。

我的HTML表单：

<div class="form-contact">
        <form name="sentMessage" id="contactForm" class="contact-form" method="post" novalidate>
          <div class="row">
            <div class="col-md-6">
              <div class="row control-group">
                <div class="form-group col-xs-12 controls">
                  <label>Name<span>*</span></label>
                  <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                  <p class="help-block"></p>
                </div>
              </div>

            </div>

            <div class="col-md-6">
              <div class="row control-group">
                <div class="form-group col-xs-12 controls">
                  <label>Email Address<span>*</span></label>
                  <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                  <p class="help-block"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="row control-group">
            <div class="form-group col-xs-12  controls">
              <label>Subject</label>
              <input type="tel" class="form-control" placeholder="Subject" id="subject">

            </div>
          </div>
          <div class="row control-group">
            <div class="form-group col-xs-12 controls">
              <label>Message<span>*</span></label>
              <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
              <p class="help-block"></p>
            </div>
          </div>
          <div id="success"></div>
          <div class="row">
            <div class="form-group col-xs-12 text-right">
              <button type="submit" name="button" class="btn btn-primary btn-lg">Send Message</button>
            </div>
          </div>
        </form>

      </div>enter code here

我的JS档案：

$(function() {

$("input,textarea").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 subject = $("input#subject").val();
        var message = $("textarea#message").val();*/
        var firstName = name; // For Success/Failure Message*/
        // Check for white space in name for Success/Fail message

        var dat=new FormData($('#contactForm')[0]);
        if(firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
        }
        for (var pair of dat.entries())
        {
          console.log(pair[0]+ ', '+ pair[1]);
        }
        $.ajax({
            type: "POST",
            url: "/signup",
            data: dat,
            processData: false,
            contentType: false,
            /*{
                name: name,
                subject: subject,
                email: email,
                message: message
            },*/
            //cache: false,
            success: function(result) {
                // 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(error) {
                // 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");
                console.log(error);
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

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

Answer 1

使用它来获取客户端的所有表单参数

Var dat = $（this）.serializeArray（）; //这包含提交表单的对象

For（Var i = 0; i

// serializeArray返回一个未禁用且具有name属性的参数数组

FormData（）不能从HTML中提取表单参数

1 个答案: