Skip navigation
Currently Being Moderated

Replacing Image insteading of Adding Image

Feb 17, 2014 12:48 PM

Tags: #jquery

I have a page with two Radio Buttons on it...When you click the MALE button a Male image comes up and when you click the FEMALE button a female image comes up... I would like to have the male image already there when the page loads and when you click a button the image changes to either male or female...

 

I tried adding

<div id=&quot;image&quot;><img src=&quot;maleHF.jpg&quot;></div>

which works but when you click a button a second additional picture comes up...

I just a beginner in Jquery...

 

 

Page:

http://vmt2014.businesscatalyst.com/Gender%20test.html

 

 

 

The Code:

 

<!DOCTYPE html>

<html>

<head>

<title>jQuery Mobile Web App</title>

<link href=&quot;http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/>

<script src=&quot;http://code.jquery.com/jquery-1.8.3.min.js&quot; type=&quot;text/javascript&quot;></script>

<script src=&quot;http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js&quot; type=&quot;text/javascript&quot;></script>

<div data-role=&quot;page&quot; id=&quot;page&quot;>

<div data-role=&quot;header&quot; data-theme=&quot;b&quot;>

<h1>VMT</h1>

 

</div>

<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>

<title></title>

<div data-role=&quot;content&quot; data-theme=&quot;a&quot;>

</script><script>

$(function(){

$('#image').hide();

$('#male').click(function(){

$(&quot;#male&quot;).attr('checked', true);

$(&quot;#female&quot;).attr('checked', false);

$('#image' ).html('<img src=&quot;MaleHF.jpg&quot;>');

$('#image').show();

});

$('#female').click(function(){

$(&quot;#female&quot;).attr('checked', true);

$(&quot;#male&quot;).attr('checked', false);

$('#image' ).html('<img src=&quot;FemaleHF.jpg&quot;>');

$('#image').show();

});

});

</script>

<div data-role=&quot;fieldcontain&quot;>

<fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;>

<form>

<div id=&quot;image&quot;></div>

</form>

<label>

<input name=&quot;male&quot; type=&quot;radio&quot; id=&quot;male&quot; value=&quot;male&quot; data-theme=&quot;b&quot;>

Male</label>

<label>

<input name=&quot;female&quot; type=&quot;radio&quot; id=&quot;female&quot; value=&quot;female&quot; data-theme=&quot;b&quot;>

Female</label>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Feb 17, 2014 1:12 PM   in reply to jst20

    You could add the checked attribute to the male radio button's html...

     

    <input name="male" type="radio" id="male" value="male" data-theme="b" checked="checked">

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 1:26 PM   in reply to jst20

    The code is badly formed. THere is no </head> and no <body>!

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 4:17 PM   in reply to jst20

    Review basic HTML5 document structure.

     

     

      <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>

    <body>
    Content of the document......
    </body>

    </html> 

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 4:40 PM   in reply to jst20

    Nope.  jQuery Mobile apps are an advanced project for experienced coders.  This is NOT good starter project.

     

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>VMT TEST</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
    </head>
    
    <body>
    <div data-role="page" id="page">
    <div data-role="header" data-theme="b">
    <!--end header--></div>
    
    <div data-role="content">
    
    <form>
    <label><input name="male" type="radio" id="male" value="male">
    Male</label>
    <label><input name="female" type="radio" id="female" value="female">
    Female</label>
    </form>
    
    <!--end content--></div>
    
    <!--end page--></div>
    
    <script>
    $(function(){
         $('#image').hide();
         $('#male').click(function(){
         $("#male").attr('checked', true);
         $("#female").attr('checked', false);
         $('#image' ).html('<img src="MaleHF.jpg">');
         $('#image').show();
         });
         $('#female').click(function(){
         $("#female").attr('checked', true);
         $("#male").attr('checked', false);
         $('#image' ).html('<img src="FemaleHF.jpg">');
         $('#image').show();
         });
    });
    </script>
    </body>
    </html>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2014 9:46 PM   in reply to jst20

    so no help with this?

    X-Cuse ME!!! 

     

    I just cleaned up your basic HTML which is malformed.

     

    Is there no "thank you" for this?

     

    N

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2014 5:49 AM   in reply to Nancy O.

    It doesn't make sense to trouble shoot code that is invalid. Fix your code first as Nancy has shown.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2014 6:34 AM   in reply to jst20

    Sorry, I've posted here and elsewhere and it seems that unless you are experienced no one really wants to bother...

     

    I really take issue with that comment, since most of the posts here are from users at about the same experience level as you. But that's a topic for a different thread. And I don't see how you could say that in light of the help that Nancy has given you.

     

    Let us know how the valid code works for you please.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2014 9:56 AM   in reply to jst20

    OK, I see what happened now.  Try this revised code.

     

     

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>VMT TEST</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
    </head>
    
    <body>
    <div data-role="page" id="page">
    
    <div data-role="header" data-theme="b">
    <h1>VMT TEST</h1>
    <!--end header--></div>
    
    <div data-role="fieldcontain">
    
    <form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    
    <div id="image">Default Image goes here</div>
    
    <label><input name="male" type="radio" id="male" value="male" data-theme="b">
      Male</label>
    
    <label><input name="female" type="radio" id="female" value="female" data-theme="b">
      Female</label>
    
    </fieldset>
    
    </form>
    <!--end content--></div>
    <!--end page--></div>
    
    <script>
    $(function(){
         $('#male').click(function(){
         $("#male").attr('checked', true);
         $("#female").attr('checked', false);
         $('#image' ).html('<img src="MaleHF.jpg">');
         $('#image').show();
         });
         $('#female').click(function(){
         $("#female").attr('checked', true);
         $("#male").attr('checked', false);
         $('#image' ).html('<img src="FemaleHF.jpg">');
         $('#image').show();
         });
    });
    </script>
    </body>
    </html>

     

     

    PS. Don't be too sensitive.  You learn from your mistakes as we all do.  I just think jQuery Mobile is too advanced for a first project because the code has to be very, very precise.  

     

    Use the W3C code validation tools to check your work during development. 

    http://validator.w3.org/

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points