I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
Related
When I use inputmask for my form input elements TAB Key not working. I can't switch with other input via tab key. I want use TAB key for switch via inputmask
HTML FORM
<form class="validate-form mt-2 pt-50" action="KisiEkle" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<label>TC: </label>
<div class="mb-1">
<input type="text" id="TC" name="TC" placeholder="TC bilgisi" class="form-control" autocomplete="off" required="required" />
</div>
<label>Ad Soyad: </label>
<div class="mb-1">
<input type="text" id="AdSoyad" name="AdSoyad" placeholder="Ad Soyad" class="form-control" autocomplete="off" required="required" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ekle</button>
</div>
</form>
JAVASCRİPT CODE
$(document).ready(function () {
$("#TC").inputmask("*{11,11}", { clearIncomplete: true, greedy: false });
});
<script src="~/assets/js/jquery.inputmask.min.js"></script> //2022 Robin Herbots
I am basically checking to see if the input field(fullName) is empty or not. If it is empty, then I want to disable the submit button, and forcing the user to add text in the FullName field.
To achieve this scenario, I did the following(code below), but when testing, I am still able to click the submit button, even if the FullName field is empty. I am not sure, what I am doing wrong with the JavaScript code.
I am doing all of this inside an .htm file.
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
</fieldset>
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
} else {
return true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<form name='form' id='form'>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="button" class="btn btn-namebtn" onclick='checkform(form)'>Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</form>
</fieldset>
</div>
</div>
Note:- You have not added form tag and onclick='checkform(form)' which created issue in your code.
Your JS is ok. There are some changes -
First, wrap the form content in a form with a name attribute of form.
Next, fire the checkform function on clicking the submit button.
Check the snippet below-
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<form name="form">
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name
<span class="required">*</span>
</label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="submit" class="btn btn-namebtn" onclick="checkform(document.form)">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
Is this what you are attempting?
Onclick if value of input is empty then you will see alert and button will disable.
EDIT: Included comments in code.
//get FullName input by id
var FullName = document.getElementById("FullName");
//get button by id
var btn_submit = document.getElementById("btn_submit");
function checkform() {
//if FullName is empty then alert and disable button
if (FullName.value === "") {
alert("Please enter your name!");
btn_submit.disabled = true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button onclick="checkform();" id="btn_submit" type="submit" class="btn btn-namebtn">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</div>
</div>
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
Im trying to make the form of registration or login hide and when the register or login button is clicked, the form will collapse. The codes work just fine but i want to make it when the login button is clicked, the login form will collapse and when the user wants to click on the register button, the login form will hide and the register form will collapse vice versa. I've tried the javascript but it turns out to be a mess. Somebody please help
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#loginform" aria-expanded="false" aria-controls="collapseExample">LOGIN
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#registerform" aria-expanded="false" aria-controls="collapseExample">
REGISTER
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<div class="collapse" id="loginform">
<form class="form-horizontal" role="form" id="loginform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<br>
<input type="submit" class="form-control" role="button" id="logsubmit" value="LOGIN">
</form>
</div>
<br>
<div class="collapse" id="registerform">
<form class="form-horizontal" role="form" id="registerform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="text" class="form-control" placeholder="CONFIRM USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<input type="password" class="form-control" placeholder="CONFIRM PASSWORD" required>
<input type="email" class="form-control" placeholder="EMAIL" required>
<input type="email" class="form-control" placeholder="CONFIRM EMAIL" required>
<br>
<input type="submit" role="button" class="form-control" id="regsubmit" value="REGISTER">
</form>
</div>
did you consider to use JQuery ? i am asking it because using Jquery is will be much more easy for you. Jquery contains some method which helps you handle hide/show/toggle forms and even with out of the box animations.
You can read more about it in the following links:
jQuery show jQuery hide jQuery toggle
If i will try to apply jQuery to your code it will look something like the following:
$("#loginbtn").click(function(){
$("#loginform").toggle(); // toggle will show hidden element and vice versa
});
where is your form's action? if you can add it, then you can replace your code like this
<script type="text/javascript">
function hideshow() {
document.forms[0].submit();
...
<input type='button' class="form-control" value='LOGIN' onclick="hideshow()" />
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle