Jump to content

Resets checked value to default

Irresistable

By Irresistable
in Javascript Help

 Share

Recommended Posts

Irresistable Member

Irresistable

Posted
Posted

I have a form. It's still in testing, so don't correct the PHP or anything.

I have a javascript function called checkBoxState() what this is suppose to do, is get the checked box value, and if a user refreshed the page, the checkboxed origioanl value stays the same. Instead, it goes back to the default checked.

This worked earlier, until I enhanced it.

 

If you'd like to shorten down the form fields so that it does the same job, but doesn't look so big and messy, then feel free to do so it's your choice.

 

How can I fix what I am trying to do. Here is all the code for the whole page. (The javascript function is after <body> and the form is at the bottom above </body>

<?php 
session_start();
include ("../inc/config.php");
require_once('recaptchalib.php'); 
$publickey = "mykey";
$privatekey = "mykey";
$resp = null;
$error = null;
?>
<!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" />
<meta http-equiv="Content-Language" content="en-UK" >
<style type="text/css">
#hint, #hint1, #hint2, #hint3 {
    position: absolute;
    width: 220px;
margin-top:-1px;
margin-left:10px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
.hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}
</style>
<script type="text/javascript">
var remembervalues_days=1
var dyncookiename=encodeURI(window.location.pathname)

var recallinput=function(){
var cookienamevalue=rememberinput.getCookie(dyncookiename).split("##")
for (var i=0; i<cookienamevalue.length; i++){
var cookiename=cookienamevalue[i].split("#")[0]
var cookievalue=cookienamevalue[i].split("#")[1]
if (document.getElementById(cookiename)!=null && document.getElementById(cookiename).type=="text")
document.getElementById(cookiename).value=decodeURI(cookievalue)
}
}

var rememberinput=function(){
var rememberit=""
for (var i=0; i<arguments.length; i++){
if (document.getElementById(arguments[i]).type=="text" && document.getElementById(arguments[i]).value!="")
rememberit+=arguments[i]+"#"+encodeURI(document.getElementById(arguments[i]).value)+"##"
}
rememberinput.setCookie(dyncookiename, rememberit, remembervalues_days)
}

rememberinput.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}

rememberinput.setCookie=function(name, value, days){
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+";";
}

if (window.addEventListener)
window.addEventListener("load", recallinput, false)
else if (window.attachEvent)
window.attachEvent("onload", recallinput)
else if (document.getElementById)
window.onload=recallinput

</script>
</head>
  <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>
<?php
if(isset($_POST['submit'])){

if($_POST['member'] == 'yes'){
$regex = "^[_+a-z0-9-]+(\.[_+a-z0-9-]+)*"
    ."@[a-z0-9-]+(\.[a-z0-9-]{1,})*"
    ."\.([a-z]{2,}){1}$"; 
if(empty($_POST['forename']) || empty($_POST['surname'])){
	$error['name'] = '<span style="color:red;">*</span>';
}
if(empty($_POST['email'])){
	$error['email'] = '<span style="color:red;">*</span>';
}
if ( !eregi( $regex,($_POST['email']) ) ) {
	$error['email'] = '<span style="color:red;">*</span>';
}	
} elseif($_POST['member'] == 'no'){
if(empty($_POST['username'])){
	$error['username'] = '<span style="color:red;">*</span>';
}
elseif(($_POST['username'] == $_SESSION['s_username']) == false){
	$error['username'] = '<span style="color:red;">*</span>';
}
}

if(!$_POST['message'] || strlen($_POST['message'] = trim($_POST['message'])) == 0){
$error['message'] = '<span style="color:red;">*</span>';
    }
elseif(strlen($_POST['message']) < 10){
$error['message'] = '<span style="color:red;">*</span>';
}

        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);
if (!$resp->is_valid) { $error1 = $resp->error; }

