在更改输入值并按下“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>

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

你可以使用jQuery的serializeArray()或serialize()函数来获取数组或querystring格式的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>