Question

我使用下面的代码创建了一个表单。有一个我无法解决的问题。问题是单击提交按钮时，警报消息不起作用。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

当您汇总（）表格时，您将离开页面。警报（）从不开火！尝试将代码更改为：

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

  }

Answer 2

而不是$（按钮）.click（）使用$（form）.submit作为你的听众
在您的代码中，表单没有帖子位置。您现在可以在提交匿名函数的底部添加一个返回false

您在警报调用中引用了未定义的变量“phone”

$("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/的一个示例中修复了所有这些注释

警报消息无法使用jquery工作

2 个答案: