Radio Buttons onclick functions php

[Irresistable]

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.

[oni-kun]

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.

[Irresistable]

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.

[Buddski]

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/

[Irresistable]

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

[Buddski]

I dont understand what you are trying to achieve there..

It looks to me like you are already displaying the username value..

[oni-kun]

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..)

[Irresistable]

Buddski "'<tr><td>'.$error['usermame'].'Username</td>" is the error. eg: If they haven't entered a username.

$error['username'] is defined in php.

[Buddski]

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>

 

[Irresistable]

Works great. Just what I was looking for. However.. if lets say.. it's checked as Yes. Username box comes up. If I refresh, the box will still be checked but the username box disappears until I reclick it. How can I stop this?

[Buddski]

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 = '';
}
}

[Irresistable]

Perfect. Thank you.

[Irresistable]

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?