jquery help!

Hello Experts,

I have the following markup below. I would like to use jquery to reposition the value "First Name" beside the actual value "John Doe" instead of how it's listed below in my example "Current".

Is this possible and if so how.

Current:
  First Name
  John Doe

Please change to:
  First Name: John Doe


Markup:
<form id="email" method="get" name="email">
  <input id="firstName" type="hidden" value="John Doe="firstName">
  <input id="emailFrom" type="hidden" value="john.doe@mysite.org" name="emailFrom">
<div class="formField">
  <label class="formlabel empty" for="empty">First Name</label>
<div class="formField">
  <label class="formlabel empty" for="empty">Email</label>
</form>


Thanks in advance!
LVL 4
asp_net2Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
If you are sure the html is not going to change you can just replace everything inside the parent div by doing this:

$(document).ready(function(){
    $('.formField').each(function(){
        $(this).html(
            '<b>First Name: </b>' + $('#firstName').val() +
            '</br>' +
            '<b>Email:</b> ' + $('#emailFrom').val()
        );
    });
 });
0
 
erikTsomikSystem Architect, CF programmer Commented:
please show your current jquery
0
 
asp_net2Author Commented:
I have tried the following below and no luck.

$('#email #firstName').hide('First Name');
$('#email #firstName label.formlabel empty').hide('First Name');

$('#email #firstName').remove('First Name');
$('#email #firstName label.formlabel empty').remove('First Name');
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
asp_net2Author Commented:
Note, the jquery I submitted above was me just trying to remove the word "First Name" I didn't get any further than that though.
0
 
asp_net2Author Commented:
Hi erikTsomik,

Are you able to assist? You asked for code and I supplied it.
0
 
Tom BeckCommented:
Will this work for you?

$(document).ready(function(){
    $('.empty').each(function(){
        switch($(this).text()){
            case "First Name":
                $(this).append(': ' + $('#firstName').val());
                break;
            case "Email":
                $(this).append(': ' + $('#emailFrom').val());                
        }
    });
 });
0
 
Tom BeckCommented:
Your value for the first hidden field is not valid.
 value="John Doe="firstName"
0
 
Lalit ChandraCommented:
I think your html form Syntax is incorrect,it should be

<form id="email" method="get" name="email">
  <input id="firstName" type="hidden" value="John Doe" name="firstName">
  <input id="emailFrom" type="hidden" value="john.doe@mysite.org" name="emailFrom">
<div class="formField">
  <label class="formlabel empty" for="empty">First Name</label>
<div class="formField">
  <label class="formlabel empty" for="empty">Email</label>
</form>



Now you can try this jquery ,and load the page

$(function() {
$.each($("label"),function() {
  console.log($(this).html());
   if( $(this).html() == "First Name")
    {
       $(this).html("First Name : " + $("#firstName").val());
    }
    else   //In case of Email
   {
        $(this).html("Email : " + $("#emailFrom").val());    
   }
});

});

Hope, this will resolve your issue.
0
 
Tom BeckCommented:
Also the div tags have no closing tags. Here's the html markup as I understand it.

<form id="email" method="get" name="email">
  <input id="firstName" type="hidden" value="John Doe">
  <input id="emailFrom" type="hidden" value="john.doe@mysite.org" name="emailFrom">
<div class="formField">
  <label class="formlabel empty" for="empty">First Name</label>
</div>
<div class="formField">
  <label class="formlabel empty" for="empty">Email</label>
</div>
</form>
0
 
asp_net2Author Commented:
@erikTsomik,

When I tried your solution I get the following results below. The first lines "First Name: John" and "Email: john.doe@mysite.org" are correct except for the fact that only First Name and Email should be bold.

As you can see it repeats the information below the correct lines. Can we remove that?

First Name: John
John

Email: john.doe@mysite.org
john.doe@mysite.org
0
 
Tom BeckCommented:
@erikTsomik did not provide a solution.
0
 
Tom BeckCommented:
Have you tried my solution with my corrected markup? It does not produce double entries.
0
 
