Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Simple Js Question

chop
 Share

Recommended Posts

chop Newbie

chop

Posted
Posted

This was working a few days ago (I swear) but something's gone amok. The first js statement works okay but I can't get the second one to select the second, of the two, radio buttons:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>


<form action="" method="post" id="editRegistration" name="editRegistration">


<div id="pmradios" style="display:block;">   

<p><b>I WANT TO GET PAID FOR MY SOLD ITEMS:</b>

<input type="radio" name="pay_method" checked= "checked" value="card" onclick="javascript:document.getElementById('pm').style.display='none';" /> <b>by card.</b>  

<input type="radio" name="pay_method" value="check" onclick="javascript:document.getElementById('pm').style.display='block';" /><b>by check (enter your  address).</b></p></div>
</div> 
</form>


<script language="javascript">

javascript:document.getElementById('pmradios').style.display='block';
javascript.document.editRegistration.pay_method[1].checked=true;

</script>


</body>
</html>

 

thank you,

chop

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

There's no element on your page called "pm":

 

document.getElementById('pm')

 

Change that and it should work. Actually, I have no clue how the first one even works at all. Maybe I'm missing something. Maybe try just using "this", and see what happens.

 

Also, you don't need the "javascript:" bit, but better yet, your JS should not be inline in the first place.

 

Edit: As a more general question, what are you trying to accomplish? If you're simply selecting radio buttons, HTML alone will suffice. I'm not sure why you need JS here.

Link to comment
Share on other sites
chop Newbie

chop

Posted
  • Author
Posted

I need js because this is a page where the user calls up their previously entered personal data from mysql and can then edit it. So, if someone has created a "business" account, the "business" radio would be selected in advance and the extra input fields that relate to a business account would become visible via the "block" or "none" showing or hiding the div.

 

Your including a "document.getElementById('pm')" (i forgot to include the ('pm') in this example) does work but the "javascript.document.editRegistration.pay_method[1].checked=true;" can work by naming the form "editRegistration" and the rb group name where the [1] index refers to the second button in the group. It worked at some point (unless I just dreamed that it did). However, putting an id="xxx" in the form's button makes it easier than using an index number.

 

I'm obviously not that familiar with js but needed to use just a little of it for this project in the way I have described. So, my js style is a little off for sure. I just need to get it working for a deadline even if it's not pretty. Then, I'd like to go back when I have more time and learn how to separate out the js like you say it should be (HartleySan). It doesn't seem odd to me though to mix in the js. That's probably because there's so much mixing php in with the html (as in Larry's books) that I see it as an accepted technique. But again that's probably because i don't know much about js which is different than php.

 

Firebug: (Stuart) I have Dreamweaver for my editing which is okay with the php. If I start having to use a whole lot of js, I'll consider getting a better editor.

 

thanks so much for your help.

Chop

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

chop, given that you have a deadline, I understand why you "just want it to work for now". That's fine. We can always talk JS coding principles at a later time.

 

The way you describe your system though, it seems like no JS is necessary. Since the user will have already selected the desired radio button in advance, you can use PHP to generate all the dynamic content you need, based off of that selected radio button. Now, if the radio button can be changed (and you need the form to adjust accordingly) after PHP has done it's job, then yes, you're right, you need at least JS (or possibly Ajax).

 

Anyway, it really depends on what you want to do, but I think the basic JS for getting what you want would be something like the following:

 

<!DOCTYPE html>

<html lang="en">

 <head>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <title>JS radio button test</title>

 </head>

 <body>

   <form method="#" action="#">

     <p><input type="radio" value="soccer">Soccer</p>

     <p><input type="radio" value="baseball">Baseball</p>

     <p><input type="radio" value="basketball">Basketball</p>

     <p><input type="radio" value="hockey">Hockey</p>

     <p><input type="radio" value="football">Football</p>

     <p><input type="radio" value="running">Running</p>

     <p><input type="radio" value="swimming">Swimming</p>

     <p><input type="radio" value="skiing">Skiing</p>

   </form>

   <script>

     var i,
         elemLen = document.forms[0].elements.length,
         alertChoice;

     for (i = 0; i < elemLen; i++) {

       document.forms[0].elements[i].onclick = alertChoice;

     }

     function alertChoice() {

       for (i = 0; i < elemLen; i++) {

         if (document.forms[0].elements[i] === this) {

           document.forms[0].elements[i].checked = true;

         } else {

           document.forms[0].elements[i].checked = false;

         }

       }

       alert(this.value);

     }

   </script>

 </body>

</html>

 

Hope that helps.

Link to comment
Share on other sites
chop Newbie

chop

Posted
  • Author
Posted

I think I do need the js because... scenario: A user that has a "business" account want to edit the information. The form's "personal" and "business" radio button set defaults to "personal" (90% of users are personal accts.) In addition, the form fields that relate to "business" are hidden by default. SO the js needs to check the "business" radio and set the business related fields to "block" from "none". There are other similar situations.

 

I appreciate the code, HartleySan, and will print it out and study it over a cup of coffee. I always enjoy learning new techniques, especially when I have the opportunity to actually use them for a project.

 

Jonathon: will get the firefox plugin.. why not?

 

Great to have this forum!

thanks,

Chop

Link to comment
Share on other sites
Stuart Newbie

Stuart

Posted
Posted

Use the Firefox version over Chrome's version it's a lot better. Also Safari comes built in (at least on Mac) with javascript debugging -> this has the advantage that it picks up JS errors that FF and Chrome don't but it's not as usable as Firefox's.

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

Yes, Firebug is the best JS debugger. I also like to always throw my JS into JS Lint when I'm done, but be warned that JS Lint is very harsh with your code.

 

Also, chop, I didn't mean to imply that you have to use my technique, if you don't want to. I simply was illustrating a way of doing things. If 90% of customers won't even change the radio button option, you might be best to skip JS for the most part and use only PHP to reload the form when "Business" is selected. Granted, it would require reloading the page, but it's simpler and almost all PHP.

 

Anyway, please ask if you have any additional questions.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...