Question

我有一个form，其中有input个字段，

第1步：我会将input fields submit log上的2 console填入input，但我发现没有关联的值键入的form submission。

问题：如何在此value="your typed value" typed value期间获取设定值。

我想要的只是在form submit

之后的

$('#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>

@Test
public void testIterate() throws Exception {

    when(myClass.getValue()).thenReturn(10d)
              .thenReturn(20d)
              .thenReturn(30d)
              .thenReturn(40d)
              .thenReturn(50d);

    iteratorClass.iterate();
}

Answer 1

而不是console.log($('form').html());使用此：

console.log($('form input[type="text"]').val());

根据你上次的评论： -

由于[value]元素没有[type=text]属性。如果您需要在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>

Answer 2

使用jQuery中提供的serializeArray()函数。

你可以实现这一点，

$("form").submit(function( event ) {
  var formVars = $( this ).serializeArray() ;
  console.log(JSON.stringify(formVars));
  event.preventDefault();
});

这是一个有效的演示：http://jsfiddle.net/Lepd897h/1/

希望这有帮助！

Answer 3

更改输入值并按＆＃34;提交我SIR＆＃34;它仍然返回带有默认值的HTML。

＆＃13;

$('#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());
});

＆＃13;

<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>

＆＃13;

请您试试上面的片段吗？我觉得它对你有帮助。

Answer 4

您可以使用jquery的serializeArray（）或serialize（）函数来获取数组或查询字符串格式的post数据。

＆＃13;

$('#sub').click(function(e){
e.preventDefault();
console.log($('form').serializeArray());

});

＆＃13;

Answer 5

$("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();
});

Answer 6

如果要获取表单元素的单个值，可以使用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"}]

在表单提交我无法获得价值领域

6 个答案: