KevinM1990112qwq
KevinM1990112qwq

Reputation: 735

Change input based on Jquery toggle

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>

Upvotes: 0

Views: 44

Answers (4)

It worked yesterday.
It worked yesterday.

Reputation: 4617

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>

Upvotes: 0

Jackson
Jackson

Reputation: 3518

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>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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>

Upvotes: 0

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

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>

Upvotes: 1

Related Questions