Change input based on Jquery toggle

Question

So basically, when I hit save, the var name should become the new text I entered in the input box, not the original name.

However, right now, no matter what I enter, it reverts it back to the original value.

$(document).ready(function() {
  $('.edit-name').on('click', function() {
    $(this).closest('div').find('span,input').toggle();
  });
  var name = $('#name').val();
  $('#submit').on('click', function() {
    $('#result').html(name);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

All of you answered correctly, I can't believe I missed that. Yikes. — KevinM1990112qwq
– KevinM1990112qwq, Commented Aug 22, 2018 at 11:09

Radonirina Maminiaina · Accepted Answer · 2018-08-22 11:06:47Z

1

Because your name var is initialized on document ready. So it has the initial value of your input (Here John). It should be declared into the click context.

$(document).ready(function() {
    $('.edit-name').on('click', function() {
      $(this).closest('div').find('span,input').toggle();
    });
    $('#submit').on('click', function() {
      var name = $('#name').val();
      $('#result').html(name);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

answered Aug 22, 2018 at 11:06

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jackson · Accepted Answer · 2018-08-22 11:10:55Z

1

You are creating the name variable before any changes are made. This value is never updated after you make a change.

You need to move the name variable inside the event handler

$(document).ready(function() {
  $('.edit-name').on('click', function() {
    $(this).closest('div').find('span,input').toggle();
  });
  $('#submit').on('click', function() {
    var name = $('#name').val();
    $('#result').html(name);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

edited Aug 22, 2018 at 11:10

answered Aug 22, 2018 at 11:07

Jackson

3,5382 gold badges21 silver badges29 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2018-08-22 11:06:53Z

you can read input again and set it to name variable on click of save button. see below code

$(document).ready(function() {
  $('.edit-name').on('click', function() {
    $(this).closest('div').find('span,input').toggle();
  });
  var name = $('#name').val();
  $('#submit').on('click', function() {
    $('.edit-name').click();//toggle input and span
    name = $('#name').val();
    $(".editable span").text(name);
    $('#result').html(name);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

It worked yesterday. · Accepted Answer · 2018-08-22 11:12:42Z

The reason is you have already stored the result in variable name, What you could do is cache the element and then grab the value from it in the click handler

$(document).ready(function() {
  $('.edit-name').on('click', function() {
    $(this).closest('div').find('span,input').toggle();
  });
  var name = $('#name'); // Here you cache the element
  $('#submit').on('click', function() {
    $('#result').html(name.val()); // call val () the element
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

Collectives™ on Stack Overflow

Change input based on Jquery toggle

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related