Question

只知道字段名称是否有办法以与文本，文本区域和单选按钮兼容的方式获取值。

使用原生javascript或jQuery库

我可以使用$("input[name='field1']").val()但它不能使用单选按钮，或者我可以使用$("input[name='field1']:checked").val()但它只能用于单选按钮。我知道我可以添加尝试确定字段类型的逻辑，但在容纳更多类型的字段时开始变得复杂。

下面是我想要做的更具体的例子：

<form>
    <label><input type="radio" name="field1" value="a" /> a</label>
    <label><input type="radio" name="field1" value="b" /> b</label>
    <input type="text" name="field2" />
    <button type="button">Test</button>
</form>

<script>
    getFieldValue = function(name1) {
        return $("input[name='" + name1 + "']").val(); //doesn't work with radio buttons
    }
    $('button').click( function() {
        alert(getFieldValue('field1'));
    });
</script>

更新5/26/2017 使用jQuery serializeArray函数结束。以下是我的代码，以防任何人好奇（https://jsfiddle.net/t6p8sqLu/2/）

var formdata = $("form").serializeArray();
function getFieldValue(name) {
    var result = [];
    for (var x in formdata) {
        if (formdata[x].name === name) {
            result.push(formdata[x].value);
        }
    }
    return result;
}

Answer 1

如果您使用form with name以及name的所有输入字段，则可能需要使用jQuery('form[name="xyz"]').serializeArray()。

Jquery Serialize Array

Jquery Serialize //始终返回字符串

或者你总是可以使用jquery伪选择器

$(":input").each(function() {
  if ($(this).attr('type') === 'radio' && !$(this).prop('checked')) {
    return;
  }
  console.log($(this).attr('name'), $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  input text:
  <input type="text" name="name1" value="Name" /><br/>
  Checkbox
  <input type="checkbox" name="check1" value="yes" checked /> Yes
  <input type="checkbox" name="check1" value="all" checked /> Yes to all<br/>
  Radio
  <input type="radio" name="radio1" value="yes" checked />
  <input type="radio" name="radio1" value="no" /><br/>
  Textarea
  <textarea name="textarea">Textarea</textarea><br/>
  Select
  <select name="select1">
    <option value="dummy" selected>Dummy</option>
  </select>
</form>

Answer 2

经过一番挖掘后发现原生FormData构造工作得很好，可以容纳所有输入类型

最终是以下代码

(new FormData(document.querySelector("form"))).getAll(name).join(',');

完整测试代码

<form>
  <div>
    <label><input type="radio" name="field1" value="a" /> a</label>
    <label><input type="radio" name="field1" value="b" /> b</label>
  </div>
  <div>
    <input type="text" name="field2" />
  </div>
  <div>
    <textarea name="field3"></textarea>
  </div>
  <div>
    <input type="checkbox" name="field4" value="x" /> x
    <input type="checkbox" name="field4" value="y" /> y
  </div>
  <button type="button">Test</button>

</form>
<script>

  function getFieldValue(name) {
    return (new FormData(document.querySelector("form"))).getAll(name).join(',');
  }

  $('button').click( function() {
    alert('field1:' + getFieldValue('field1'));
    alert('field2:' + getFieldValue('field2'));
    alert('field3:' + getFieldValue('field3'));
    alert('field4:' + getFieldValue('field4'));
  });
</script>

Answer 3

与JavaScript相关的OP问题的答案是，除非您能够使用与FormData对象及其方法兼容的浏览器，否则可能无法得到答案，除非您可以使用“ for（var p of iterable）“语法。

因此，这是一种使用JavaScript自动检索包含传统输入的表单值的方法。注意，自定义函数showNameValue（）以相同的方式处理所有输入。但是，事件监听器对控件的处理方式不同，因为需要检查单选按钮和复选框是否已经检查，同时需要评估文本输入和文本区域是否有任何可辨别的内容。

function showNameValue(obj) {
  var arr = [ obj.name, obj.value ];
  console.log( arr.join(": ") );
}

var d = document;
var btn = d.getElementsByTagName("button")[0];
var e = d.forms[0].elements;
var f = null; // field

btn.addEventListener("click", function() {
  for (var i = 0, max = e.length; i < max; i++) {
    f = e[i];

    switch (f.type) {
      case "radio":
        if (f.checked) {
          showNameValue(f);
        }
        break;
      case "checkbox":
        if (f.checked) {
          showNameValue(f);
        }
        break;
      case "textarea":
        if (f.value = f.value.trim()) {
          showNameValue(f);
        }
        break;
      case "text":
        if (f.value = f.value.trim()) {
          showNameValue(f);
        }
        break;
    }
  } //end for
}); // end event listener

请参阅demo

请注意，尽管textarea HTML标记没有显式类型属性，但DOM Textarea对象（请参阅here）拥有此类属性，因此JavaScript可以检测其值。此外，修剪text和textarea值很重要，因为空格，换行符或制表符可能会在这些值之前或之后出现空格。

Answer 4

我已经使用这个功能多年了，它有效

function getValueForm(id, return_num){
    var value = "";
    
    if($("#"+id).is(":checkbox")){
        value = ($("#"+id).is(':checked'))?"1":"";
    }else{
        value = $("#"+id).val();
    }

    if(value === null){
        value = "";
    }

    return_num = (return_num === undefined)?false:return_num;

    if(return_num){
        if(value === ""){
            value = 0;
        }else{
            value = parseFloat(value);
        }
    }

    return value;
}

在JavaScript中获取字段值的方法（与所有输入类型兼容）

4 个答案: