Un-Check checkbox in form if other checkbox is checked and vice versa

www.enflow.com/index.html

lines 589 - 618 Web form with 2 checkboxes
one with id “invalidCheck1” other with “invalidCheck2”

lines 726-736 bottom of page i have a JS Function to uncheck one checkbox if other is checked

but it does not check and uncheck / checkboxes

I must be doing something wrong that is very simple ?

heavy fatigue?

Hi there temp29,

why don’t you just dump the javascript altogether?

Use this HTML code instead…

<div class="form-check">
 <div class="container checkbox1">
  <div class="radio d-flex justify-content-center">
   <input class="form-check-input form_check_box" type="radio" name="rdo" value="human" id="invalidCheck1">
   <label class="form-check-label" for="invalidCheck1">I'm a human</label>
   </div>
  </div>
 </div>
 <div class="form-check">
  <div class="container checkbox2">
   <div class="radio d-flex justify-content-center">
    <input class="form-check-input form_check_box" type="radio" name="rdo" value="robot" id="invalidCheck2">
    <label class="form-check-label checkbox2_label" for="invalidCheck2">I'm a robot</label>
   </div>
  </div>
 </div>

coothead

2 Likes

Hi CoolHead… Good Point… then I would need to make this radio button group required with required messages for the onclick send message btn.

but I am trying to create my own captCha… (not a fan of Google) and as far as i know AI Web Bots can read CSS (if i use the radio buttons to create a required event) and then correctly fill in the form and send spam contact form messages by clicking send message.

But if i have JScript event then that only allows one one check box or the other to be checked so i was trying to go that way.

rolling your own captCha is a bit complex or convoluted.

Hi there temp29,

sorry, but I do not understand any of that. :wonky:
Nothing new there, I am old and becoming
a little dim witted. :nono:
I cannot see anything wrong with adding the
required attribute to the inputs.

I would humbly suggest that forms need to be
fully functional without javascript. :winky:

coothead

3 Likes

Hi there temp29,

Here is your form, as you wanted it,
without javascript of course. :rofl:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:300,400,700%7COpen+Sans:300,400,700,900%7CLato:900" media="screen">
<link rel="stylesheet" href="http://www.enflow.com/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://www.enflow.com/css/fonts.css" media="screen">
<link rel="stylesheet" href="http://www.enflow.com/css/style.css" media="screen">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" media="screen">

<style media="screen">
#invalidCheck1,
#invalidCheck2 {
	position: absolute;
	left: -999em;
 }
label[for="invalidCheck1"]::before,
label[for="invalidCheck2"]::before {
	display: inline-flex;
    justify-content: center; 
    align-items: center;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.5em;
	border: 1px solid #919191;
	border-radius: 0.3em;
	background-color: #fff;
    background-image: linear-gradient( to bottom, #fff, #ccc );
	vertical-align: middle;
	content: '';
 }
#invalidCheck1:checked + label[for="invalidCheck1"]::before,
#invalidCheck2:checked + label[for="invalidCheck2"]::before{
    content: '\02713';
}
</style>

</head>
<body>
<div class="container home_page_section"> 
<h2 class="contact_usTitle text-center mt-3">CONTACT US</h2>
<div class="container col-lg-9 mt-3 mb-3">
<form name="myForm" id="myForm" method="post" action="contact-form.php">   
<label for="name" class="col-form-label float-right mt-3">*All 4 fields are required</label>
<input type="text" name="name" value="" class="form-control mt-3" id="name" placeholder="Full Name" required>
<input type="email" name="email" value="" class="form-control mt-3" id="email" placeholder="Email" required>   
<textarea class="form-control mt-3" name="message" id="message" placeholder="Type your message" rows="7" required></textarea>
<div class="container checkboxes_container mt-3">
<p class="d-flex justify-content-center mt-3">*Please select one of these checkboxes</p>
<div class="row justify-content-md-center">

