Marco Gasi
asked on
Jquery val() rpoblem
Hi, friends.
After some hours of trials and errors I ask to you for a solution :(
Let's say I have a list of users: each item represents a user and has two buttons: edit and delete. If the user clicks on edit button, the li's height increases and reveals a form with three fields: name, email and password. The first two fields are filled with data from the database. The intention is to give the user tha ability to change its data, so I'm writing the jquery ajax call to save data after user has clicked save button. Unfortunately, checking if I get correctly the field text I see I get correctly the name text but email is blank. Using these selectors I can correctly change for instance the border color of the selected input fields, so I know the selectors are ok.
This is the html
This is the piece of code to fill the input text fields
And this is the piece of code I'm using to test my selectors:
The alert reports
Marco Gasi = =
Any idea?
Thanks to all for any advice.
Cheers
After some hours of trials and errors I ask to you for a solution :(
Let's say I have a list of users: each item represents a user and has two buttons: edit and delete. If the user clicks on edit button, the li's height increases and reveals a form with three fields: name, email and password. The first two fields are filled with data from the database. The intention is to give the user tha ability to change its data, so I'm writing the jquery ajax call to save data after user has clicked save button. Unfortunately, checking if I get correctly the field text I see I get correctly the name text but email is blank. Using these selectors I can correctly change for instance the border color of the selected input fields, so I know the selectors are ok.
This is the html
<ul id="adminlist">
<li> username
<a class='btn delete' href='#'><img src='images/trash_icon.jpg' width='30' height='30' alt='Delete' /></a>
<a class='btn edit' href='#'><img src='images/edit.jpg' width='30' height='30' alt='Edit' /></a>
<div id='editProfile'>
<div class='formWrapper userDetails left'>
<form class='mine' method='post'>
<div>
<input type='text' class='edtUN' name='username' />
</div>
<div>
<input type='text' class='edtUE' name='email' />
</div>
<div>
<input type='password' class='edtUP' name='pwd' />
</div>
<div>
<input type='button' class='saveEdit userDetails' name='save' value='Salva' />
</div>
<div>
<input type='button' class='cancelEdit userDetails' name='cancel' value='Annulla' />
</div>
</form>
</div>
</div>
</li>
</ul>
This is the piece of code to fill the input text fields
$('ul#adminlist').on('click', 'a.edit', function(e)
{
e.preventDefault();
var el = $(this).parent();
var adminName = el.text();
if ($.trim(adminName) === loggedAdmin)
{
$.ajax(
{
type: 'post',
url: 'script_admin_editAdmin.php',
dataType: 'json',
data: 'name=' + adminName
})
.done(function(result)
{
var uname = result['username'];
var email = result['email'];
$('.edtUN').val($.trim(uname));
$('.edtUE').val($.trim(email));
el.animate({height: '+450px'}, 600);
})
.fail(function(result)
{
$('#msg').removeClass('success').addClass('failure').hide().html(result).fadeIn('slow').delay(2000).fadeOut('slow');
});
}
else
{
alert('Non puoi modificare i dati personali degli altri amministratori!');
}
});
And this is the piece of code I'm using to test my selectors:
$('.saveEdit').on('click', function()
{
// if I uncomment following three lines, the three inputs' borders become red
// $(this).parent().siblings().children(':text.edtUN').css('border', '2px solid red');
// $(this).parent().siblings().children(':text.edtUE').css('border', '2px solid red');
// $(this).parent().siblings().children(':password.edtUP').css('border', '2px solid red');
var newusername = $(this).parent().siblings().children(':text.edtUN').val();
var newemail = $(this).parent().siblings().children().children(':text.edtUE').val();
var newpwd = $(this).parent().siblings().children(':password.edtUP').val();
alert($.trim(newusername)+' = '+$.trim(newemail)+' = '+$.trim(newpwd));
});
The alert reports
Marco Gasi = =
Any idea?
Thanks to all for any advice.
Cheers
ASKER
button text? Not at all. I'm looking for the value of text input of a form...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oh wow... I do need more coffee this morning. I completely mis-read the question. Let me set up a Fiddle and I'll try it again. The .val() does look right for accessing a text input.
ASKER
Thanks, Cathal. Please, can you explain why my selector worked on edtUN and not on edtUE? I really don't understand (apart the evident more elegance of your selector)
Thanks to you too, WebDevEM.
Cheers
Thanks to you too, WebDevEM.
Cheers
You were doing a child of a child
var newemail = $(this).parent().siblings( ).children().children(':text.edtUE').val();
Usually in these scenarios I add a class to the form with an ID referencing the record, pop the ID in a data attribute of the button. Then you can just grab the ID and reference the FORM directly without searching for the inputs. Think it makes it look tidier.
var newemail = $(this).parent().siblings(
Usually in these scenarios I add a class to the form with an ID referencing the record, pop the ID in a data attribute of the button. Then you can just grab the ID and reference the FORM directly without searching for the inputs. Think it makes it look tidier.
ASKER
Forgive me, but please tell me if I'm right:
Given a form
<form method='post' class='SOMEID'>
I create button like this
<input type='button' data-button='SOMEID' />
Then with jquery
$('.mybutton).on('click', function(){
var id = $.parseJSON($(this).attr(' data-butto n'));
var email = $('form .'+id+' input.edtUE').val();
});
But if so I'm still looking for input... What exactly you meant?
Given a form
<form method='post' class='SOMEID'>
I create button like this
<input type='button' data-button='SOMEID' />
Then with jquery
$('.mybutton).on('click', function(){
var id = $.parseJSON($(this).attr('
var email = $('form .'+id+' input.edtUE').val();
});
But if so I'm still looking for input... What exactly you meant?
<form method='post' id='user-id'>
<input type='button' data-button='user-id' />
Obviously id will be a number inserted by your code.
As I said, it's just one way to keep the js cleaner
<input type='button' data-button='user-id' />
Obviously id will be a number inserted by your code.
$('.mybutton).on('click', function(){
var id = $(this).data('button');
var email = $(id + ' input.edtUE').val();
var password= $(id + ' input.edtUP').val();
...
});
As I said, it's just one way to keep the js cleaner
ASKER
Many, many thanks, Gary. So I was blind : I didn't see the double children!!!
Anyway, your code is better and the last one is better more (don't know if it's correct english but I hope you can understand what I mean.
Thanks again for all your precious help
Cheers
Anyway, your code is better and the last one is better more (don't know if it's correct english but I hope you can understand what I mean.
Thanks again for all your precious help
Cheers
I don't think .val() is what you're looking for in the case of a button's text. For jQuery 1.6+ try
Open in new window
or for versions lower than 1.6 it would beOpen in new window
https://api.jquery.com/att