We Keep Coding

Why isn't my form validation function working?

I'm new to this, so please bear with me. I'm trying to setup a simple form validation that connects to my email client (Drip). It's not sophisticated, like I said, I'm learning and want to do so from the ground up (which is why all the CSS and whatnot isn't in a separate file). This whole thing is a learning exercise.
The connection to my email client works fine, but the problem is the form submits even if all the fields are empty. I don't know if it's ignoring the script, or it's running and just not working, or...
I don't know. I'm missing something, but like I said, I'm learning, so I can't see it for love or money!
Is anyone able to point out what I've done wrong here? :-)
<script>
function validateForm() {
var x = document.forms["myForm"]["fields[first_name]"].value;
var y = document.forms["myForm"]["fields[email]"].value;
var z = document.forms["myForm"]["fields[phone]"].value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
</script>
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>

You can keep the name attributes as they are. The problem was within your document.forms[...] expression. It did not find the expected input elements. As these are given id attributes too it seemed an easy fix to use them as a way of identifying the elements by using document.getElementById(...):
function validateForm() {
var x = document.getElementById("drip-full-name").value;
var y = document.getElementById("drip-email").value;
var z = document.getElementById("drip-phone").value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>

Bind radiobutton with button Angular 2+

This code allows user to pick a color and save his configuration choise. My goal is to make visible only the circle buttons and hide radio-buttons (i've been tryed to stylize them but it's not possible as i read), It's there any way to use ngModel with a group of buttons instead of radiobuttons? My other question is: It's possible to make a button 'active' based on a variable state? Thanks in advance
this.colorOptions = ['#0068d8', '#51cbce', '#ffd000', '#d80041', '#d84400', '#179906', '#026366'];
setColor(event){
console.log(event.target)
this.userDetails.settings.colorButtons = event.target.value;
}
.color-picker{
width: 30px;
height: 30px;
margin: 6px;
border-radius: 25px;
outline: none;
color: transparent;
}
.color-picker:focus,
.color-picker:active{
box-shadow: 0 0 0 2pt black;
}
#color1{
background-color: #0068d8;
}
#color2{
background-color: #51cbce;
}
#color3{
background-color: #ffd000;
}
#color4{
background-color: #d80041;
}
#color5{
background-color: #d84400;
}
#color6{
background-color: #179906;
}
#color7{
background-color: #026366;
}
<div class="form-group">
<input type="button" class="color-picker" id="color1" value="#0068d8" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color2" value="#51cbce" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color3" value="#ffd000" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color4" value="#d80041" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color5" value="#d84400" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color6" value="#179906" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color7" value="#026366" (click)="setColor($event)" required>
</div>
<div class="custom-control custom-radio" *ngFor="let option of colorOptions">
<input id="{{option}}" type="radio" class="custom-control-input" [value]="option" name="colorButtons" #colorButtons="ngModel" [(ngModel)]="userDetails.settings.colorButtons" ngModel (change)="setColor($event)" >
<label class="custom-control-label" for="{{option}}">{{option}}</label>
</div>

highlight image when clicked on then check a radio button

You know those sites that have an image as a checkbox and which ever image is checked gets highlighted? I'm trying to do the same, but instead with a radio button and I can't seem to get it to work. Here's my code:
html
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>
css
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
JavaScript
jQuery(function ($) {
// init the state from the input
$(".image-radio").each(function () {
if ($(this).find('input[type="radio"]').first().attr("checked")) {
$(this).addClass('image-radio-checked');
}
else {
$(this).removeClass('image-radio-checked');
}
});
// sync the state to the input
$(".image-radio").on("click", function (e) {
if ($(this).hasClass('image-radio-checked')) {
$(this).removeClass('image-radio-checked');
$(this).find('input[type="radio"]').first().removeAttr("checked");
}
else {
$(this).addClass('image-radio-checked');
$(this).find('input[type="radio"]').first().attr("checked", "checked");
}
e.preventDefault();
});
});
jsfiddle: https://jsfiddle.net/dwc6gf4q/5/

