Question

我有以下JS文件，它使用了jQuery和Objects：

$('#contact').validate({
    submitHandler: function () {
        var formInput = storeFormInput();
        var url = 'http://localhost/process.php';
        $.post(url, formInput, function (json) {
            showMessage(json);
        });
    }

});

function storeFormInput(event) {

    var formInput = {};

    formInput.firstName = $('#firstName').val();
    formInput.lastName = $('#lastName').val();
    formInput.emailAddress = $('#emailAddress').val();
    formInput.phoneNumber = $('#phoneNumber').val();

    return formInput;
}

function showMessage(json) {
    var showData = $('#showData');
    var info = '<p>' + json.message + '</p>';

    showData.empty().append(info);
    $('form').fadeOut('slow');
    }
}
)();

单击提交按钮后，它应该创建一个无序的输入字段列表，表单应该淡出。以下是我对HTML的看法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta author="Justin Roohparvar">
        <link rel="stylesheet" href="CSS\css.css">
        <script 
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
        </script>
        <script src="C:\Users\Justin\Downloads\jquery-validation-
        1.16.0\dist\jquery.validate.js"></script>
        <script src="Javascript/form.js"></script>

        <title>Contact Form</title>
    </head>
    <body>

        <form method="POST" action="week_1_contact_form.html">
            <h1>Contact Form</h1>
            <input id="first_name" type="text" maxlength="50" size ="25" 
                   placeholder="First Name" required> <br /><br />
            <input id="last_name" type="text" maxlength="50" size="25" 
                   placeholder="Last Name" required> <br /><br />
            <input id = "email" type="email" name="email" placeholder="Email" 
                   required> <br /> <br />
            <input id="phone_number" type="tel" name="phone_number" 
                   placeholder="Phone Number" required><br /><br />
            <button id ="button">Submit</button>

        </form>

        <p id="contact_info">
        </p>
    </body>
</html>

非常感谢任何有关如何使这项工作的帮助。

Answer 1

我认为您使用的是错误的ID 在js文件中使用#contact_info代替#showData

不确定如何使用这个JS文件的HTML

1 个答案: