CODEWITHSUNDEEP
javascriptphphtml
leetcode269
leetcode269

Reputation: 401

html two input values get swapped

I'm trying to send a http request to a website and I need the user to fill out their names and mobile number. I'm trying to do it as followed (I'm still working on the validate function so right now it always return false. )

<html> <meta charset="UTF-8" />

<script type="text/javascript">

    function validate(){
        var a = document.forms["sendform"]["mobile"].value;
        alert(a);

        return false;
    }

</script>

/*<style>

.myButton {
    background-color:#4a45c7;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #193eab;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #282b66;
    position: absolute;
    top: 50%;
    left: 45%;
}

.userNameField{
    position: absolute;
    top: 45%;
    left: 45%;
}

.userEmailField{
    position: absolute;
    top: 40%;
    left: 45%;
}

.userMobileField{
    position: absolute;
    top: 35%;
    left: 45%;
}

.userName{
    position: absolute;
    top: 32.5%;
    left: 38%;
}

.userEmail{
    position: absolute;
    top: 37.5%;
    left: 38%;
}

.userMobile{
    position: absolute;
    top: 42.5%;
    left: 38%;
}*/

</style>

    <body>
        <?php

        $stcate = $_POST["stCate"];
        $stcode = $_POST["stCode"];
        $result = $stcate . $stcode;
        ?><br> 
            <form name="sendform" id = "sendform" method="post" action="https://www.ezship.com.tw/emap/ezship_request_order_api.jsp" onsubmit="return validate();">


            <p class = "userName"> 取件人姓名 </p>
            <input type="text" name="rv_name" id = "name" class = "userNameField"/> <br>

            <p class = "userMobile"> 取件人電話</p>
            <input type="text" name="rv_mobile" id = "mobile" class = "userMobileField"/> <br>


            <input type="hidden" name="st_code" value= "<?php echo $result;?>"/>
            <input type="hidden" name="rv_addr" value="" />
            <input type="hidden" name="rv_zip" value="" />
            <input type="hidden" name="rtn_url" value='http://localhost/orderstatus.php' />
            <input type="hidden" name="web_para" value='yes' />

            <input type="submit" class = "myButton" value='確認寄出' />

        </form>


    </body>
</html>

After I entered some values for both inputs and hit send, the alert always prints out the value for input "name" even though I'm trying to print out input "mobile". The same thing happens when I try to print out value for "name", it just prints out value for "name". I don't understand why the values are swapped? I tried it without any PHP code and CSS and it works the way I expect. What am I doing wrong?

Upvotes: 2

Views: 98

Answers (3)

Kaine
Kaine

Reputation: 21

Since the attribute mobile that you're using is an id, so you can use document.getElementById("sendform").value like this:

function validate(){
    var a = document.getElementById("sendform").value;
    alert(a);
    return false;
}

Upvotes: 2

user629841
user629841

Reputation: 91

You don't have a head tag. That may be the problem with it's running correctly without style tags and php code. Try adding the head tag.

Upvotes: 4

SharkofMirkwood
SharkofMirkwood

Reputation: 12651

You should be using the name attribute of the input as the index of the array, so instead of var a = document.forms["sendform"]["mobile"].value it should be var a = document.forms["sendform"]["rv_mobile"].value.

Upvotes: 0

Related Questions