Do you have to use the radio buttons? If not, just keep the state in the script like you already do. When you click an image change the state to active and check the other images for being active. If one is, set it to inactive.
Then, if you need the radio buttons, you can change their state with the same function.
EDIT: Fiddled a little: https://jsfiddle.net/dwc6gf4q/41/
As far as i understood, works like you wanted.
jQuery(function ($) {
// init the state from the input
// sync the state to the input
$(".image-radio").on("click", function (e) {
$(".image-radio-checked").each(function(i){
$(this).removeClass("image-radio-checked");
});
$(this).toggleClass("image-radio-checked");
e.preventDefault();
});
});
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
display:none;
}
.image-radio-checked {
border: 4px solid #f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option1" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option2" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<input type="radio" name="style" value="option3" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

It seems to be working to me. You had some js errors because you weren't adding jquery to the fiddle...try here: https://jsfiddle.net/dwc6gf4q/6/
added jquery to fiddle

We can also do this using CSS just need to put IMG code after the radio button.
.image-radio {
cursor:pointer;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid transparent;
outline:0;
}
.image-radio input[type="radio"] {
visibility:hidden;
}
.image-radio img {display:none;}
.image-radio input[type="radio"]:checked ~ img {display:block;}
.image-radio-checked {
border-color:#f58723;
}
input[type=radio] {
display:none;
}
.item-detail .item-price {
font-weight:bold;
color:#201E20;
padding-bottom:10px;
}
<div class="well">
<div class="row">
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
<div class="col-lg-4">
<label class="image-radio">
<input type="radio" name="style" value="option3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" />
<div class="item-detail">Trim & Cutt <div class="item-price">$55.00</div></div>
</label>
</div>
</div>
</div>

JQuery div.show() is resizing my fields

I have a hide div that when I click on a checkbox, that div shows. My problem is that when the div shows the height of input fields are too small.
My div:
<div id="payment" style="display: none;">
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Credit Card</label>
<div class="col-lg-2" id="sq-card-number"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">CVV</label>
<div class="col-lg-1" id="sq-cvv"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Expiration Date</label>
<div class="col-lg-1" id="sq-expiration-date"></div>
</div>
<div class="form-group">
<label class="col-lg-2 col-xs-offset-2">Postal Code</label>
<div class="col-lg-1" id="sq-postal-code"></div>
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="form-group">
<br />
<br />
<div class="col-xs-12 col-xs-offset-1">
<button id="applyApplication" name="applyApplication" type="button" onClick="submitApplication();" class="btn btn-success center-block" disabled>Submit Application</button>
<br />
<br />
</div>
</div>
</div>
The CSS for the input fields:
<style type="text/css">
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
}
.sq-input--focus {
outline-width: 5px;
outline-color: #70ACE9;
outline-offset: -1px;
outline-style: auto;
}
.sq-input--error {
outline-width: 5px;
outline-color: #FF9393;
outline-offset: 0px;
outline-style: auto;
}
</style>
And I control to display that div or not by JQuery:
$('#agree').change(function() {
if($(this).is(":checked")) {
$("#payment").show();
$("#payment").scrollTop($("#payment").prop("scrollHeight"));
} else{
$("#payment").hide();
}
});
Here is the div that there is my checkbox:
<div class="form-group">
<div class="col-xs-12 col-xs-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" /> Agree with the terms and conditions
</label>
</div>
<br />
<br />
</div>
</div>
Everything is working fine. When my checkbox is checked it display the div, but the input fields are with height very small. BTW, if I open the firebug, the input height adjust automatically. Does anyone know why?
Thanks

Try to fix the height in your css :
.sq-input {
border: 1px solid #CCCCCC;
margin-bottom: 10px;
padding: 1px;
height: 20px;
}
Here is a Fiddle exemple : https://jsfiddle.net/qboena51/

JavaScript Error for OnClick

Here is the HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!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 runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li id="contact-button"><a href="javascript:;" onmousedown="toggleSlide('quickcontact');">
<span>Contact</span></a> </li>
</ul>
<h3>
Contact US</h3>
<div id="contact-form" style="display: none; overflow: hidden; height: 300px;">
<form id='freeform' method="post" action="http://WebDev.com/">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<p>
Please enter these letters:
<br />
<img src="http://professional-painters.com/images/captchas/1297129344.1793.jpg" width="140"
height="30" style="border: 0;" alt=" " /><br />
<input tabindex="5" class="field" type="text" name="captcha" size="20" maxlength="20" /></p>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#nav-contact a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}

Ok, I this it would be smart of you to use jquery and do it yourself. It's not that hard at all and the JS code is very short and easy.
First, you need to style the contact form and the menu so it looks the same way as it does when the contact form is expanded. I'm guessing you can actually use the code you already have. But I understand your biggest problem is with the javascript code.
Make sure that the anchor tag has the id: id="contact_button" and that the form is wrapped within a div with the id="contact-form"
So the HTML needs to be something like:
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="/contact-form">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
...
</form>
</div>
Then, to make the contact form show, you need to put jquery on your html page somewhere and you need to place the following code within another .js file or within tags:
$(document).ready(function(){
/* make sure the contact form is hidden when the page loads: */
$('div#contact-form').hide();
$('a#contact-button').toggle(function(){
/* slides the contact form down and shows it */
$('div#contact-form').slideDown();
}, function () {
/* hides it again */
$('div#contact-form').slideUp();
}
}
That's it. As for the code to actually send the email using .net you can maybe follow this tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx

I've not tried this, so I'm not certain about it, but it's probably right:
sfHover is defined thusly:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
Take a close look at this line:
document.getElementById("nav")
It's looking for an element with an id of nav - in your "prototype HTML", you do not have an element with that id.
You don't appear to have any need for sfHover in your "prototype HTML", so you should just get rid of the entire function. If you do need it, you need to change nav into an id you actually have in your HTML (or change an id in your HTML to nav).