Small and Easy Java Script-Checkboxes Problem

[franklembke]

Hello,

I'm new with JS an I have a problem I could not solve all the day.

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

<script type="text/javascript">
function testwithcheckboxes () {
if (document.Formular.option1.checked == true) {
document.Formular.myarray[option1a].checked;
}}
</script>

--- an the form is as follows ---

<form name="Formular" form action="pdf.php" method="post"
onsubmit="return chkFormular()">
<input type="checkbox" name="option1" value="Text1 "
onclick="testwithcheckboxes ();">Text1<br><blockquote>
<input type="checkbox" name="myarray[option1a]"
value="Text2">Text2<br>
</form>

I don't know what to do more and I really need your answers! Thanks a
lot
Frank

 

[Thomas 'PointedEars' Lahn]

I'm new with JS an I have a problem I could not solve all the day.

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

<script type="text/javascript">
function testwithcheckboxes () {
if (document.Formular.option1.checked == true) {

The referencing is proprietary, and `checked' is a boolean property.

if (document.forms["Formular"].elements["option1"].checked)
{

document.Formular.myarray[option1a].checked;

This does not do anything useful. First of all `myarray' and `option1a' are
undefined. It would need to be something along

document.forms["Formular"].elements["myarray[option1a]"].checked;

(See the FAQ: <http://jibbering.com/faq/#propertyAccess>) But that would
still don't do anything, it is merely a property access which result is
unused. If you wanted to uncheck a checkbox, you would need to *modify* the
property value:

document.forms["Formular"].elements["myarray[option1a]"].checked = false;

}}

Error-prone code style. Indent the content of your block statements and
align the braces.

</script>

--- an the form is as follows ---

<form name="Formular" form action="pdf.php" method="post"

^

onsubmit="return chkFormular()">
<input type="checkbox" name="option1" value="Text1 "
onclick="testwithcheckboxes ();">Text1<br><blockquote>

^^^^^^^^^^^^
That's completely invalid. Where is the end tag?

<input type="checkbox" name="myarray[option1a]"
value="Text2">Text2<br>
</form>

I don't know what to do more and I really need your answers!

You don't want checkboxes or need additional scripting at all:

<form action="pdf.php" method="post" onsubmit="return chkFormular()">
<label><input type="radio" name="myarray[]"
value="Text1">Text1</label><br>
<label><input type="radio" name="myarray[]"
value="Text2">Text2</label>

Thanks a lot

You are welcome. Now please read the FAQ <http://jibbering.com/faq/> and
the documentation referred therein.


PointedEars

 

[franklembke]

I'm new with JS an I have a problem I could not solve all the day.

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

<script type="text/javascript">
function testwithcheckboxes () {
  if (document.Formular.option1.checked == true) {

The referencing is proprietary, and `checked' is a boolean property.

  if (document.forms["Formular"].elements["option1"].checked)
  {

      document.Formular.myarray[option1a].checked;

This does not do anything useful.  First of all `myarray' and `option1a' are
undefined.  It would need to be something along

    document.forms["Formular"].elements["myarray[option1a]"].checked;

(See the FAQ: <http://jibbering.com/faq/#propertyAccess>)  But that would
still don't do anything, it is merely a property access which result is
unused.  If you wanted to uncheck a checkbox, you would need to *modify* the
property value:

  document.forms["Formular"].elements["myarray[option1a]"].checked = false;

  }}

Error-prone code style.  Indent the content of your block statements and
align the braces.

</script>

--- an the form is as follows ---

<form name="Formular" form action="pdf.php" method="post"

                        ^

onsubmit="return chkFormular()">
<input type="checkbox" name="option1" value="Text1 "
onclick="testwithcheckboxes ();">Text1<br><blockquote>

                                            ^^^^^^^^^^^^
That's completely invalid.  Where is the end tag?

 <input type="checkbox" name="myarray[option1a]"
value="Text2">Text2<br>
 </form>

I don't know what to do more and I really need your answers!

You don't want checkboxes or need additional scripting at all:

  <form action="pdf.php" method="post" onsubmit="return chkFormular()">
    <label><input type="radio" name="myarray[]"
                  value="Text1">Text1</label><br>
    <label><input type="radio" name="myarray[]"
                  value="Text2">Text2</label>

Thanks a lot

You are welcome.  Now please read the FAQ <http://jibbering.com/faq/> and
the documentation referred therein.

PointedEars

Thank You very much! Now I will study Your answer and hope it works.
Bye and thanks, Frank

 

[RobG]

(e-mail address removed) wrote: [...]

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

[...]
You don't want checkboxes or need additional scripting at all:

  <form action="pdf.php" method="post" onsubmit="return chkFormular()">
    <label><input type="radio" name="myarray[]"
                  value="Text1">Text1</label><br>
    <label><input type="radio" name="myarray[]"
                  value="Text2">Text2</label>
  </form>

A set of radio buttons won't do the job. The OP wants checking of the
second checkbox to be conditional, not mutually exclusive, so:

<form action="">
<div>
<input type="checkbox" name="chk1" value="foo">foo<br>
<input type="checkbox" name="chk2" value="bar" onclick="
if(!this.form.chk1.checked) this.checked = false;
">bar<br>
</div>
</form>

does the job literally, however if foo is checked, then bar, then foo
is unchecked, bar remains checked. That may not be what the OP
wanted, so:

<form action="">
<div>
<input type="checkbox" name="chk1" value="foo" onclick="
if(!this.checked) this.form.chk2.checked = false;
">foo<br>
<input type="checkbox" name="chk2" value="bar" onclick="
if(!this.form.chk1.checked) this.checked = false;
">bar<br>
</div>
</form>

fixes that.

Another way to do it would be to enable or disable the second checkbox
depending on whether the first checkbox is checked or not. If that
choice is made, the OP should disable the second checkbox by script to
ensure functionality isn't missing for scriptless browsers (and always
do validation on the server as well).

 

[franklembke]

(e-mail address removed) wrote: [...]

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

[...]
You don't want checkboxes or need additional scripting at all:

  <form action="pdf.php" method="post" onsubmit="return chkFormular()">
    <label><input type="radio" name="myarray[]"
                  value="Text1">Text1</label><br>
    <label><input type="radio" name="myarray[]"
                  value="Text2">Text2</label>
  </form>

A set of radio buttons won't do the job.  The OP wants checking of the
second checkbox to be conditional, not mutually exclusive, so:

<form action="">
 <div>
   <input type="checkbox" name="chk1" value="foo">foo<br>
   <input type="checkbox" name="chk2" value="bar" onclick="
     if(!this.form.chk1.checked) this.checked = false;
   ">bar<br>
 </div>
</form>

does the job literally, however if foo is checked, then bar, then foo
is unchecked, bar remains checked.  That may not be what the OP
wanted, so:

<form action="">
 <div>
   <input type="checkbox" name="chk1" value="foo" onclick="
     if(!this.checked) this.form.chk2.checked = false;
   ">foo<br>
   <input type="checkbox" name="chk2" value="bar" onclick="
     if(!this.form.chk1.checked) this.checked = false;
   ">bar<br>
 </div>
</form>

fixes that.

Another way to do it would be to enable or disable the second checkbox
depending on whether the first checkbox is checked or not.  If that
choice is made, the OP should disable the second checkbox by script to
ensure functionality isn't missing for scriptless browsers (and always
do validation on the server as well).

