У меня есть form, в котором есть 2 input поля,

step1: я заполню 2 input fields на submit i log его console, но я вижу, что нет никакого значения, связанного с напечатанным { { Х4 } } .

Вопрос: как я могу получить заданное значение во время 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>
0
Dilip G 9 Янв 2017 в 12:46

6 ответов

Лучший ответ

После изменения значения ввода и нажатия «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>

Не могли бы вы попробовать приведенный выше фрагмент? Я думаю, что это полезно для вас.

1
Purvik Dhorajiya 9 Янв 2017 в 10:20

Если вы хотите получить отдельные значения элементов формы, вы можете использовать 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"}]
0
Frogger 9 Янв 2017 в 10:31

Вместо 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>
1
Jai 9 Янв 2017 в 09:59

Используйте функцию serializeArray(), доступную в jQuery.

Вы можете достичь этого, как,

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

Вот рабочая демонстрация: http://jsfiddle.net/Lepd897h/1/

Надеюсь это поможет!

1
David R 9 Янв 2017 в 09:53

Вы можете использовать serializeArray () или serialize () функции jquery, чтобы получить данные записи в формате массива или строки запроса.

$('#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>
0
Hina 9 Янв 2017 в 09:54
$("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();
});
0
Daniel Malik 9 Янв 2017 в 10:04