Reputation: 735
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
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
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
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
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