Question

我有一个带有下拉框，复选框和文本字段的HTML表单。

我正在寻找一种使用javascript返回表单值的解决方案。

换句话说，javascript必须读取表单并返回输入的字段名称和值。

返回字符串应类似于以下内容：

ans00441,908，txt00441，“我还不知道”，ans00442，“country 2”，ans00442，“country 3”，ans00442，“country 4”，ans00444，“Very Much”，txt00444，“太多了“

以下FORM1已作为示例提交。

任何建议都将受到高度赞赏。

FORM1

<SCRIPT LANGUAGE="JavaScript">


function showResult(frm){
    alert('Display field names and values');
}   

 </SCRIPT>


            <table>
               <tr>
                  <td>
                     <h2 id="qst00441">For who will you vote</h2>
                     <br>
                     <input type="radio" name="ans00441" value="908 ">Party 1<br>
                     <input type="radio" name="ans00441" value="909 ">Party 2<br>
                     <input type="radio" name="ans00441" value="910 ">Party 3<br>
                     <input type="radio" name="ans00441" value="911 ">Party 4<br>
                     <br>Other Party<input type="text"  name="txt00441"  size="45" value="" ><br>
                  </td>
               </tr>
               <tr>
                  <td>
                     <h2 id="qst00442">Where do you live</h2>
                     <br>
                     <input type="checkbox" name="ans00442" value="912 ">Country 1<br>
                     <input type="checkbox" name="ans00442" value="913 ">Country 2<br>
                     <input type="checkbox" name="ans00442" value="914 ">Country 3<br>
                     <input type="checkbox" name="ans00442" value="915 ">Country 4<br>
                     <br>Other country <input type="text"  name="txt00442"  size="45" value="" ><br>
                  </td>
               </tr>
               <tr>
                  <td>
                     <h2 id="qst00444">How much do you earn</h2>
                     <br>
                     <input type="radio" name="ans00444" value="921 ">Not to much<br>
                     <input type="radio" name="ans00444" value="922 ">ok<br>
                     <input type="radio" name="ans00444" value="923 ">Very Much<br>
                     <br>Income <input type="text"  name="txt00444"  size="45" value="" ><br>
                  </td>
               </tr>
            </table>

            <INPUT TYPE="Button" VALUE="Submit" name="btnSubmit1" onClick="showResult(this.form);"

Answer 1

我还建议您在按钮中使用除onSubmit之外的onClick事件，因为您可能会遇到问题：用户可以按下input-text中的输入并且不会处理该功能

这是代码（但你需要jQuery），它遍历#form中的每个输入并执行一些安全性。

function showResult() {
    var result = '';
    $('#form input').each(function() {
        var self = $(this),
            type = self.attr('type'),
            name = self.attr('name'),
            value = self.val(),
            checked = self.is(':checked');

        if( value.length > 0 && type == 'text' || ( (type == 'radio' || type == 'checkbox') && checked) ) {
            result += name + ', ';
            result += value + ', ';
        }
    });
    $('#form').html(result);
}

这是小提琴DEMO。

Answer 2

你可以这样做从表格中获取json：

 var frm = $(document.myform);
 var data = JSON.stringify(frm.serializeArray());

Answer 3

您可以使用document.getElementsByTagName("input");并最后格式化bucle中的字符串，以获得纯粹的JavaScript解决方案。

var elements = document.getElementsByTagName("input"),
    elementsLength = elements.length,
    result = '';

for( var i = 0; i < elementsLength; i++ ){
    var element = elements[i];

    result += element.name + ',' + element.value+ ',';
}

You can see this running here

You could see more here

使用javascript返回表单的值

3 个答案: