?
Solved

How to retain the Check Box checked status in javascript

Posted on 2012-09-20
8
Medium Priority
?
545 Views
Last Modified: 2012-09-22
This is PURELY HTML/Javascript question. All client side.

I have this form with a Check Box and a TextBox. I check the checkbox and have written a javascript function to validate the textbox. If  the  textbox input is blank javascript put a alert(). But my 'Checked' check box goes back to unchecked. How to retain the checked status?
0
Comment
Question by:prain
  • 3
  • 3
  • 2
8 Comments
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38420216
Hello,

It could be a few things, invalid ID, duplicate ID, missing return, etc.  Can you post your code, or atleast the key parts of it?
0
 

Author Comment

by:prain
ID: 38422322
In this example,
1. Check the CheckBox
2. Enter some special characters such as **%%% into the Text Box. Click Continue.
3. You will see the error message pops up, which is correct. Click the 'OK' button on the
    message Box. You will notice the CheckBox that was checked unchecks after the
    refresh. I want the checkbox to retain the check after the MessageBox go away.


<!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>
    <title></title>
    <style type="text/css">
    .textbox
    {
        border: 1px solid black;
            font-family: helvetica, arial, sans serif;
            padding-left: 0px;
width: 250px;
            height: 23px;
        }
    </style>
    <script type="text/javascript">
        function processInputBoxes() {
            var inputSignature = document.getElementById("txtSigned").value;
            if (inputSignature == null || inputSignature.toString().length <= 0) {
                alert("A valid signature must be entered!");
            }
            else {
                validateSignature(inputSignature);
            }
        }

        function validateSignature(candidateSignature) {
            var signature = candidateSignature;
            for (var j = 0; j < signature.length; j++) {
                var alphaa = signature.charAt(j);
                var hh = signature.charCodeAt(j);

                if ((hh == 32) || (hh == 46) || (hh > 64 && hh < 91) || (hh > 96 && hh < 123)) {
                }
                else {
                    alert("Only alpha characters, period(.) and space are allowed for the signatue.");
                    return false;
                }
            }
            alert("Thank you!");
            return true;
        }

    </script>
</head>

<body>
    <form id="form1">
<span style="font-size:11.0pt;font-family:Calibri;color:#993333;">
I Agree <input type="checkbox" id="iAgree1" value="iAgree1" />
</span>

 <span style="font-size:11.0pt;font-family:Calibri;color:#993333;">
<input type="text" class="textbox" id="txtSigned" />
</span>

<div>
<button name="btnContinue" style="background-color: #3399FF;width: 96px; color: #FFFFFF;" onclick="processInputBoxes()">Continue</button>    
     </div>

</body>
</html>
0
 
LVL 58

Accepted Solution

by:
Gary earned 600 total points
ID: 38422447
Change your onclick to
onclick="return (processInputBoxes())"

And add to your js after the alert
return false
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:prain
ID: 38422625
Ok Thanks. It works. But what is the technical reson behind this?

Actually to shorten your suggession, this also works...

onclick="processInputBoxes(); return false"

I just cannot comprehend what the return false do on the client side to preserve the previous state. Does the refresh do not happen?
0
 
LVL 58

Expert Comment

by:Gary
ID: 38422664
It stops the submit action happening. Your previous problem was as soon as the alert was displayed then the form was being submitted ergo cleared checkbox.

return false in the actual submit will stop it happening completely - it should be in your js function else the form can never be sumitted.
0
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38422917
A thought occurs, if return false is defined within the onclick event, then it would do so even if it validated correctly.  Shouldn't the return false be within the processInputBoxes() function itself right after the alert line?

That is always the way I did it.  In the function itself I would have:
alert(""); return false;

Open in new window

Then in the html code:
onclick="return (processInputBoxes());"

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 38423318
I already said that
0
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38423947
Sorry Gary, I realized that now after re-reading your previous post.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses
Course of the Month17 days, 12 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question