在表单提交我无法获得价值领域
我有一个form ，其中有2个input字段在那里，
第一步：我将填写2 input fields submit我log到console ，但我看到有没有关联的inputtypes的值。
问题：如何在form submission期间获取设置值，如下所示： value="your typed value" 。
所有我想要的是form submit后typed value
这里是我的代码：
$('#sub').click(function(e){ e.preventDefault(); console.log($('form').html()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form> <p> <span>Enter you name</span> <input type="text" name="name" id=""/> </p> <p> <span>Enter your city</span> <input type="text" name="city" id=""/> </p> <p> <input type="submit" id="sub" value="SUBMIT ME SIR" /> </p> </form>
在改变input值并按下“SUBMIT ME SIR”之后，它仍然返回默认值的HTML。
$('#sub').click(function(e){ e.preventDefault(); $("input,select,textarea").each(function() { if($(this).is("[type='checkbox']") || $(this).is("[type='radio']")) { if ($(this).prop("checked")) { $(this).attr("checked", "checked"); } }else { if ($(this).is("select")) { $(this).find(":selected").attr("selected", "selected"); } else { $(this).attr("value", $(this).val()); } } }); console.log($('form').html()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form> <p> <span>Enter you name</span> <input type="text" name="name" id=""/> </p> <p> <span>Enter your city</span> <input type="text" name="city" id=""/> </p> <p> <span>Select your gender</span> <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </p> <p> <span>Select your checkbox</span> <input type="checkbox" name="check" value="check1"/>check1 <input type="checkbox" name="check" value="check2"/>check2 </p> <p> <span>Selectbox</span> <select> <option value="value1">value1</option> <option value="value2">value2</option> <option value="value3">value3</option> </select> </p> <p> <input type="submit" id="sub" value="SUBMIT ME SIR" /> </p> </form>
使用jQuery中的serializeArray()函数。
你可以做到这一点，
$("form").submit(function( event ) { var formVars = $( this ).serializeArray() ; console.log(JSON.stringify(formVars)); event.preventDefault(); });
这是一个工作的演示： http : //jsfiddle.net/Lepd897h/1/
希望这可以帮助！
而不是console.log($('form').html()); 用这个：
console.log($('form input[type="text"]').val());
根据你最后的评论： –
因为[type=text]元素没有[value]属性。 如果你需要在console.log()显示它们，那么你必须像下面那样显式地设置它：
$('#sub').click(function(e) { e.preventDefault(); var $frm = $('form'); $frm.find('input[type=text]').each(function(){ $(this).attr('value', this.value); }); console.log($frm.html()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p> <span>Enter you name</span> <input type="text" name="name" id="" /> </p> <p> <span>Enter your city</span> <input type="text" name="city" id="" /> </p> <p> <input type="submit" id="sub" value="SUBMIT ME SIR" /> </p> </form>
你可以使用jquery的serializeArray（）或serialize（）函数来获取数组或查询string格式的post数据。
$('#sub').click(function(e){ e.preventDefault(); console.log($('form').serializeArray()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form> <p> <span>Enter you name</span> <input type="text" name="nothing" id=""/> </p> <p> <input type="text" name="abc" id=""/> </p> <p> <input type="submit" id="sub" value="SUBMIT ME SIR" /> </p> </form>
$("form").on("submit", function(ev) { console.log("first input " + $(this).eq(0).eq(1).val(); console.log("first input " + $(this).eq(0).eq(1).val(); });
如果你想获得表单元素的个别值，你可以使用jQuery val（）
var elementValue = $('[name=elementName]').val(); var cityValue = $('[name=city]').val();
如果要将表单数据发布到后端，则需要使用jQuery serializeArray（）序列化表单数据
<form id = "customer-data-form"> <input type="text" name="name" id=""/> </p> <p> <input type="text" name="city" id=""/> </p> <p> <input type="submit" id="sub" value="SUBMIT ME SIR" /> </p> </form> $('#customer-data-form').serializeArray();
这将返回一个带有表单数据的json对象作为键值对
[{"name":"name","value":"NameValue"},{"name":"city","value":"CityValue"}]