最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery val() doesn't update value in .html() - Stack Overflow

programmeradmin0浏览0评论

I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').val("Young man");
            content.find('#age').val("25");

            alert(content.find('#name').val());
            alert(content.html());
        });
<script src=".1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

I have an HTML page generated with some default values for input fields. Here is the HTML and JavaScript:

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').val("Young man");
            content.find('#age').val("25");

            alert(content.find('#name').val());
            alert(content.html());
        });
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

I am trying to get the div assigned to a variable, then change the values of name and age through this handle. The first alert method confirms that they are changed. But why is content.html() still outputs the original html? How can I make html() output the updated data?

Share Improve this question edited Mar 8, 2017 at 10:05 R3tep 12.9k10 gold badges51 silver badges76 bronze badges asked Mar 8, 2017 at 10:00 Vivekanand P VVivekanand P V 8913 gold badges14 silver badges28 bronze badges 1
  • This code snippet shows that you havent loaded jquery? Have you included jquery? – Muhammad Qasim Commented Mar 8, 2017 at 10:02
Add a ment  | 

2 Answers 2

Reset to default 4

jQuery .val() method never updates the value attribute. You can change it with .attr() method.

$('#trigger').click(function() {
  var content = $(this).parent().find('.content');
  content.find('#name').attr("value", "Young man");
  content.find('#age').attr("value", "25");

  alert(content.find('#name').val());
  alert(content.html());
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a id="trigger" href="#">Know!</a>
  <div class="content">
    <div>
      <label>Name:</label>
      <input type="text" id="name" value="dummy">
    </div>
    <div>
      <label>Age:</label>
      <input type="text" id="age" value="dummy">
    </div>
  </div>
</div>

Assign the new value using attr().

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').attr("value", "Young man");
            content.find('#age').attr("value", "25");

            console.log(content.find('#name').val());
            console.log(content.html());
        });
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

发布评论

评论列表(0)

  1. 暂无评论