Question

当用户填写表单的所有字段并单击“提交”时，我想显示一个警告对话框，但是当我调用该javascript函数时，HTML表单无法正常工作。即使我将所有输入字段留空也意味着我也可以提交表单，它会在浏览器上显示警告框。 Plz帮助

form.html

 <form>
  <br>
  <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br>
   <br>
<input type="email" id="email" size="40" placeholder="your email here...." class="form-control" required><br>
   <br>
<input type="text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br><br>

  <input type="submit" onclick="abc()" value="send me" class="btn custom-btn">Send me</button>
 </form>

JS功能

 <script>
function abc() {
message = "<ul><li><b>Name: </b>" + document.name.value;
message += "<li><b>Email: </b>" + document.email.value;
message += "<li><b>Comment: </b>" + document.Comment.value + "</ul>";
alert('Sent Successfully..!   We will contact you shortly.'); 
}
</script>

Answer 1

您必须使用document.getElementById获取值并在表单提交上执行abc()，如下所示：

＆＃13;

function abc(self) {
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var comment = document.getElementById('comment').value;
    var message = "<ul>";
    message = "<li><b>Name: </b>" + name + "</li>";
    message += "<li><b>Email: </b>" + email + "</li>";
    message += "<li><b>Comment: </b>" + comment + "</li>";
    message += "</ul>";
    self.innerHTML = message;
    return false;
}

＆＃13;

<form onSubmit="return abc(this)" >
    <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br/><br/>
    <input type = "email" id="email" size="40" placeholder="your email here...." class="form-control" required><br/><br/>
    <input type = "text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br/><br/>
    <input type = "submit" value="send me" class="btn custom-btn" />
</form>

＆＃13;

Answer 2

当传递所有表单验证时，您可以简单地使用JQuery在表单上监听submit事件。然后在提交函数中，您可以通过id获取每个表单元素的值。

＆＃13;

$('#formId').submit(function abc() {
  message = "<ul><li><b>Name: </b>" + $('#name').val();
  message += "<li><b>Email: </b>" + $('#email').val();
  message += "<li><b>Comment: </b>" + $('#comment').val() + "</ul>";
  alert('Sent Successfully..!   We will contact you shortly.' + message); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='formId'>
  <br>
  <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br>
   <br>
<input type="email" id="email" size="40" placeholder="your email here...." class="form-control" required><br>
   <br>
<input type="text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br><br>

  <button type="submit" value="send me" class="btn custom-btn">Send me</button>
 </form>

＆＃13;

Answer 3

你不需要写文件

＆＃13;

 <script>
function abc() {
message = "<ul><li><b>Name: </b>" + name.value;
message += "<li><b>Email: </b>" + email.value;
message += "<li><b>Comment: </b>" +Comment.value + "</ul>";
alert('Sent Successfully..!   We will contact you shortly.'); 
}
</script>

＆＃13;

<form>
  <br>
  <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br>
   <br>
<input type="email" id="email" size="40" placeholder="your email here...." class="form-control" required><br>
   <br>
<input type="text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br><br>

  <input type="submit" onclick="abc()" value="send me" class="btn custom-btn">Send me</button>
 </form>

＆＃13;

Answer 4

我的问题已经解决，我使用过这个脚本

import "../styles/app.scss";

HTML

 <script>
function abc() {
    var name=document.getElementById('name').value;
    var email=document.getElementById('email').value;
    var comment=document.getElementById('comment').value;

   if(name=="" || email=="" || comment=="")
   {
    alert("Please fill all fields");
   }
   else
   {
    alert("name : "+name+"\nemail :"+email+"\ncomment :"+comment);
   }
}

function ValidateEmail(mail) 
 {
     var email=document.getElementById('email').value;

     if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
 {
return (true)
 }
alert("You have entered an invalid email address!")
return (false)
}
</script>

html表单没有正确执行

4 个答案: