2016-01-04 6 views
0

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

this.submit = function() { 
    var url = this.url + "?"; 
    for(el in this.elements) { 
     var e = $(this.elements[el]); 
     var n = this.names[el]; 
     if(n === "submit") 
     { 
      window.alert("submit"); 
     } 
     else 
     { 
     url += n + "="; 
     } 
     if(el == "#dropdown") 
     { 
      var options = e.children(); 
      for(var i = 0; i < options.length; i++) { 
       var option = $('#' + options[i].id); 
       if(option.attr('selected')) 
       { 
        url += option.attr('name'); 
        url += "&"; 
        window.alert("dropdown worked"); 
        break; 
       } 
      } 
     } 
     else if(el != "#submit") { 
      url += e.attr('value'); 
      url += "&"; 
      window.alert("input worked"); 
     } 
    } 
    window.location.href = url; 
}; 

Проблема в том, что else if(el != "#submit"){} работает даже тогда, когда идентификатор в вопросе «#submit». Кто-нибудь знает, почему это не работает?

Чтобы помочь, вот мой PHP документ, а остальные формы строителю:

PHP:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<?php if(!$_GET): ?> 
<form id="form1"> 
    <input type="text" id="input1" name="name"/> 
    <br> 
    <select id="dropdown" name="color"> 
     <option id="null" name="null"></option> 
     <option id="opt1" name="blue">blue</option> 
     <option id="opt2" name="yellow">yellow</option> 
    </select> 
    <br> 
    <button type="submit" id="submit" name="submit"onclick="form1.submit()">Submit data</button> 
</form> 
<script src="http://charlie/form.js"></script> 
<script> 
    var form1 = new form("form1"); 
    form1.setElements(); 
    form1.logElements(); 
</script> 
<?php elseif(!(isset($_GET['name']) || isset($_GET['color']))): ?> 
<p style="color:red">ERROR! form.js failed</p> 
<?php else: ?> 
<p><?= $_GET['name'] ?></p> 
<p><?= $_GET['color'] ?></p> 
<?php endif; ?> 
</body> 
</html> 

форма Constructer:

function form(id) { 
this.id = "#" + id; 
this.url = window.location.href; 
this.elements = []; 
this.names = []; 
this.setElements = function() { 
    var elements = [],names = [],children = $(this.id).children(); 
    for(var i = 0; i < children.length; i++) { 
     var childid = children[i].id; 
     if(childid) 
     { 
      elements.push('#' + childid); 
     } 
    } 
    this.elements = elements; 
    for(var e in this.elements) { 
     names.push($(this.elements[e]).attr('name')); 
    } 
    this.names = names; 
}; 
this.logElements = function() { 
    for(var e in this.elements) { 
     console.log(this.elements[e]); 
    } 
    for(var n in this.names) { 
     console.log(this.names[n]); 
    } 
}; 
this.submit = function() { 
    var url = this.url + "?"; 
    for(el in this.elements) { 
     var e = $(this.elements[el]); 
     var n = this.names[el]; 
     if(n === "submit") 
     { 
      window.alert("submit"); 
     } 
     else 
     { 
     url += n + "="; 
     } 
     if(el == "#dropdown") 
     { 
      var options = e.children(); 
      for(var i = 0; i < options.length; i++) { 
       var option = $('#' + options[i].id); 
       if(option.attr('selected')) 
       { 
        url += option.attr('name'); 
        url += "&"; 
        window.alert("dropdown worked"); 
        break; 
       } 
      } 
     } 
     else if(el != "#submit") { 
      url += e.attr('value'); 
      url += "&"; 
      window.alert("input worked"); 
     } 
    } 
    window.location.href = url; 
}; 
} 
+0

Вы проверили, что на самом деле 'el'? (Использование 'console.log') – segFault

+1

Оператор« in »выполняет итерацию над свойствами, а не элементами массива по индексам. –

ответ

0

Повернувшись мой комментарий в ответ с некоторым кодом. Оператор «in» в Javascript выполняет итерации над свойствами не элементами по каждому индексу. Чтобы ваш текущий код работал, измените код на следующее:

var el; 
var elementCount = this.elements.length; 
for (var i = 0; i < elementCount; i++) { 
    el = this.elements[i]; 

Это приведет к ожидаемому поведению.

+0

Большое спасибо –

-1

для ... в Это причина. el tkaes значения 0, 1, 2 ... вам нужно сравнить this.elements[el] вместо el:

if(this.elements[el] == "#dropdown") ... 
else if(this.elements[el] != "#submit") { 

... 
+0

Код ранее в его цикле ожидает получать строковые значения, и в любом случае понятно, что он использует оператор «in» таким образом, которого он не собирался. –