admin管理员组

文章数量:1326058

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>

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