Solved

Jquery val() rpoblem

Posted on 2014-02-27
9
390 Views
Last Modified: 2014-02-27
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
Comment
Question by:Marco Gasi
  • 4
  • 3
  • 2
9 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 39891985
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
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39891991
button text? Not at all. I'm looking for the value of text input of a form...
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39892005
...
		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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Expert Comment

by:WebDevEM
ID: 39892006
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
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 39892027
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
 
LVL 58

Expert Comment

by:Gary
ID: 39892043
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
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39892077
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
 
LVL 58

Expert Comment

by:Gary
ID: 39892101
<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
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39892243
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now