asp_net2Author Commented:
@tommyBoy,

I appologize, your solution works as I mentioned in post 37748804. I got the names mixed up.
0
 
Tom BeckCommented:
This is what I get in Firefox with my code and with your markup with the corrections made.

First Name: John Doe
Email: john.doe@mysite.org

Did you correct the markup?
0
 
Tom BeckCommented:
My complete test page.
<html>
<head>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $('.empty').each(function(){
        switch($(this).text()){
            case "First Name":
                $(this).append(': ' + $('#firstName').val());
                break;
            case "Email":
                $(this).append(': ' + $('#emailFrom').val());                
        }
    });
 });
</script>
<style>
</style>
</head>
<body>
<form id="email" method="get" name="email">
  <input id="firstName" type="hidden" value="John Doe">
  <input id="emailFrom" type="hidden" value="john.doe@mysite.org" name="emailFrom">
<div class="formField">
  <label class="formlabel empty" for="empty">First Name</label>
</div>
<div class="formField">
  <label class="formlabel empty" for="empty">Email</label>
</div>
</form>
</body>
</html>

Open in new window

0
 
asp_net2Author Commented:
@tommyBoy,

I don't believe its the HTML. I copied from an .inc file. Perhaps I copied it wrong. I used Firebug to copy what I thought is what I needed. But that doesn't really explain why it's duplicating the information.
0
 
Tom BeckCommented:
I agree, it must be something else. When I use the markup provided in the question I still get this:
First Name: John Doe=
Email: john.doe@mysite.org

I don't get any duplication.

What else in the way of markup or script can you provide?

Try pasting in my jquery library include. Maybe yours is corrupt.
0
 
asp_net2Author Commented:
Ok, does this help. I looked at the markup again and I'm going to repost it.

<form id="email" method="get" name="email">
  <input id="firstName" type="hidden" value="John" name="firstName">
  <input id="emailFrom" type="hidden" value="john.doe@mysite.org" name="emailFrom">
<div class="formField">
  <label class="formlabel empty" for="empty">First Name: John</label>
<div class="formField">
  <label class="formlabel empty" for="empty">Email: john.doe@mysite.org</label>
<div class="forminput empty">
  <span class="staticvalue formReadonlyInput">john.doe@mysite.org</span>
</div>
</div>
</div>
</form>
0
 
asp_net2Author Commented:
I'm currently using the following jquery below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
0
 
asp_net2Author Commented:
I just added your jquery and I got the same results.
0
 
Tom BeckCommented:
That's the problem! You are nesting the Email label div inside the First Name div. Can you use the corrected markup I posted in ID: 37748596
0
 
asp_net2Author Commented:
No, unfortunetly I can only make jquery changes. I can't make changes to the actual HTML markup :(

I'm only able to see it if I use Firebug.
0
 
asp_net2Author Commented:
Is there a way that we can remove those labels using .hide() or .remove()?
0
 
Tom BeckCommented:
You could set them to display:none but I don't understand. Don't you what to display them with the values in the hidden fields?

You could do this to hide them:
$(document).ready(function(){
    $('.empty').css({'display' : 'none'});
});
0
 
asp_net2Author Commented:
Not sure, wouldn't the values in the hidden fields be untouched? I don't want to make changes to the values stored in the hidden fields. I only want to place First Name: and Email: next to the value. I don't want to modify the actual value being displayed.
0
 
Tom BeckCommented:
If you can only make jquery changes and are stuck with that markup, try this instead of my first solution:

$(document).ready(function(){
    $('.empty').each(function(){
        var label = $(this).text();
        if(label.indexOf("First Name") != -1){
                $(this).text('First Name: ' + $('#firstName').val());
        }else if(label.indexOf("Email") != -1){
                $(this).text('Email: ' + $('#emailFrom').val());                
        }
    });
    $('.staticvalue').css({'display' : 'none'});
 });
0
 
asp_net2Author Commented:
That worked tommyBoy, is there a way thought to only bold "First Name:" and "Email:" and not the values?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.