Jquery val() rpoblem

Marco Gasi
Marco Gasi used Ask the Experts™
on
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
<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>

Open in new window


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!');
		}
	});

Open in new window


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));
	});

Open in new window


The alert reports

       Marco Gasi = =  

Any idea?
Thanks to all for any advice.
Cheers
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Hi,

I don't think .val() is what you're looking for in the case of a button's text.  For jQuery 1.6+ try
$('.edtUN').attr('value',$.trim(uname));

Open in new window

or for versions lower than 1.6 it would be
$('.edtUN').prop('value',$.trim(uname));

Open in new window


https://api.jquery.com/attr/
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
button text? Not at all. I'm looking for the value of text input of a form...
Expert of the Year 2014
Top Expert 2014
Commented:
...
		var newusername = $(this).closest("form").find('.edtUN').val();
		var newemail = $(this).closest("form").find('.edtUE').val();
		var newpwd = $(this).closest("form").find('.edtUP').val();
		alert($.trim(newusername)+' = '+$.trim(newemail)+' = '+$.trim(newpwd));
	});

Open in new window


http://jsfiddle.net/4gYGx/
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
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.
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
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
Expert of the Year 2014
Top Expert 2014

Commented:
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.
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
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-button'));
  var email = $('form .'+id+' input.edtUE').val();
});

But if so I'm still looking for input... What exactly you meant?
Expert of the Year 2014
Top Expert 2014

Commented:
<form method='post' id='user-id'>
<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();
	...
});

Open in new window


As I said, it's just one way to keep the js cleaner
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial