[英]How to configure the submit button so that it can submit the form that has been validated?
我遇到了一個問題,一旦我在提交按鈕中放置了“返回驗證()”,按鈕就不會提交。 但驗證工作正常。 無論如何要繞過這個,以便javascript可以驗證我的文件然后提交表單?
這是我的javascript:
function validate()
{
var username = document.getElementById("name");
var img = document.getElementById("image");
if(username.value.trim()=="")
{
var myDiv = document.getElementById("error");
myDiv.innerHTML = "Username Not Entered";
}
else if (img.value.trim()=="")
{
var myDiv = document.getElementById("error");
myDiv.innerHTML = "Please Select an image";
}
return false;
}
</script>
這是我的 html,當我把 return 放在前面時
<div class="add-form">
<h1 class="text-center"><font face="fantasy">Please Insert new image</font></h1>
<form onSubmit = "validate()" method="post" enctype="multipart/form-data" id="FormID">
<label>User Name</label>
<input id = "name" type="text" name="user_name" class="form-control">
<label>Select image to upload</label>
<input id = "image" type="file" onchange ="unlock()" name="profile" class="form-control2" accept="*/image">
<button type="submit" value = "submit" name="btn-add">upload</button>
<div id = "error">Please fill up the username and select and image</div>
</form>
</div>
<hr style="border-bottom: 5px blue solid;">
</div>
<!-- end form insert -->
<!-- view form -->
<div class="container">
<div class="view-form">
<div class="row">
<?php
$stmt=$db_conn->prepare('SELECT * FROM tbl_user ORDER BY id DESC');
$stmt->execute();
if($stmt->rowCount()>0)
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="col-sm-3">
<img src="uploads/<?php echo $row['picprofile']?>"><br><br>
<a class="btn btn-info" href="edit_form.php?edit_id=<?php echo $row['id']?>" title="click for edit" onlick="return confirm('Sure to edit this record')"><span class="glyphicon glyphicone-edit"></span>Edit</a>
<a class="btn btn-danger" href="?delete_id=<?php echo $row['id']?>" title="click for delete">Delete</a>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<!-- end view form -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
您可以在validate
函數中創建一個變量並僅在數據有效的情況下提交表單:
function validate()
{
var username = document.getElementById("name");
var img = document.getElementById("image");
var myDiv = document.getElementById("error");
let valid = true;
if(username.value.trim()=="")
{
myDiv.innerHTML = "Username Not Entered";
valid = false;
}
else if (img.value.trim()=="")
{
myDiv.innerHTML = "Please Select an image";
valid = false;
}
if(valid)
{
document.getElementById('FormID').submit();
}
return false;
}
還將<'form
和<button
行更改為:
<form method="post" enctype="multipart/form-data" id="FormID">
...
<button type="submit" value = "submit" name="btn-add" onClick = "validate()">upload</button>
你應該試試:
<form onSubmit = "return validate()"
而且您還需要在 if 情況下包裝return false
,例如:
function validate()
{
var username = document.getElementById("name");
var img = document.getElementById("image");
if(username.value.trim()=="") {
var myDiv = document.getElementById("error");
myDiv.innerHTML = "Username Not Entered";
return false;
}
else if (img.value.trim()=="") {
var myDiv = document.getElementById("error");
myDiv.innerHTML = "Please Select an image";
return false;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.