html / javascript - Попытка проверить форму

0

Я сделал сайт и сделал форму, и я сделал большую часть проверки, но я застрял в одном. то, что я пытаюсь достичь здесь, - это когда нажата кнопка отправки формы, на экране появляется сообщение с предупреждением, в котором говорится "спасибо" имя пользователя "для обратной связи, и вы выбрали" radobutton ", и ваш комментарий был" textincommentfield ".for одна или другая причина валидации не работает. Любая помощь будет большой и спасибо заранее, кстати, я новичок в этом.

Код: 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="[email protected]"  /></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 "";
}
  • 0
    jsfiddle.net/92tSw - вот код
  • 0
    почему бы вам не отредактировать исходное сообщение и не добавить туда скрипку ...?
Показать ещё 4 комментария
Теги:
validation

2 ответа

0
Лучший ответ

Возможно, лучше иметь событие в form

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

Чтобы предотвратить отправку формы, вы должны return false; из метода javascript.

Чтобы программно представить форму в JS

frm.submit();

Или

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

Затем return true; от функции при правильных условиях, чтобы дать возможность заполнить.

(Я заметил, что вы не method атрибуты action и method в form. Я предположил, что это было только для примера.)

Поделиться
  • 0
    это настоящий код, который я использую.
  • 1
    вам нужен возврат в встроенном атрибуте. onsubmit = "return getMyForm (this)"
Показать ещё 9 комментариев
0

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

Используйте JQuery, если вы новичок в javascript.. его гораздо удобнее:

$(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;
    });
});
Поделиться
  • 0
    если вы предпочитаете сложный способ =), вы можете сделать то же самое с простым egmascript, как document.getElementById ("formid"). addEventListener ("submit", callback, false); (помните, что более старый, т.е. не понимает addEventListener, поэтому вы должны выполнить двойную проверку и т. д.)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню