2016-07-19 98 views
1

我創建了下面的代碼的形式工作。有一個問題我無法解決。這個問題是在點擊提交按鈕時,警報消息將無法正常工作。警報消息不會使用jQuery

$(document).ready(function() { 
 
    $("#btn_id").click(function() { 
 
    var valid = validate(); 
 
    var name_order = $("#name").val(); 
 
    var address_order = $("#address").val(); 
 
    var city_order = $("#city").val(); 
 
    var state_order = $("#state").val(); 
 
    var zipcode_order = $("#zipcode_id").val(); 
 
    var phone_order = $("#phone_id").val(); 
 
    var email_order = $("#emailid").val(); 
 
    var randID_order = $("#generateID").val(); 
 
    var ICCID_order = $("#ID").val(); 
 

 
    if (valid) { 
 
     $("form[name='workorder']").submit(); 
 
     alert(" Name :" + name_order + " \n Address : " + address_order + 
 
     " \n City : " + city_order + " \n State: " + state_order + 
 
     " \n Zipcode: " + zipcode_order + " \n Phone: " + phone + 
 
     " \n Email: " + email_order + " \n ID: " + randID_order + 
 
     " \n SIM Card: " + ICCID_order) 
 
    } 
 
    }); 
 

 

 

 
    // Give Alert if field not enter 
 
    function validate() { 
 

 
    if (document.workorder.name.value == "") { 
 
     alert("Please provide your Name!") 
 
     document.workorder.name.focus(); 
 
     return false; 
 
    } 
 

 
    if (document.workorder.address.value == "") { 
 
     alert("Please provide your Address!") 
 
     document.workorder.address.focus(); 
 
     return false; 
 
    } 
 

 
    if (document.workorder.city.value == "") { 
 
     alert("Please provide your City!") 
 
     document.workorder.city.focus(); 
 
     return false 
 
    } 
 

 
    if (document.workorder.state.value == "-1") { 
 
     alert("Please select your State!") 
 
     document.workorder.state.focus(); 
 
     return false 
 
    } 
 

 
    if (document.workorder.zipcode.value == " ") { 
 
     alert("Please provide your Zipcode!") 
 
     document.workorder.zipcode.focus(); 
 
     return false; 
 
    } 
 

 
    if (document.workorder.phone.value == " ") { 
 
     alert("Please provide your Phone!") 
 
     document.workorder.zipcode.focus(); 
 
     return false; 
 
    } 
 

 
    var email = document.workorder.emailid.value; 
 
    atpos = email.indexOf("@") 
 
    dotpos = email.lastIndexOf(".") 
 
    if (email == " " || atpos < 1 || (dotpos - atpos < 2)) { 
 
     alert("Please provide your Zipcode!") 
 
     document.workorder.emailid.focus(); 
 
     return false; 
 
    } 
 
    console.log("validated"); 
 
    return (true); 
 
    } 
 

 
    // Generate an random ID 
 
    function randomString() { 
 

 
    var string_length = 8; 
 
    var chars = "abcdefghijklmnopqrstuvwvxyz"; 
 
    var text = " "; 
 
    for (var i = 0; i < string_length; i++) { 
 
     var rnum = Math.floor(Math.random() * chars.length); 
 
     text += chars.substring(rnum, rnum + 1); 
 
    } 
 
    document.workorder.randomfield.value = text; 
 
    } 
 

 
    // Generate box with ID and CCID 
 
    function getData() { 
 
    var fs = require('fs'); 
 
    var ICCID = require('./masterlist.json') 
 
    if (ICCID.length != 0) { 
 
     var index = Math.floor(Math.random() * ICCID.length); 
 
     var pickedID = ICCID[index]; 
 
     ICCID.splice(index, 1); // This removes the picked element from the array 
 
     fs.writeFile("masterlist.json", JSON.stringify(ICCID), function(err) { 
 
     if (err) { 
 
      return consolo.log(err); 
 
     } 
 
     }); 
 
    } else { 
 
     console.log("Sorry, There is no more ICCID to complete the form"); 
 
    } 
 
    document.workorder.ID.value = pickedID 
 
    } 
 

 
});
<html> 
 

 
<head> 
 
    <title>Work Order Form</title> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
 
    </script> 
 
    <script type="text/javascript" src="validate.js"></script> 
 
</head> 
 

 
<body> 
 
    <form action="#" name="workorder" id="form_id"> 
 

 
    <table cellpadding="2" width="300" height="300" bgcolor=g reen align="center" cellspaceing="2"> 
 

 
     <tr> 
 
     <td colspan=2> 
 
      <center> 
 
      <fontsize=4><b>Work Order Form</b> 
 
       </font> 
 
      </center> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Name</td> 
 
     <td> 
 
      <input type="text" name="name" id="name" size="30" align="center"> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>Address</td> 
 
     <td> 
 
      <input type="text" name="address" id="adress" size="30"> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>City</td> 
 
     <td> 
 
      <input type="text" name="city" id="city" size="30"> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td>State</td> 
 
     <td> 
 
      <select name="state"> 
 
      <option value="-1" selected>select..</option> 
 
      <option value="Alabam">AL</option> 
 
      <option value="Alaska">AK</option> 
 
      <option value="Arizona">AZ</option> 
 
      <option value="Arkansa">AR</option> 
 
      <option value="California">CA</option> 
 
      <option value="Colorado">CO</option> 
 
      <option value="Connecticut">CT</option> 
 
      <option value="Delaware">DE</option> 
 
      <option value="Florida">FL</option> 
 
      <option value="Georgia">GA</option> 
 
      <option value="Hawaii">HI</option> 
 
      <option value="Idaho">ID</option> 
 
      <option value="Illinois">IL</option> 
 
      <option value="Indiana">IN</option> 
 
      <option value="Iowa">IA</option> 
 
      <option value="Kansas">KS</option> 
 
      <option value="Kentucky">KY</option> 
 
      <option value="Louisiana">LA</option> 
 
      <option value="Maine">ME</option> 
 
      <option value="Maryland">MD</option> 
 
      <option value="Michigan">MI</option> 
 
      <option value="Minnesota">MN</option> 
 
      <option value="Mississpi">MS</option> 
 
      <option value="Missori">MO</option> 
 
      <option value="Montana">MT</option> 
 
      <option value="Nebraska">NE</option> 
 
      <option value="Nevada">NV</option> 
 
      <option value="New Hampshire">NH</option> 
 
      <option value="New Jersey">NJ</option> 
 
      <option value="New Mexico">NM</option> 
 
      <option value="New York">NY</option> 
 
      <option value="Nortj Carolina">NC</option> 
 
      <option value="North Dakota">ND</option> 
 
      <option value="Ohio">OH</option> 
 
      <option value="Oklahoma">OK</option> 
 
      <option value="Oregon">OR</option> 
 
      <option value="Pennsylvania">PA</option> 
 
      <option value="Rhode Island">RI</option> 
 
      <option value="South Carolina">SC</option> 
 
      <option value="South Dakota">SD</option> 
 
      <option value="Tennessee">TN</option> 
 
      <option value="Texas">TX</option> 
 
      <option value="Utah">UT</option> 
 
      <option value="Vermont">VT</option> 
 
      <option value="Virgina">VA</option> 
 
      <option value="Washington">WA</option> 
 
      <option value="West Virgina">WV</option> 
 
      <option value="Wisconsin">WI</option> 
 
      <option value="Wyoming">WY</option> 
 
      </select> 
 
     </td> 
 

 
     <tr> 
 
      <td>Zipcode</td> 
 
      <td> 
 
      <input type="text" name="zipcode" id="zipcode_id" size="30"> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Phone</td> 
 
      <td> 
 
      <input type="text" name="phone" id="phone_id" size="30"> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Email</td> 
 
      <td> 
 
      <input type="text" name="email" id="emailid" size="30"> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 

 
      <td> 
 
      <input type="reset"> 
 
      </td> 
 
      <td> 
 
      <button name="sumbit" type="submit" id="btn_id" onlick="randomString(); getData();">Submit</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <name="randomfield" id="generateID" value=" "> 
 
      </td> 
 
      <td> 
 
      <name="ID" id="ID" value=" "> 
 
      </td> 
 
     </tr> 
 

 
    </form> 
 
    </table> 
 
</body>

回答

0
  • ,而不是$(按鈕)。點擊()在代碼中使用$(形式).submit爲您的聽衆
  • 形式不具有柱位置。您可以添加return false來提交匿名函數的底部,現在
  • 你有沒有被定義在您的警報調用一個變量「手機」的參考

    $("form#form_id").submit(function() { 
    var valid = validate(); 
    var name_order = $("#name").val(); 
    var address_order = $("#address").val(); 
    var city_order = $("#city").val(); 
    var state_order = $("#state").val(); 
    var zipcode_order = $("#zipcode_id").val(); 
    var phone_order = $("#phone_id").val(); 
    var email_order = $("#emailid").val(); 
    var randID_order = $("#generateID").val(); 
    var ICCID_order = $("#ID").val(); 
    
    if (valid) {  
        // you don't need to manually submit it since we attached to the submit listener above instead of click 
        // $("form[name='workorder']").submit(); 
        alert(" Name :" + name_order + " \n Address : " + address_order + 
        " \n City : " + city_order + " \n State: " + state_order + 
        " \n Zipcode: " + zipcode_order + " \n Phone: " + phone_order + // you had a bad reference here 
        " \n Email: " + email_order + " \n ID: " + randID_order + 
        " \n SIM Card: " + ICCID_order) 
    } 
    // return false until you put in a proper post location 
    return false; 
    

    });

我固定一個例子所有這些都是https://jsfiddle.net/algorithmicMoose/n0t83ees/與評論

+0

所以它的工作原理,但你知道爲什麼我的ID和生成的ID將無法包括??。我看到彈出消息,但它是純 – user6589965

+0

你有html標籤爲。我改變了的jsfiddle來更新generateId和ID的HTML標記與測試值向你展示它是如何工作的。 – algorithmicMoose

2

當你透過()的形式,你離開頁面。警報()永遠不會觸發!嘗試代碼更改爲:

if (valid) 
    { 
    alert(" Name :" + name_order + " \n Address : " + address_order + 
     " \n City : " + city_order + " \n State: " + state_order+ 
     " \n Zipcode: " + zipcode_order + " \n Phone: " + phone + 
     " \n Email: "+ email_order + " \n ID: " + randID_order + 
     " \n SIM Card: " + ICCID_order); 
    $("form[name='workorder']").submit(); 

    } 
+0

所以它的工作原理,但你知道爲什麼我的ID和生成的ID將無法包括?? – user6589965