if(!isset($error)){ 
   if(!isset($error1)){

if(isset($_POST['name'])){ $name = $_POST['forename'].''.$_POST['surname']; } else { $username = ucwords($_SESSION['s_username']); }
$query = mysql_query("SELECT * FROM Users WHERE Username = '$username' LIMIT 1") or trigger_error('Query failed: '. mysql_error());
$user = mysql_fetch_array($query);
$to = "admin@developers-community.com";
$subject = 'General Enquiry';
if(isset($_POST['name'])){ $name = $_POST['forename'].''.$_POST['surname'].' - Guest'; } 
else { $name = ucwords($_SESSION['s_username']); }
if(isset($_POST['email'])){ $email = $_POST['email']; } else { $email = $user['Email']; }
$message = $_POST['message'];
$header = "from: $name <$email>"; 
$body = "$message\n\n $name";

mail($to, $subject, $body, $header);
echo '<span style="color:red";>Your mail has been sent. You will recieve a reply within up to 48 hours. This may take longer on busy days.</span>';
      }
   }
}
?><table width="80%" border="0">
    <form action="" method="post" onSubmit="rememberinput('username', 'name', 'email')">
      <tr>
        <td width="19%">Are you a member?</td>
        <td width="46%">
          <label><input name="member" type="radio" value="yes" 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="no" 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><td width="35%"> </td>
      </tr><tr id="username_field" style="display:none">
      <td height="36">Username<?php echo $error['username'];?></td>
      <td><input type="text" name="username" id="username" 
      onclick="document.getElementById('hint').style.display = '';
      document.getElementById('hint1').style.display = 'none';
      document.getElementById('hint2').style.display = 'none';
      document.getElementById('hint3').style.display = 'none';"/></td>
      <td>
      <span id="hint" style="display:none">Your Username. Must be logged in.<span class="hint-pointer"> </span></span><br /></td>
      </tr>
      
      <tr id="name_field" style="display:none">
      <td height="37">Full Name<?php echo $error['name'];?></td>
      <td><input type="text" name="forename" id="name" value="forenames"
      onfocus="if(this.value=='forenames'){this.value='';}" 
      onblur="if(this.value==''){this.value='forenames';}" 
      onclick="document.getElementById('hint').style.display = 'none';
      document.getElementById('hint1').style.display = '';
      document.getElementById('hint2').style.display = 'none';
      document.getElementById('hint3').style.display = 'none';"/> 
      <input type="text" name="surname" id="surname" value="surname"
      onfocus="if(this.value=='surname'){this.value='';}" 
      onblur="if(this.value==''){this.value='surname';}"
      onclick="document.getElementById('hint').style.display = 'none';
      document.getElementById('hint1').style.display = '';
      document.getElementById('hint2').style.display = 'none';
      document.getElementById('hint3').style.display = 'none';"/></td>
      <td>
      <span id="hint1" style="display:none">Your Full Name.<span class="hint-pointer"> </span></span><br /></td>
      </tr>
      
      <tr id="email_field" style="display:none">
      <td height="34">Your Email Address<?php echo $error['email'];?></td>
      <td><input type="text" name="email" id="email" 
      onclick="document.getElementById('hint').style.display = 'none';
      document.getElementById('hint1').style.display = 'none';
      document.getElementById('hint2').style.display = '';
      document.getElementById('hint3').style.display = 'none';"/></td>
      <td><span id="hint2" style="display:none">Your Email Address.<span class="hint-pointer"> </span></span><br /></td>
      </tr>
      
      <tr>
      <td>Message<?php echo $error['message'];?></td>
      <td><textarea name="message" cols="60" rows="10" class="textBox" id="message"
      onclick="document.getElementById('hint').style.display = 'none';
      document.getElementById('hint1').style.display = 'none';
      document.getElementById('hint2').style.display = 'none';
      document.getElementById('hint3').style.display = '';"></textarea></td>
      <td><span id="hint3" style="display:none">Type the message you wish to display. Minimum 10 characters.<span class="hint-pointer"> </span></span><br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
      </tr>
      
      <tr>
      <td>Captcha</td>
      <td><?php echo recaptcha_get_html($publickey, $error1); ?></td>
      <td> </td>
      </tr>
      
      <tr>
      <td> </td>
      <td><input name="submit" type="submit" value="submit" /></td>
      <td> </td>
      </tr>
    </form>
    </table>
  </body>
</html>

Link to comment
Share on other sites
RichardRotterdam Member

RichardRotterdam

Posted
Posted

I took a look at your code to see what it does and I see what you're trying to do. I'm not going to touch it though it doesn't look that pleasant with all the embedded events and non indented code.

 

Here is something that might be able to help you on your way. Read the comments and either firebug or change the console.log to alert to see what happens.

Hope it helps

 

<style>
#myform legend{
    font-weight:bold;
}
#myform label{
    width:220px;
    display:block;
}
</style>
<script type="text/javascript">
// wait for the page to be loaded (look into domready if you can its better)
window.onload = function() {
    // get checkbox elements by name attribute
    var checkboxes = document.getElementsByName("actor");

    // add onclick even for the checkboxes
    for(var i = 0; i< checkboxes.length; i++){
        var checkbox = checkboxes[i];

        //used closure to return the index here otherwise it would just always return the highest number
        checkbox.onclick = (function(index){
            return function(){
                //shows the current element clicked into firebug console
                console.log(this);
                // returns the index of the checkbox
                console.log("checkbox clicked with index:"+ index);
                //show status
                console.log("the status of the checkbox is now: "+this.checked);
            }
        })(i);

    }
}
</script>
<form id="myform">
    <fieldset>
        <legend>Which shall thou honor into the hall of shame</legend>
        <label><input type="checkbox" name="actor" value="Mr-T" />Mr-T </label>
        <label><input type="checkbox" name="actor" value="Chuck Norris" />Chuck Norris</label>
        <label><input type="checkbox" name="actor" value="Lorenzo Lamas"/>Lorenzo Lamas</label>
        <label><input type="checkbox" name="actor" value="Bob Saget"/>Bob Saget</label>
        <label><input type="checkbox" name="actor" value="Will Smith"/>Will Smith</label>
        <label><input type="checkbox" name="actor" value="Ben Stiller"/>Ben Stiller</label>
    </fieldset>
</form>

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.

×
 Share
Go to topic listing
×
×
  • 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.