Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

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
<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
0
Marco Gasi
Asked:
Marco Gasi
  • 4
  • 3
  • 2
1 Solution
 
WebDevEMCommented:
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/
0
 
Marco GasiFreelancerAuthor Commented:
button text? Not at all. I'm looking for the value of text input of a form...
0
 
GaryCommented:
...
		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/
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
WebDevEMCommented:
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.
0
 
Marco GasiFreelancerAuthor 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
0
 
GaryCommented:
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.
0
 
Marco GasiFreelancerAuthor 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?
0
 
GaryCommented:
<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
0
 
Marco GasiFreelancerAuthor 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
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now