lundi 4 janvier 2016

Why is my elseif statement running everytime

I am building a form sending function in JavaScript, and I have run into a problem where it executes an else if statement every time. Here is my script:

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;
};

The problem being that the else if(el != "#submit"){} runs even when the id in question is "#submit". Does anyone know why this doesn't work?

To help, here is my php document, and the rest of the form constructer:

php:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://ift.tt/1dLCJcb"></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>

form 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;
};
}

Aucun commentaire:

Enregistrer un commentaire