Javascript 简单的输入验证和向表中添加值
我需要使用jQuery库将输入中的产品信息添加到表中。我已经试了很长一段时间了,但还是一事无成。首先,我需要输入数据,选择适当的单选按钮,然后验证输入字段。若并没有错误,则应将产品信息添加到表中。我尝试了以下代码: 没有什么能按预期的那样工作。我做错了什么 JS代码:Javascript 简单的输入验证和向表中添加值,javascript,jquery,Javascript,Jquery,我需要使用jQuery库将输入中的产品信息添加到表中。我已经试了很长一段时间了,但还是一事无成。首先,我需要输入数据,选择适当的单选按钮,然后验证输入字段。若并没有错误,则应将产品信息添加到表中。我尝试了以下代码: 没有什么能按预期的那样工作。我做错了什么 JS代码: $(document).ready(function () { //Global variables var productName = ""; var price = 0; var onStack = "N/A"; $("b
$(document).ready(function () {
//Global variables
var productName = "";
var price = 0;
var onStack = "N/A";
$("body > form").submit(function () {
//Check if any of requested inputs is empty
if ($("#name").val().length == 0) {
//Missing name alert
$("#errors").val('Missing product name');
break;
} else if ($("#price").val() == 0) {
//Missing price alert
$("#errors").val('Missing price');
break;
}
//Get values from text inputs
productName = $("#name").val();
price = $("#price").val();
//Check radio buttons and assign values
if ($('input[value = "true"]'.is(':checked')) {
onStack = "Product available";
} else if ('input[value = "false"]'.is(':checked') {
onStack = "Not available";
}
//Add values to table
$("table tr:last").after("<tr><td>$productName</td><td>$price</td><td>$onStack</td></tr>");
});
});
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<body>
<form method="" action="">
<input type="text" id="name" placeholder="Product name" />
<br />
<input type="text" id="price" placeholder="Price" />
<br/>
<input type="radio" name="stack" value="true">Product available
<br />
<input type="radio" name="stack" value="false">Product not available
<br />
<input type="submit" value="Submit">
</form>
<div id="errors"></div>
<br />
<table border="1">
<tr>
<th>Product name</th>
<th>Price</th>
<th>Stack</th>
</tr>
</table>
<div id="sumOnStack">Sum of available products</div>
<div id="SumNotOnStack">Sum of unavailable products</div>
<input type="button" id="resetForm" value="Reset form" />
<br />
</body>
</html>
请试试这个。希望上面的代码能对你有所帮助。你肯定可以在这里显示HTML,这比让我们去其他网站查看你的问题要好。HTML应该格式化为代码,就像JS一样。长度的拼写有误。您没有包括jQuery库。一问我的问题就检查一下。现在所有的东西都是英文的。试试看。没什么变化,试过了。现在我在点击JSFIDLE:Nevermind上面的提交按钮时收到一个错误{error:Please use POST request},它现在正在工作。谢谢你的帮助。
$(document).ready(function () {
//Global variables
var productName = "";
var price = 0;
var onStack = "N/A";
$("body > form").submit(function ( e) {
//Check if any of requested inputs is empty
$("#errors").html('');
if ($("#name").val().length == 0) {
//Missing name alert
$("#errors").html('Missing product name');
return false;
} else if ($("#price").val() == 0) {
//Missing price alert
$("#errors").html('Missing price');
return false;
} else if($('input[name="stack"]:checked').length == 0) {
$("#errors").html('Missing product availibility');
return false;
}
//Get values from text inputs
productName = $("#name").val();
price = $("#price").val();
var stack = $('input[name="stack"]:checked');
console.log( $(stack).val() );
//Check radio buttons and assign values
if ($(stack).val() == 'true') {
onStack = "Product available";
} else {
onStack = "Not available";
}
//Add values to table
$("table tr:last").after("<tr><td>"+productName+"</td><td>"+ price +"</td><td>"+ onStack +"</td></tr>");
return false;
});
});