Javascript与HTML表单获取值

javascript with html forms getting values

本文关键字:获取 表单 HTML Javascript      更新时间:2023-09-26

我试图从产品表中获取文本,以便将它们保存到购物车中,并在以后的日期将它们放入数据库中。我还希望出现一个确认警报框,以便用户在将其写入数据库表之前进行确认。然而,我有麻烦让java脚本读取我的html,因为我只需要读取有下拉列表选择的字段。

任何帮助或指导将是伟大的!!
    <script type="text/javascript">
        function myFunction()   
        {
alert(document.getElementById("musicStore").rows[0,1,2,3,4].cells.namedItem(number1,+            "price",+ "album",+ "type").innerHTML);
}
</script>
<form name= "musicStore" Action="" Method="get">
<tr>
    <th>Artist</td>
    <th>Title</td>
    <th>Duration</td>
    <th>Price</td>
    <th>Album</td>
    <th>Format</td>
</tr>
<tr>
    <td>Rocking eddie</td>
    <td>Song never leaves</td>
    <td>04:34</td>
    <td id="price" value="8.99">£8.99</td>
   <td id="album" value="freshprince">Fresh Prince</td>
   <td><select name="format" id="type">
   <option value=""></option>
    <option value="cd">CD</option>
    <option value="digital">Download</option>
    </select>
   </td>
</tr>
    <tr>
    <td>Rocking eddie</td>
    <td>Go Home</td>
    <td>06:24</td>
    <td id="price" value="10.99">£10.99</td>
   <td id="album" value="Coffee">Coffee</td>
   <td><select name="format" id="type">
   <option value=""></option>
    <option value="cd">CD</option>
    <option value="digital">Download</option>
    </select>
   </td>
</tr>
<div style ="float: right";>
<button onclick="myFunction()">Add to Cart</button>
</div>
</form>

几个问题:

  1. 您有多个具有相同ID的元素。例如,您有两个id='type'的元素。ID应该是唯一的,如果有重复就不能正常工作。使用class代替:

    <td class="price" value="8.99">£8.99</td>
    
  2. 你的javascript代码不能正常循环。

  3. 你不能在所有的实例中使用innerHTML,因为'type'是select list。你必须获得该元素的,而不是innerHTML。

下面是工作代码的JSFiddle

我将把第二个改成:<select name="format" id="type2">

不同的东西。

我想你会想:

document.querySelector('#type').value
document.querySelector('#type2').value