We Keep Coding

Toggle Button doesn't seem to be working?

Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.
Any tips on this?
<div class="form-wrapper">
<form action="#">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div class="car-info" id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
</div>
$(document).ready(function() {
$('#booking-button').on('click', () =>
{ $('#btn').toggle(); });
});

Now the form appears when user clicks Click Here to Book, while this button disappears.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-wrapper">
<form action="#" id="car-info" style="display: none;">
<label for="name">Name*</label>
<input placeholder="Your Name" class="full" type="text"id="name">
<br>
<label for="email">Email</label>
<input placeholder="Your Email" class="full" type="text"id="name">
<br>
<label for="hire-start-date">Hire Start Date</label>
<input type="date" id="depart">
<br>
<label for="hire-end-date">Hire End Date</label>
<input type="date" id="depart">
<br>
<button class="book-now">Book Now</button>
</form>
</div>
<div id="btn">
<button id="booking-button">Click Here to Book</button>
</div>
<script>
$(document).ready(function() {
$('#booking-button').on('click', () => {
$('#car-info').toggle();
$('#btn').toggle();
});
});
</script>

Form is not submitting due to JavaScript validation

I have created a HTML form, but my form entries are not submitting due to my JavaScript form validation. Here is my HTML and JavaScript:
jQuery("#template-jobform").validate({
submitHandler: function(form) {
jQuery('.form-process').fadeIn();
jQuery(form).ajaxSubmit({
success: function() {
/*jQuery('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));*/
//target: '#job-form-result',
if (data.indexOf("ocation:") > 0) {
window.location = data.replace("Location:", "");
} else {
$('#job-form-result').html(data)
$('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="include/jobs.php" id="template-jobform" name="template-jobform" method="post" role="form">
<div class="form-process"></div>
<div class="col_half">
<label for="template-jobform-fname">First Name <small>*</small>
</label>
<input type="text" id="template-jobform-fname" name="template-jobform-fname" value="" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-lname">Last Name <small>*</small>
</label>
<input type="text" id="template-jobform-lname" name="template-jobform-lname" value="" class="sm-form-control required" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-jobform-email">Email <small>*</small>
</label>
<input type="email" id="template-jobform-email" name="template-jobform-email" value="" class="required email sm-form-control" />
</div>
<div class="col_half">
<label for="template-jobform-age">Age <small>*</small>
</label>
<input type="text" name="template-jobform-age" id="template-jobform-age" value="" size="22" tabindex="4" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-city">City <small>*</small>
</label>
<input type="text" name="template-jobform-city" id="template-jobform-city" value="" size="22" tabindex="5" class="sm-form-control required" />
</div>
<div class="col_full">
<label for="template-jobform-application">Application <small>*</small>
</label>
<textarea name="template-jobform-application" id="template-jobform-application" rows="6" tabindex="11" class="sm-form-control required"></textarea>
</div>
<div class="col_full">
<button class="button button-3d button-large btn-block nomargin" name="template-jobform-apply" type="submit" value="apply">Send Application</button>
</div>
</form>
The page loads indefinitely after clicking on the "send application" button due to this script.

Submit Button validation not happening in JS. Undefined formGroupExampleInput

I am trying to display two alerts in a simple form. One, if any field is empty other on successful submission. This is a simple form for learning purpose.
It is now showing error that 'Undefined formGroupExampleInput'
Please Help so that the validation can be done.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome to MAC Library!!</h1>
<h2>Registration Page</h2>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GROUP 4</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>My Account</li>
<li>Register</li>
</ul>
</div>
</nav>
</br>
</br>
<h3 class="myh3">Sign up as new user to receive email updates about upcoming events in the city</h3>
<script type="text/javascript">
function submitForm()
{
if(document.form1.formGroupExampleInput.value==""||
document.form1.formGroupExampleInput2.value==""||
document.form1.exampleInputEmail1.value==""||
document.form1.exampleInputPassword1.value==""){
alert("Enter all fields");
}
else{
document.forms["form1"].submit();
alert("Your Form Successfully Submitted");
}
}
</script>
<div>
<form id="form1">
document.form1.formGroupExampleInput.value
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput">First Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput" placeholder="Enter your first name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput2">Last Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput2" placeholder="Enter your last name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputEmail1">Email address</label>
<input type="email" required="required" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputPassword1">Password</label>
<input type="password" required="required" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</fieldset>
<fieldset class="form-group">
<label>Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
</fieldset>
<button type="button" class="btn btn-primary" onclick="submitForm();">Submit</button>
</form>`enter code here`
</div>
</body>
</html>

Access CSS file within a javascript file

I have a User form which contains first name, last name, password and confirm password fields. Now i have added a validation for password and confirm password to check if both are same. I had javascript file as
$(document).ready(function() {
$("#addUser").click(function() {
var password = document.getElementById('password');
var confirmPassword = document.getElementById('confirmPassword');
var message = document.getElementById('confirmMessage');
var matchingColor = "#008000";
var nonMatchingColor = "#ff6666";
if (password.value == confirmPassword.value) {
confirmPassword.style.backgroundColor = matchingColor;
message.style.color = matchingColor;
message.innerHTML = "Passwords Match!"
} else {
confirmPassword.style.backgroundColor = nonMatchingColor;
message.style.color = nonMatchingColor;
message.innerHTML = "Passwords Do Not Match!"
}
})
});
Now i have to eliminate the css properties from the javascript file. I was asked to do something like
$('#classYouWantToChange').addClass('passwordMatch').removeClass('passwordDoNotMatch')
I am not sure how this works. Can anyone help with this. Thanks in advance.
This is the jsp file
<div class="form-horizontal" role="form" id="AddUser">
<form action="adminAddUserForm" method="post">
<fieldset>
<legend>
<fmt:message key="ManageUsers.ADD_USER" />
</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="firstName"><fmt:message
key="addUser.FIRSTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="firstName" class="form-control"
name="firstName" required aria-required="true" placeholder="Jon"
title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" />
maxlength="30" pattern="[a-zA-Z]+" />
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="lastName"><fmt:message
key="addUser.LASTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="lastName" class="form-control"
name="lastName" required aria-required="true" placeholder="Doe"
title=<fmt:message key="addUser.LASTNAME_LABEL" />
maxlength="30" pattern="[a-zA-Z]+">
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="userName"><fmt:message
key="addUser.USERNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="userName" class="form-control"
name="userName" required aria-required="true" placeholder="John_Doe"
title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" />
pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" >
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="password"><fmt:message
key="addUser.PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control"
title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" />
required aria-required="true" pattern="(?=.\d)(?=.[A-Z]).{6,}" >
</div>
</div>
<%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5>
</div> --%>
</br>
<div class="form-group">
<label for="confirmPassword" class="control-label col-sm-2"><fmt:message
key="addUser.CONFIRM_PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
</div>
<div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5>
</div>
<c:choose>
<c:when test="${empty signFilter }">
<div class="form-group">
<label class="control-label col-sm-2" for="role"><fmt:message
key="addUser.ROLE_LABEL" /></label>
<input type="radio" id="role" name="userRole" value="ROLE_USER"
checked="checked" /> <fmt:message key="addUser.ROLE_USER" />
<input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" />
<fmt:message key="addUser.ROLE_INSTRUCTOR" />
<input type="radio" id="role" name="userRole" value="ROLE_ADMIN" />
<fmt:message key="addUser.ROLE_ADMIN" />
</div>
</c:when>
<c:otherwise>
<input type="hidden" name="userRole" value="ROLE_USER">
</c:otherwise>
</c:choose>
<br />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="addUser">
<input type="submit" class= "btn btn-info" name="submitBtn" value="Add User">
</div>
</div>

You can use the above methods like following:
//On event trigger:
//Do validations
//If passwords match, then do this -
$('#idYouWantToModify').addClass('passwordMatch')
//If passwords do not match, then do this -
$('#idYouWantToModify').addClass('passwordDoNotMatch')
//You can remove the classes later if you have any additional steps that want you to do so, by doing the following:
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove')
You can read more about .addClass() and .removeClass()

To make things simpler, you could just use jquery toggle class like so
//If passwords match, then do this -
$('#idYouWantToModify').toggleClass('passwordMatch')
adds class if its not there and removes it if its there
learn more here toggleclass

radio button selection using javascript?

I need help for i had develop the radio buttons one is cheque and anothewr one is online- transfer when ever user click cheque it displays one form and if user click online-transfer it display another form using java script ok it is working but click one radio button after refresh the browser no form can be displayed.Here is below attached my code please verify and suggest me.
html code:
<html>
<head>
<script text="text/javascript">
function optionChanged()
{
var a=document.withdrawform;
if(a.withdraw_by[0].checked)
{
a.reset();a.withdraw_by[0].checked=true;
document.getElementById("cheque_msg").style.visibility="visible";
document.getElementById("cheque_msg").style.display="block";
document.getElementById("accountInfo").style.visibility="hidden";
document.getElementById("accountInfo").style.display="none";
}
else
{
a.reset();a.withdraw_by[1].checked=true;
document.getElementById("accountInfo").style.visibility="visible";
document.getElementById("accountInfo").style.display="block";
document.getElementById("cheque_msg").style.visibility="hidden";
document.getElementById("cheque_msg").style.display="none";
}
}
</script>
</head>
<body>
<!--<a target="popup" onclick="window.open('https://www.facebook.com/','name','width=600,height=400')">Open page in new window</a>-->
<div class="main_content">
<p class="ca_head">Withdraw Cash</p>
<ul class="step_bar">
<li>1. Give your information</li>
<li class="active">2. Select Withdraw Option</li>
</ul>
<form id="withdrawform" name="withdrawform" method="post" action="withdraw-confirmation.html" onsubmit="clearErrors();">
<input type="hidden" name="bankAccount" id="bankAccount" value="0"/>
<input type="hidden" name="monthlyWithdraw" id="monthlyWithdraw" value="0"/>
<input type="hidden" name="withdrawableBalance" id="withdrawableBalance" value="0.37"/>
<input type="hidden" id="ecsCharge" value="0"/>
<input type="hidden" id="chequeCharge" value="0"/>
<input type="hidden" id="freeWithdrawCount" value="0"/>
<input type="hidden" id="withdrawError" value=""/>
<input type="hidden" name="ifsc" id="ifsc" value="N"/>
<div class="content_area">
<h3 class="sub_head">Submit your withdraw request for processing</h3>
<div class="form_row">
<label>Your Withdrawable Balance <strong>:</strong></label>
<strong><span class="rupeefont">r </span> 0.37</strong>
</div>
<div class="form_row">
<label for="new_mobile">Withdraw by <strong>:</strong></label>
<div class="flt_lt wid_256" id="withdraw_options">
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Cheque" /> Cheque
</label>
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Online Transfer"/> Online Transfer
</label>
</div>
</div>
<div id="cheque_msg" style="display:none;visibility:hidden"><span><p style="color:RED" align="justify">Please Note that Withdrawal by cheque would take upto 12 working days. Online Transfer is a much faster
option.Also, cheque would be dispatched to your regsitered mailing address.Submit your withdrawal request only if the address below is valid.If you wish to
update your address,please write to fairplay#RummyNo1.com along with your address proof.
</p>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
</div>
<div id="accountInfo" style="display: none;">
<div class="form_row" style="position:relative;">
<div class="form_row">
<label for="accountNumber">Account number <strong>:</strong></label>
<input type="text" maxlength="45" name="accountNumber" id="accountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="reAccountNumber">Re enter account number <strong>:</strong></label>
<input type="text" maxlength="45" name="reAccountNumber" id="reAccountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="micr">MICR Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong> :</strong></label>
<input type="text" maxlength="9" name="micr" id="micr" class="flt_lt" style="width:138px;" />
</div>
<div class="form_row">
<label for="reMicr">Re enter MICR code <strong>:</strong></label>
<input type="text" maxlength="9" name="reMicr" id="reMicr" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="ifsc_code">IFSC Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong>:</strong></label>
<input type="text" maxlength="11" name="ifsc_code" id="ifsc_code" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumericsForIfsc(event)" />
</div>
<div class="form_row">
<label for="bank_name">Bank Name <strong>:</strong></label>
<input type="text" maxlength="30" name="bank_name" id="bank_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
<div class="form_row">
<label for="branch_name">Branch Name <strong>:</strong></label>
<input type="text" maxlength="30" name="branch_name" id="branch_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
</div>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
<div class="form_row" id="withdrawButton">
<label> </label>
<input type="submit" name="submit_btn" title="Continue" value="Continue" class="btn_submit" id="withdrawsubmit"/>
</div>
<p class="info_txt">
For more information on service charges and withdrawing cash from your account,
click here.
</p>
<!-- -->
</div>
</form>
</div>
</body>
</html>