2014-01-04 3 views
1

Привет всем: Я недавно наткнулся на вопрос о проверке формы, которую я сейчас пытаюсь получить. Я получил код от ответа, а затем настроить его на более чем я нуждаясь .:Получение проверки на флажки

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function Validate(){ 
    if(!validateForm()){ 
     alert("Something happened"); 
     return false; 
    } 
return true 
} 
function validateForm() 
{ 
    var c=document.getElementsByTagName('input'); 
    for (var i = 0; i<c.length; i++){ 
     if (c[i].type=='checkbox') 
     { 
      if (c[i].checked){return true} 
     } 
    } 
    return false; 
} 
</script> 
</head> 
<body> 
<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate()" method="get"> 
<input type="checkbox" name="live" value="yesno">You are alive. 
<br> 
<input type="checkbox" name="type" value="person">You are a person. 
<br> 
<input type="checkbox" name="eyes" value="color">Your eyes have color. 
<br> 
<input type="submit" value="Submit"> 
</form> 
</body> 
</html> 

Примечание: Изображение только с Google Image Search, и в Википедии (я не имею его) ,

Теперь, когда я изначально ввел HTML-код из ответа в Tryit Editor в W3 Schools, он дал бы мне предупреждение «Something Happened» или ничего не делал. (Я думаю, это то, что должно было делать). Тем не менее, (теперь, когда у меня есть свои вопросы), он скажет «что-то случилось», если ничего не выбрано, но независимо от того, сколько проверок (над 1 проверено), оно просто даст мне изображение. В принципе, я хочу проверить, проверено ли ВСЕ или ТОЛЬКО НЕКОТОРЫЕ. Если все проверено, я хочу одно изображение, и если только некоторые, я хочу другой. Я надеюсь, что это не слишком запутанной, и я признателен за любую помощь :)

PS: Вот вопрос, где я получил код: Original Question

ответ

1

Попробуйте это для раздела сценария, он изменит «действие» атрибут формы (который указует форму на желаемый URL при подаче) после проверки, сколько флажков Проверила:

<script type="text/javascript"> 
    function Validate(formRef){ 
     var checkboxes = getCheckboxes(formRef); 
     var checkedCount = validateForm(checkboxes); 
     if(checkedCount == checkboxes.length){ 
      // All are checked! 
      return true; 
     } else if(checkedCount > 0) { 
      // A few are checked! 
      formRef.setAttribute('action', 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Yahoo!_logo.svg/200px-Yahoo!_logo.svg.png'); 
      return true; 
     } else { 
      alert("Something happened"); 
     } 
     return true; 
    } 

    function getCheckboxes(formRef) { 
     var c = formRef.getElementsByTagName('input'); 
     var checkboxes = []; 
     for (var i = 0; i<c.length; i++){ 
      if (c[i].type == 'checkbox') 
      { 
       checkboxes.push(c[i]); 
      } 
     } 
     return checkboxes; 
    } 

    function validateForm(checkboxes) { 
     var checkedCount = 0; 
     for (var i = 0; i < checkboxes.length; i++){ 
      if (checkboxes[i].checked){ 
       checkedCount++; 
      } 
     } 
     return checkedCount; 
    } 
</script> 

форма HTML должен быть обновлен, чтобы передать «этот», ссылка на объект формы проверяемого, в Validate() функции, чтобы избежать необходимости запрашивать для него снова:

<form name="myForm" action="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" onsubmit="return Validate(this)" method="get"> 
+0

так это работало с моими вещами, но я добавляю другие формы флажков (у меня есть несколько вещей, которые пользователи будут проверять на соответствие требованиям), и как только я добавлю вторую форму, единственное, что появляется, это Yahoo. Есть идеи? – ethanturner123

+0

Функция проверки действительна для требований вашей первой формы. Каковы ваши требования второй формы? На этом мы можем сделать следующий шаг: сделать проверку более общей или написать новую функцию проверки. – jedifans

+0

Для следующей формы у меня есть два флажка, и я добавлю кнопку отправки. Два разных изображения (один для всех, один для некоторых/нет) одинаковы. – ethanturner123

1

Попробуйте это (предупредит первый вариант, если один или более, но менее 3 проверено, будет оповещать второй вариант, если точно 3 проверено):

<!DOCTYPE html> 
<html> 
<body> 
<input type="checkbox" name="live" value="yesno">You are alive. 
<br> 
<input type="checkbox" name="type" value="person">You are a person. 
<br> 
<input type="checkbox" name="eyes" value="color">Your eyes have color. 
<br> 
    <input value="Submit" type="submit" onclick=" 
var count = 0; 
for(var i = 0; i < document.getElementsByTagName('input').length - 1; i++) 
{ 
    if(document.getElementsByTagName('input')[i].checked) 
{ 
    count += 1; 
} 
} 
if(count >= 1 && count < 3) 
{ 
    alert('First Option'); 
}else 
{ 
    if(count == 3) 
    { 
     alert('Second Option'); 
    } 
}" /> 
</body> 
</html> 
1

следующая должны получить вы на правильном пути:

function Validate() { 
    var checkboxes = processCheckboxes(); 
    if (checkboxes.all.length == checkboxes.checked.length) { 
    alert("All are checked"); 
    } else if (checkboxes.checked.length > 0) { 
    alert("Some checked"); 
    } else { 
    alert("None checked"); 
    } 
    return false; 
} 

function processCheckboxes() { 
    var checkboxes = document.querySelectorAll('input[type=checkbox]'); 
    var checked = [].filter.call(checkboxes, function(el) { 
    return el.checked 
    }); 

    return { all: checkboxes, checked: checked }; 
} 

Затем вы можете обработать отмеченные флажки любым способом, который вам нравится перед отправкой.

Смотрите рабочий пример здесь: http://jsfiddle.net/jkeyes/Zcu7d/

Смежные вопросы