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

admin管理员组

文章数量:1325321

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?

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Mar 8, 2017 at 10:05 R3tep 12.9k1010 gold badges5151 silver badges7676 bronze badges asked Mar 8, 2017 at 10:00 Vivekanand P VVivekanand P V 89133 gold badges1414 silver badges2828 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

Sorted by: 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>

本文标签： javascriptjQuery val() doesn39t update value in html()Stack Overflow