Thank you very much, Rob,

I used your script and it works!

And now a personal statement, I am new with PHP and JS, but indeed I
must say JS is not my pleasure, instead of PHP ;-)

Greetings from Germany,
Frank

 

[beegee]

And now a personal statement, I am new with PHP and JS, but indeed I
must say JS is not my pleasure, instead of PHP ;-)

Hang in there with both languages, really get to know them instead of
jumping to a library to make things "easier". My prediction is that
if you do that you will see that there is a cohesiveness in javascript
that you will find lacking in PHP. PHP often seems to me to be a
Frankenstein monster, a language stitched together from other
languages.

Bob

 

[Thomas 'PointedEars' Lahn]

(e-mail address removed) wrote: [...]

The problem: I only want that a checkbox is checked after the user has
clicked on another. My code:

[...]
You don't want checkboxes or need additional scripting at all:

<form action="pdf.php" method="post" onsubmit="return chkFormular()">
<label><input type="radio" name="myarray[]"
value="Text1">Text1</label><br>
<label><input type="radio" name="myarray[]"
value="Text2">Text2</label>
</form>

A set of radio buttons won't do the job. The OP wants checking of the
second checkbox to be conditional, not mutually exclusive, so:

Ah, yes. Sorry, I overlooked that.

<form action="">
<div>
<input type="checkbox" name="chk1" value="foo">foo<br>
<input type="checkbox" name="chk2" value="bar" onclick="
if(!this.form.chk1.checked) this.checked = false;

I would still recommend to use standards-compliant (but still
backwards-compatible) referencing, though:

if (!this.form.elements['chk1'].checked) this.checked = false;

The OP might also want to consider to simply prevent the default action of
the click event instead (untested):

if (!this.form.elements['chk1'].checked) return false;

">bar<br>

And don't forget the label element. Even better, provide it with an
`accesskey' and a `for' attribute and the checkbox with an `id' attribute to
make the form accessible. (In that case, the `label' element does not need
to enclose the control but only its caption.)

[...]
Another way to do it would be to enable or disable the second checkbox
depending on whether the first checkbox is checked or not. If that
choice is made, the OP should disable the second checkbox by script to
ensure functionality isn't missing for scriptless browsers (and always
do validation on the server as well).

Full ACK.


PointedEars