<div class="form-check">
 <div class="container checkbox1">
  <div class="radio d-flex justify-content-center">
   <input class="form-check-input form_check_box" type="radio" name="rdo" value="human" id="invalidCheck1" required>
   <label class="form-check-label" for="invalidCheck1">I'm a human</label>
   </div>
  </div>
 </div>
 <div class="form-check">
  <div class="container checkbox2">
   <div class="radio d-flex justify-content-center">
    <input class="form-check-input form_check_box" type="radio" name="rdo" value="robot" id="invalidCheck2" required>
    <label class="form-check-label checkbox2_label" for="invalidCheck2">I'm a robot</label>
   </div>
  </div>
 </div>

 </div>
</div>
<button type="submit" class="btn btn-primary float-right mt-3">Send Message</button>
</form>
</div>
</div>>

</body>
</html>

coothead

1 Like

Looks good… thank your for your excellent work and time… we had a working web form before i came to SitePoint but it is interesting to see the coding styles of others… We may consider using some of your work in our web form.

…so, are you now having second thoughts
about employing a javascript solution?

coothead

JScript ?

CoolHead… What would you do once a form is done and you are GETTING a lot of spam mail and you want to stop that…

Would you use a CaptCha ?

What would you do ?

I dunno about others, but this problem seems to already be solved by Google’s reCaptcha service.

Hi there temp29,

I cannot answer those questions as I’ve
no experience of spam email problems. :unhappy:

All I can say is that I wouldn’t have thought
that CSS could be the cause of them.

coothead

Paul… thanks for your comment…

but

AS you can read in my second post… I am not a fan of google and looking to NOT use google… for anything - Not Chrome, Gmail, Search, Captcha.

Google does NOT even come close to their Do No Evil motto. The data privacy breeches by Google are astounding and well publicized. The USA DOJ is finally looking into them and the EU has dinged them for major bucks over Google’s lack of ethics…

So that is why i was going to create my OWN Turing test using two checkboxes… and build a custom Captcha which would i think may require some JavaScript work.

okay, good to know… thanks again…

I recommend then finding someone else that has already solved the captcha problem. It’s not for nothing that we are warned against writing our own captcha unless we are an expert at computer vision.

There are plenty of other alternatives to google. You’ll find many of them in this article:

https://www.dtelepathy.com/blog/design/captcha-alternatives-better-ux

1 Like

good find… thanks Paul… Gave Hearts to ALL… you guys on SitePoint are GREAT… :o)

2 Likes

EXACTLY… But I am having fun TRYING to build my own custom captCha…

From what i have read the auto Web AI Bots that spam web forms CAN READ the CSS so they can see what is required in a form, from the CSS, or see what is not required and then the BOT can do what is necessary in filling out the form and then auto click the send button.

But… if you make a Turning test out of two check boxes (I Am Robot and I Am Human, etc etc – something like that and tie it to JScript event for validation which has to FIRE and is separate from the form) You kinda have to play with the Turing logic and test it out… then you have a very good chances of fooling the AI Bot.

then one might have a natural custom made own captcha… that is what i heading for…

always thank you for your time…

I sympathise with your Google disenchantment,
but notice that you are using their “Open Sans”
and “Alex Brush” fonts on your site. :rofl:

coothead

Yes…

I tried out their Script Font APIs but they did not resolve well so far and did NOT work on Opera browser… so those are latent refs and will be removed.

I ended up doing script TEXT work for my motto and such in an image format.

Agreed… It is hard to completely wash clean of Google’s tools.

Hi there temp29,

perhaps you will be able to find Google
alternatives here…

  1. alternative for Alex Brush font
  2. alternative for Open Sans font

coothead

1 Like

thanks CoolHead…

Hi there temp29,

although I tend to have a cool head in the
autumn and winter, it can be a warm head
in the spring and summer.:biggrin:

For all seasons, though, it is always as bald
as a coot
. :rofl:

coothead

2 Likes