Solved

jquery help!

Posted on 2012-03-21
27
184 Views
Last Modified: 2012-04-05
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!
0
Comment
Question by:asp_net2
[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
  • 13
  • 12
  • +1
27 Comments
 
LVL 19

Expert Comment

by:erikTsomik
ID: 37747879
please show your current jquery
0
 
LVL 4

Author Comment

by:asp_net2
ID: 37747938
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37747946
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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 4

Author Comment

by:asp_net2
ID: 37748399
Hi erikTsomik,

Are you able to assist? You asked for code and I supplied it.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748518
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748544
Your value for the first hidden field is not valid.
 value="John Doe="firstName"
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37748581
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748596
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37748804
@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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748819
@erikTsomik did not provide a solution.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748829
Have you tried my solution with my corrected markup? It does not produce double entries.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 37748844
@tommyBoy,

I appologize, your solution works as I mentioned in post 37748804. I got the names mixed up.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748865
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748902
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37748954
@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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37748987
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749013
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749016
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749028
I just added your jquery and I got the same results.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37749033
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749046
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749051
Is there a way that we can remove those labels using .hide() or .remove()?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37749077
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749100
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37749120
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
 
LVL 4

Author Comment

by:asp_net2
ID: 37749158
That worked tommyBoy, is there a way thought to only bold "First Name:" and "Email:" and not the values?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37749445
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

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

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 size popup in jquery mobile 4 63
object method as an event handler 8 77
Pass a js value to an html form 5 43
Check for Numeric Phone Field 14 48
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

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