堆栈内存溢出
  简体   繁体   English

警报消息将无法使用jQuery

[英]Alert message won't work using jquery

 原文  2016-07-19 20:07:14  9   2    javascript

问题描述

I created a form with the code below. 我用下面的代码创建了一个表单。 There is a problem that I am unable to solve. 有一个我无法解决的问题。 The problem is the alert message won't work when the submit button is clicked. 问题是单击“提交”按钮后，警报消息将不起作用。 

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

2 个解决方案

解决方案1
 2  2016-07-19 20:10:51

When you sumbit() the form, you leave the page. 当您sumbit（）窗体时，您将离开该页面。 The alert() never fires! alert（）永远不会触发！ Try changing the code to: 尝试将代码更改为： 

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

  }

解决方案2
 0 已采纳  2016-07-19 20:29:37

  • instead of $(button).click() use $(form).submit for your listener 代替$（button）.click（）使用$（form）.submit为您的监听器
  • in your code the form does not have a post location. 在您的代码中，表单没有发布位置。 You can add a return false to the bottom of the submit anonymous function for now 您可以暂时在返回匿名功能的底部添加return false

  • you have a reference to a variable "phone" in your alert call that is not defined 您在未定义的警报呼叫中引用了变量“ 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;

    }); }）;

I fixed all these in an example at https://jsfiddle.net/algorithmicMoose/n0t83ees/ with comments 我在https://jsfiddle.net/algorithmicMoose/n0t83ees/中的示例中使用注释修复了所有这些问题

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery，ajax不会提示某些消息 - Jquery, ajax won't alert some message jQuery驱动的应用程序。 没有alert（）将无法工作 - jQuery-driven app. won't work without alert() 分页无法使用jQuery - Pagination won't work using jQuery Jquery .click不会控制日志或警报 - Jquery .click won't console log or alert 当页面加载不起作用时，Javascript/JQuery 会弹出一个警报 - Javascript/JQuery having an alert pop up when page loads won't work jQuery加载即使没有回调函数也不会在没有警报的情况下工作 - jQuery load won't work without alert even with a callback function in place 除非我先调用alert（），否则无法覆盖JQuery中的选择框？ - Overriding a select box in JQuery won't work unless I call alert() first? jQuery + setTimeout无法正常工作 - JQuery + setTimeout won't work jQuery $ .extend无法正常工作 - jQuery $.extend won't work jQuery delegate() 不适用于 $(this) - jQuery delegate() won't work with $(this)
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM