Solved

Jquery val() rpoblem

Posted on 2014-02-27
9
394 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to close my php post page. 3 42
Conformation code 4 37
How does this modal gets closed? 6 42
Natural height and jquery 6 41
This article discusses how to create an extensible mechanism for linked drop downs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 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