从表单javascript返回值的麻烦

时间:2015-03-05 12:45:13

标签: javascript html5 forms

我有一个选择下拉框,它会在选中时返回一个特定值,这样可以正常工作。然而,我已经尝试添加成人文本形式的数量,以便在按下相同的按钮时返回该值,并且没有任何作用,这让我感到困惑,因为它似乎应该很简单,但我尝试的任何工作都没有,这是我的HTML:< / p>

        <form>
    <select id = "journeyList">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>
    </form>

    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>
    </form>
    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>

使用Javascript:

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price = journeyList.options[journeyList.selectedIndex].value;

        var Adults = getElementById("ofAdults").value;
        //var ofChildren = getElementById('children').value;
        //var Discount
        //var Total
        //var SeatsLeft

        if (journeyList == 40) {
         var price = journeyList.value;
        }

        if (journeyList == 35) {
         var price = journeyList.value;

        }

        if (journeyList == 70) {
         var price = journeyList.value;
        }

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

这只是我遇到问题的成年人的回归价值。

2 个答案:

答案 0 :(得分:0)

您缺少“文档”。访问ofAdults元素时。

应该是

var Adults = document.getElementById("ofAdults").value

答案 1 :(得分:0)

HTML

<select id = "journeyList">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>


    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>

    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
        <div id="priceBox"></div>
               <div id="adultsBox"></div>

JAVASCRIPT

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price =journeyList.options[journeyList.selectedIndex].value;

        var Adults = document.getElementById("ofAdults").value;

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

这将显示div中的当前列表值和文本框值

<强> DEMO

<强>注1: 你的if语句需要一些修改

在你的情况下,journeyList是一个对象,所以你不能直接做下面的事情

 if (journeyList == 40) {
         var price = journeyList.value;
        }     

如果你想做某事,那么你必须这样做

 if (journeyList.options[journeyList.selectedIndex].value== '40') 

{ 
// your code goes here 

}   

注意2:通常我们在onchange事件中获取选择值。所以我最好使用onchange事件,然后点击这里不需要按钮就可以看到选择更改时的详细信息。

如果您想以这种方式使用,请使用以下代码

<select id = "journeyList" onchange="BookingFare();">
    <option name ="Bristol " value="40">Bristol - Newcastle</option>
    <option name ="London " value="35" >Bristol - London</option>
    <option name ="Glasgow " value="70" >Glasgow - Manchester</option>
    </select><br><br>


    Number of Adults: 
    <form>
    <input type = "number" name ="adult" id="ofAdults" value="" required>

    <button type="button">Submit</button><br>
        <div id="priceBox"></div>
               <div id="adultsBox"></div>

<强> JS

function BookingFare() { 

        var journeyList = document.getElementById("journeyList");
        var price =journeyList.options[journeyList.selectedIndex].value;

        var Adults = document.getElementById("ofAdults").value;

        document.getElementById('priceBox').innerHTML = price;
        document.getElementById('adultsBox').innerHTML = Adults;

        }

无需点击按钮 这里

<强> DEMO