Solved

Jquery val() rpoblem

Posted on 2014-02-27
9
387 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 30

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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 30

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 30

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 30

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

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JavaScript error 1 33
Phone Dialer 5 36
PHP string issue 5 17
Jquery autocomplete 10 27
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

17 Experts available now in Live!

Get 1:1 Help Now