Solved

jquery - set value of hidden input field based on values of text fields

Posted on 2010-11-22
3
882 Views
Last Modified: 2012-06-21
I have three form fields: name, first name, and lastname. The name field is hidden and I'm trying to set the value to the firstname + lastname on keypress. I'm also trying to format it so that the characters are all lowercase and spaces are transformed into dashes.

So:

<input type="text" name="firstname" value="John John" />
<input type="text" name="lastname" value="Doe" />
<input type="hidden" name="name" value="john-john-doe" />

Open in new window


I've been trying to use the following code, but it's not working...

         
   $('input[name=field_firstname[0][value]]').keyup(function() {
                    var firstname = $('input[name=field_firstname[0][value]]').val();
                    var lastname = $('input[name=field_lastname[0][value]]').val();
                    $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
            });

            $('input[name=field_lastname[0][value]]').keyup(function() {
                    var firstname = $('input[name=field_firstname[0][value]]').val();
                    var lastname = $('input[name=field_lastname[0][value]]').val();
                    $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
            });

Open in new window

0
Comment
Question by:n00b0101
[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
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34190437
This should work:
$(document).ready(function(){
$('input[name=firstname]').keyup(function() {
                var firstname = $('input[name=firstname]').val();
                var lastname = $('input[name=lastname]').val();
                $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
        });

        $('input[name=lastname').keyup(function() {
                var firstname = $('input[name=firstname').val();
                var lastname = $('input[name=lastname').val();
                $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
        });
});

Open in new window

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34190470
Sorry, slight correction:
$(document).ready(function(){
$('input[name=firstname]').keyup(function() {
                var firstname = $('input[name=firstname]').val();
                var lastname = $('input[name=lastname]').val();
                $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
        });

        $('input[name=lastname]').keyup(function() {
                var firstname = $('input[name=firstname]').val();
                var lastname = $('input[name=lastname]').val();
                $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
        });
});

Open in new window

0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34190477
Hi,
It might be better to use .blur() instead of .keyup, then you are running your code a lot less, and blur will get called whenever that field loses the focus...

plus unless for some reason you can't do it, it would be good to give your input boxes an id and use that to find them. I believe id is technically a required attribute anyway.
<script type="text/javascript">
	$(document).ready(function() {
		$('#firstname,#lastname').blur(function() {
			frst = $('#firstname').val().toLowerCase().replace(/ /g,'-');
			lst = $('#lastname').val().toLowerCase().replace(/ /g,'-');
			$('#name').val(frst + "-" + lst);
			alert($('#name').val());
		});
	});
</script>

Open in new window

0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 64
Anyone familiar with PhotoSwipe? 3 21
Glitching Slide Show 19 28
15 puzzle in Javascript/html 2 45
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

696 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