2017-07-27 86 views
0

我有以下的JS文件,它使用jQuery和对象:不知道如何让HTML与该工作JS文件

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

任何有关如何让这项工作的帮助将不胜感激。

+0

您在控制台中看到什么样的错误? – ewwink

+0

我对表单中的标识符进行了一些更改,并使用#contact_info代替JS文件中的#showData。我现在正在获取Uncaught语法错误:意外令牌}。我很确定这应该是在那里。 –

回答

0

我认为你正在使用你的js错误ID 使用#contact_info代替#showData文件

相关问题