通过 JavaScript 获取表单值答案

【问题标题】：Get form values through JavaScript通过 JavaScript 获取表单值
【发布时间】：2016-05-21 22:03:41
【问题描述】：

这是我的 HJTML 代码。我不知道如何使用 JavaScript 获取存储在 filtertime[] 中的值并将它们显示在我的屏幕上。

   <form action="index.php" method="post" >

    <div class="col-lg-6"><div class="f-txt-l"><input id="test" type="checkbox" name="filtertime[]" class="morning" value="Morning"></div> <div class="f-txt-r">Morning</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Afternoon"></div> <div class="f-txt-r">Afternoon</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Evening"></div> <div class="f-txt-r">Evening</div></div>
     <div class="col-lg-6"><div class="f-txt-l"><input  id="test" type="checkbox" name="filtertime[]" class="morning" value="Night"></div> <div class="f-txt-r">Night</div></div>

     <div class="col-lg-12"><input type="submit" name="button" class="apply-filter" value="Apply Filter"></div>


        </form>


   <script>
   var new =  document.getElementsById("test").innerhtml
   </script>

如何通过将值作为filtertime[] 存储在数组中来获取 JavaScript 中的输入值？

【问题讨论】：

向我们展示您迄今为止的尝试。顺便说一句，您所有的输入都具有相同的 ID。 ID 应该是唯一的
我试过了，不工作，所以我想知道如何存储它
我将数据存储在数组中，为什么要不同的 id
向我们展示您迄今为止尝试过的代码。
好的，等我穿上

标签： javascript php html arrays arraylist

【解决方案1】：

这是获取表单项数组的最简单方法

 var arrValues = [];
 for (var x =0; x < document.getElementsByClassName("morning").length ; x++)
 {
   arrValues.push(document.getElementsByClassName("morning")[x].checked);
 }

【讨论】：

【解决方案2】：

试试

在你的表单中

<form action="index.php" id="myform" method="post" >

在 jQuery 中

 var datastring = $("#myform").serialize();

JS

var params = '';
for( var i=0; i<document.FormName.elements.length; i++ )
{
   var fieldName = document.FormName.elements[i].name;
   var fieldValue = document.FormName.elements[i].value;

   // use the fields, put them in a array, etc.

   // or, add them to a key-value pair strings, 
   // as in regular POST

   params += fieldName + '=' + fieldValue + '&';
}

【讨论】：

但我想通过 javascript... 我知道 jquery bro

【解决方案3】：

在您的form 标签中添加id。

<form action="index.php" id="form_name" method="post" >

使用以下代码通过 JS 获取所有表单元素：-

document.forms["form_name"].getElementsByTagName("input");

注意：- 只有当您的表单中没有 selects 或 textareas 时，上述代码才有效。

如果您在 DOM 元素中分配了id，如下所示，

<input type="text" name="name" id="uniqueID" value="value" />

然后您可以通过以下代码访问它：-

Javascript:-

var nameValue = document.getElementById("uniqueID").value;

如果您的表单中有单选按钮，请使用以下代码：-

<input type="radio" name="radio_name" value="1" > 1
<input type="radio" name="radio_name" value="0" > 0<br>

Javascript:-

var radios = document.getElementsByName('radio_name');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

希望对你有帮助:)

【讨论】：

【解决方案4】：

要做到这一点，最简单的方法是使用“早上”类选择所有输入，然后检查是否检查了 foreach ：

    var item = document.getElementsByClassName("morning"); // get all checkbox
    var checkboxesChecked = []; // result array with ckecked ckeckbox

    for (var i=0; i<item.length; i++) {
         // if is checked add the value into the array
         if (item[i].checked) {
            checkboxesChecked.push(item[i].value);
         }
    }


    console.log(checkboxesChecked);

在“checkboxesChecked”数组中，您拥有选中框的所有值。

【讨论】：