我正在尝试使用javascript验证表单。正确调用该函数并显示警报,但在警报单击“确定”后仍然提交表单。该函数永远不会返回false。我之前看过这个问题,但我没有看到一个有效的答案。我在这里使用一些JQuery移动,这可能是问题。我试图更改按钮输入类型=按钮,但这甚至不提交表单。
javascript函数是:
<script>
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
表格是:
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
我正在添加调用表单弹出窗口的href。我不知道这与这个问题有什么关系。我一直听说我的代码正在复制,它工作得很好。我无法让它工作,我想完整地代表这个问题。
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="#popupCustomer_alert" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Add Customer Alert</a></li>
<li><a href="#popupQuery_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Query Inventory</a></li>
<li><a href="#popupEdit_customer" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Edit Customer</a></li>
<li><a href="return_qr_code.php" >Get QR Code</a></li>
<li><a href="#popupDownload_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Download Inventory</a></li>
</ul>
答案 0 :(得分:0)
尝试在validateInventoryform()的最后一行添加return true,并在此
中删除额外的“/” <button type="submit" data-theme="b"/>Submit</button>
尝试Jquery绑定事件
$(function () {
$('#form').bind('submit', function (e) {
var isValid = true;
if (!isValid) {
e.preventDefault();
}
});
});
答案 1 :(得分:0)
如果您在提交表单之前验证表单会更好。点击按钮进行验证。
或者更好的是,使用单选按钮而不是复选框,因为您只想选择一个选项:
<input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />
<input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />
答案 2 :(得分:0)
以下编码工作正常:
<html>
<head>
<title>checkbox</title>
<script type="text/javascript">
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
</head>
<body>
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
</body>
</html>
答案 3 :(得分:0)
试试这个,我希望这就是你要找的东西:
HTML:
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv">
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />SKU
<input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />Entire Inventory
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a" />
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<input type="button" data-theme="b" value="Submit" id="submitBtn" />
</form>
</div>
</div>
的Javascript
$("#submitBtn").on("click", function(event){
//Your validation code here
if($("#sku").val() == ""){
alert("Item sku is null")
} else {
// Submit event if everything is okey
$("#inv").submit();
}
});
答案 4 :(得分:0)
我使用的是您提供的相同的html和脚本代码,并在所有浏览器中进行了测试,它运行正常。
<html>
<head>
<script>
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
</head>
<body>
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
</body>
</html>