如何从 Javascript 中获取值以输入文本表单？

Posted 2023-04-18

【中文标题】如何从 Javascript 中获取值以输入文本表单？

【英文标题】：How to get value from Javascript to input text form?

【发布时间】：2013-02-28 19:08:50

【问题描述】：

我有一个选择表格，有普通，家庭，豪华，行政等各种酒店房间，每个都有相应的价格让我们说在普通房间我会设置300美元的价格。

在选择表单的右侧，每次我选择让我们说普通房间，右侧输入文本字段会显示价格 $300。所以基本上我使用带有代码var ordinary=document.getElementByID("ord").value 的java 脚本，这样我就可以设置价格var ordinary= 3500。接下来是每次我在选择表单中选择普通房间时从输入文本字段中获取变量普通的值，但是我该怎么做呢？

这是代码

<script language="javascript" type="text/javascript">
    var ordinary= document.getElementById("ord").value;
    var ordinary= 5300;

</script>

<form action="insert.php" method="post">
    <table align="center"><tr><td>
            <font face="Arial, Helvetica, sans-serif">RESERVATIONS</font> 
        </td></tr><hr color="#00CC99"/> <br/>
    </table>
    <table border="0" align="center">
        <tr>    
            <th align="justify"> Name: &nbsp </th> 
            <td><input type="text" name="name"></td> 
        </tr>
        <tr>
            <th align="justify"> Contact Number: &nbsp; </th> 
            <td><input type="text" name="contact"></td> 
        </tr>
        <tr>
            <th  align="justify">Room Type: &nbsp;</th>
        <td>
            <select name="roomType">
                <option value="---">---------------------------</option>
                <option value="Ordinary " id="ord">Ordinary</option>
                <option value="Family ">Family</option>
                <option value="Superior ">Superior</option>
                <option value="Deluxe ">Deluxe</option>
                <option value="Corner Suite King">Corner Suite King</option>
                <option value="Executive ">Executive</option>
                <option value="Executive Suite">Executive Suite</option>
                <option value="Grand Executive">Grand Executive</option>
                <option value="Presidential ">Presidential</option>
            </select>
        </td>
            <td>

            </td>
        </tr>
        <tr>
            <th align="justify">AddOn Services: &nbsp;</th>
        </tr>
    </table>
</form>

【问题讨论】：

不要使用字体标签，它已经过时了。相反，使用 css 样式的跨度：<span style="font-face:arial,helvetica,sans-serif">

是的，但是 span div 的 css 代码很复杂，我以前使用过它们，但每次我更改浏览器时它都会混乱，所以我坚持使用普通的 html 代码，如中心和普通字体。但无论如何我只是在做我的程序的功能，我会在完成功能后进行设计：D

嗨！我使用功能命令和警报使它工作！但另一个问题是如何使用变量而不是警报？

给函数赋值

【参考方案1】：

给select 一个id roomType 然后使用它

var e = document.getElementById("roomType");
var desiredValue = e.options[e.selectedIndex].value;

选项的值应该是脚本所需的数据。您应该调用 select 元素的 selectedIndex 而不是 options，否则我们都必须输入很多代码...不好玩

    <select name="roomType" id="roomType">
        <option value="---">---------------------------</option>
        <option value="5300">Ordinary</option>
        <option value="SomePrice">Family</option>
        <option value="SomePrice">Superior</option>
        <option value="SomePrice">Deluxe</option>
        <option value="SomePrice">Corner Suite King</option>
        <option value="SomePrice">Executive</option>
        <option value="SomePrice">Executive Suite</option>
        <option value="SomePrice">Grand Executive</option>
        <option value="SomePrice">Presidential</option>
    </select>

将 SomePrice 更改为您想要的值。

【讨论】：

我仍然不确定！

你添加了id吗（我忘了把它放在我的答案中）。