Question

我做了一个网站并制作了一个表格，我已经完成了大部分的验证，但我陷入了困境。我想在这里实现的是，当点击表单的提交按钮时，屏幕上会出现一条警告消息显示，感谢'客户名称'作为反馈，你选择'radiobutton'，你的评论是'textincommentfield'。验证不起作用的一个或另一个原因。任何帮助都会很棒并且事先感谢，顺便说一下我是新手。

代码：http://jsfiddle.net/92tSw/

HTML：

<title> Contact</title>

<body>
<div class="container">
<div id="wrap">

<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
  <div id="menu">
<div id="menu2">
 <ul>
  <li><a href="homepage.html"  ><span>Home</span></a></li>
  <li><a href="about.html"  ><span>About Us</span></a></li>
  <li><a href="clubs.html" ><span>Clubs</span></a></li>
  <li><a href="shop.html" ><span>Shop</span></a></li>
  <li><a href="contact.html" ><span>Contact Us</span></a></li>
 </ul>
</div>
</div>


<form>
<fieldset>
   <legend  style="font-size:20px; padding-top:20px;">Fill in the form Below to contact Us:</legend>
   <p><label for="full name">Full Name:</label>
   <input id="full name" type="text" size="40" name="customername" placeholder="Type first and last name" autofocus/></p>


 <p><label for="Address">Address:</label>
  <input type="text" name="address1" placeholder="Address Line 1" size="42%">

<input type="text" name="address2" placeholder="Address Line 2" size="42%">

<p><label for="Address">&nbsp;</label>
 <input type="text" name="city" placeholder="City/Town" size="20%">
<input type="text" name="postcode" placeholder="Post Code" size="20%"></p>

   <p><label for="Telephone No.">Telephone Number:</label>
  <input type="text" name="Telephone No." maxlenght="12"placeholder=" Enter Telephone No." size="42%"></p>

 <p><label for="email">Email:</label>
 <input name="email" type="email" size="25" placeholder="youremail@you.com"  /></p>





<legend style="font-size:20px;" >Comments</legend>
 <p><label  for="quantity"> How great is the website?Choose one<em>*</em> :</label>

   <input type="radio"    name="myRadio"    value="VG" >Very Great &nbsp;
   <input type="radio"    name="myRadio"    value="G"  >Great&nbsp;
   <input type="radio"    name="myRadio"    value="NVG">Not Very Great&nbsp;
   <input type="radio"    name="myRadio"    value="U"  >Useless
<BR>
<BR>
<BR>
<BR>
<p><label for="comment">Your Message:</label>

<textarea cols="35" rows="5" name="comments"  Placeholder="eg. please knock on the dooor, ring the bell etc." >


 </textarea></p>

</fieldset>
<fieldset>
<input type="checkbox" name="Terms and Condition"value="Terms and Condition" required> Accept Terms and Condition<br>
<input id="bor" type="reset" value="Reset">
<input id="chor" type="submit" name="button" value="Submit" onclick="getMyForm(this.form)" >
</fieldset>
</div>
</div>

CSS：

form{ padding-top:100px; color:White;}
fieldset { background-color:#980000   ; margin: 1%;}
label { float:left; width:20%; text-align:right;}
legend{font-weight:bold;}

 .foot {
padding-top:.75pt;
padding-bottom:.75pt;
padding-right:auto;
padding-left:auto;
width:100%;
}

JS：

function getMyForm(frm)
{
var myinfo = getRadioValue(frm.myRadio);
var customername = document.getElementById("customer").value;
   var comment = document.getElementById("comment").value;


alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
}

function getRadioValue(radioArray){
    var i;
for (i = 0; i < radioArray.length; i++){
if (radioArray[i].checked) return radioArray[i].value;}
return "";
}

Answer 1

在form

上举办活动可能会更好

<form id="form1" onsubmit="return getMyForm(this)">

要阻止表单实际提交，您必须使用javascript方法return false;。

以编程方式在JS

中提交表单

frm.submit();

或者

document.getElementById("form1").submit();

然后在正确的条件下从函数return true;允许提交完成。

（我注意到你没有在action上添加method和form属性。我认为这仅仅是为了示例。）

Answer 2

http://jsfiddle.net/92tSw/2/

如果你不熟悉javascript，请使用JQuery ..它更舒服：

$(document).ready(function() {
    $("#yourmockform").submit(function(e) {
        var customername = $(this).find('#fullname').val();
        var comment = $(this).find('#comment').val();
        var myinfo = $(this).find('[name="myRadio"]:checked').attr('value');

        alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");

        return false;
    });
});

html / javascript - 尝试验证表单

2 个答案: