Jump to content

Radio Buttons onclick functions php


Irresistable

Recommended Posts

I hope I can explain this properly.

I have two radio buttons "Yes" and "No" id's are "Member_1" and "Member_0"

When Yes is checked, it should display a username field, else it shouldn't display the username field.

 

I have two pages, the page with the form and functions.php.

Here is part of the form (functions.php is included but not stated in this snippet)

    
      <tr>    
      <td width="73%">
          <label>
            <input name="member" type="radio" value="radio" id="member_0" checked>
            No</label>
          <label>
            <input type="radio" name="member" value="radio" id="member_1">
            Yes
          </label>
          </td>
      </tr>
      <?php contactusername(); ?>

 

Here is the function in functions.php

function contactusername() {
    if(member_1.checked == true) {
	echo '<tr><td>'.$error['usermame'].'Username</td><td><input type="text" name="textfield" id="textfield" /></td></tr>';
} else {};
return true;
}

 

What It should do.. if member_1 (yes) is checked, then to display the Username underneath the radio buttons.

This is possibly using onclick but i've not worked out how I'd do it.

 

This would probably be javascript and php with html. Wasn't quite sure where I'd put the topic.

Link to comment
Share on other sites

It's somewhat more simpler than that. If the Radial buttons are placed in a FORM element, with the method POST it will transfer the result to php.

if (isset($_POST['member_0']) || isset($_POST['member_1'])) {
     if (isset($_POST['member_0'])) { 
          echo "member_0 was selected"; //If this radio was selected
     } elseif (isset($_POST['member_1'])) { 
          echo "member_1 was selected"; //If the other one was
     }
}

 

You can put the POST into an array with your radios (id = "member[]") or whatnot as well.

 

If you're wanting it to update without refreshing the page, you must use AJAX (JS & PHP), JS sending the data to php to validate and retrieve the result.

Link to comment
Share on other sites

Yeah, it's more of an onchange/onclick result. Without clicking on submit, it does it automatically. Though I'd even simplify it down even more, and just.. leave "No" (member_0) without an onchange/onclick, whilst "Yes" (member_1) has it.

In PHP would the validate form be something like

"If member_1 == checked { if empty username{ERROR} }"

For short notes anyway. If not, what would it be? Same for the javascript.. what would I do.

I'm guessing it'd be "onclick" something, maybe onclick="<?php contactusername(); ?> though that'd bring up the username field inside the radio button I'd of thought.

Link to comment
Share on other sites

This is just an example..

<input type="checkbox" id="member_0" onclick="ajaxValidate(this)" /> // No 
<input type="checkbox" id="member_1" onclick="ajaxValidate(this)" /> // Yes

// javascript function //
function ajaxValidate(obj) {
if (obj.id == 'member_0') {
// clear the username value //
} else {
// do the ajax function back to PHP and return the username and put it in the appropriate place..
}
}

If you need help using ajax there is a good tutorial at http://www.tizag.com/ajaxTutorial/

Link to comment
Share on other sites

I understand. My echo to display the username field is:

echo '<tr><td>'.$error['usermame'].'Username</td><td><input type="text" name="textfield" id="textfield" /></td></tr>';

How would I turn that into javascript? or turn the function into a php function.

 

Thanks.

 

edit:

I turned the function into something like this

<script type="text/javascript">
function ajaxValidate(obj) {
if (obj.id == 'member_0') {} else { </script>
<?php $namefield = '<tr><td>'.$error['usermame'].'Username</td><td><input type="text" name="textfield" id="textfield" /></td></tr>'; ?>
<script type="text/javascript">
   }
}
</script>

 

Although, no matter if yes or no is selected it displays $namefield (i echo it where it's suppose to be)

Preview- http://www.developers-community.com/recaptcha/example-captcha.php

Link to comment
Share on other sites

Your echo statement can be used with the ajax. For example if they hit 'yes', you can send to your php script script.php?n=yes and then it can simply echo that line as normal, but echo in ajax, means that ajax will take that echo and place it into the result body (as you'll learn from an ajax tutorial..)

Link to comment
Share on other sites

Ok... I think I understand what you are doing...

You basically want a the checkboxes to turn on and off the username field then process it with PHP?

 

if Im right

this will be what your after..

// this is only an example..
<tr>   
      <td width="73%">
          
            <input name="member" type="radio" value="radio" id="member_0" checkedonclick="document.getElementById('username_field').style.display = 'none';">
            <label for="member_0">No</label>
            <input type="radio" name="member" value="radio" id="member_1" onclick="document.getElementById('username_field').style.display = '';">
           <label  for="member_1">Yes</label>
          </td>
      </tr>
<tr id="username_field" style="display:none">
<td><input type="text" name="user" id="user" /></td>
</tr>

 

Link to comment
Share on other sites

you can do a body onload function that will determine which box is selected and show the tr accordingly

<body onload="checkBoxState()">

// Javascript 
function checkBoxState() {
if (document.getElementById('member_0').checked == true) { document.getElementById('username_field').style.display = 'none';
} else {
document.getElementById('username_field').style.display = '';
}
}

Link to comment
Share on other sites

Buddski, I added in more fields, and now I have

  <body onload="checkBoxState()">
<script type="text/javascript">  
  function checkBoxState() {
if (document.getElementById('member_0').checked == true) { 
document.getElementById('username_field').style.display = 'none';
document.getElementById('name_field').style.display = '';
document.getElementById('email_field').style.display = '';
} else {
document.getElementById('username_field').style.display = '';
document.getElementById('name_field').style.display = 'none';
document.getElementById('email_field').style.display = 'none';
   }
}
</script>

 

Whilst the radio buttons look like..

        <td width="46%">
          <label><input name="member" type="radio" value="no" id="member_0" 
            onclick="document.getElementById('username_field').style.display = 'none'; 
            document.getElementById('email_field').style.display = '';
            document.getElementById('name_field').style.display = '';" checked>No</label>

          <label><input name="member" type="radio" value="yes" id="member_1" 
            onclick="document.getElementById('username_field').style.display = ''; 
            document.getElementById('email_field').style.display = 'none';
            document.getElementById('name_field').style.display = 'none';">Yes</label>
          </td>

 

It's a bit messy, however the function doesn't work anymore. When if I click "Yes" and I refresh the page, it should load up again as Yes. Instead, it loads up as No which is the default checked.

 

Can you help me out with this?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.