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

• This code snippet shows that you havent loaded jquery? Have you included jquery? – Muhammad Qasim Commented Mar 8, 2017 at 10:02

2 Answers 2

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>