Use javascript only in this form - javascript

I have a form that will only display the next question once you have entered an input in the field. My trouble right now is, how will I display the next question using javascript only. What I am thinking about right now is to make a div in each of the question hide it then if the user have entered a value and clicked next the next question will not be hidden. My question is there another way to do that using Javascript only.
HTML codes below...there will be 20 <div>s in this form just posted 2 because the code is just the same only the labels are different
<div id="q1">
<label for="nanme">Full Name</label>
<input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">
<div class="control-group">
<div class="controls">
<button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
</div>
</div>
</div>
<div id="q2" style="display:none;">
<label for="Age">Age</label>
<input class="input" id="age" name="age" type="text" placeholder="Age" value="">
<div class="control-group">
<div class="controls">
<button id="btnbck" >Back</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="button" >Next</button>
</div>
</div>
</div>
JS
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q2').style.display = 'block';
document.getElementById('q1').style.display = 'none';
}
This site will help you to see what I would like to do with my form

Hide all questions except for the first one:
// CSS
.question + .question {
display: none;
}
When users click next, hide the first question, show the next question:
// JS
var step = 1;
$('button').click(function() {
$('#q' + step++).hide();
$('#q' + step).show();
});
codepen

You can add a count variable to know next question's number, then show it and hide the previous question:
Example:
var count = 2;
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q'+ count).style.display = 'block';
document.getElementById('q' + (count -1)).style.display = 'none';
count ++;
}
This is a good way for several questions.
You can change style by CSS classes
.hide{
display: none;
}
.show{
display: block;
}
And apply this class in your tags depending on the case:
Final Javascript:
var count = 2;
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q'+ count).className = "show";
document.getElementById('q' + (count -1)).className = "hide";
count ++;
}
Final HTML:
<div id="q1" class="show">
<label for="nanme">Full Name</label>
<input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">
<div class="control-group">
<div class="controls">
<button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
</div>
</div>
</div>
<div id="q2" class="hide">
<label for="Age">Age</label>
<input class="input" id="age" name="age" type="text" placeholder="Age" value="">
<div class="control-group">
<div class="controls">
<button id="btnbck" >Back</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="button" >Next</button>
</div>
</div>
</div>

Related

Prevent auto-fill on other fields on different step in multi-step form

I have a multi-step form which keeps auto-filling fields on a different field on another step. How do I prevent it from doing that. This is an example:
var current = 0;
var tabs = document.getElementsByClassName("tab");
document.querySelector(".next").addEventListener("click", function(e) {
tabs[current].style.display = "none";
current = current + 1;
showTab(current);
});
document.querySelector(".finish").addEventListener("click", function(e) {
alert("Finish");
});
function showTab() {
tabs[current].style.display = "block";
}
showTab(current);
.tab {
display: none;
}
<form class="" action="" method="" autocomplete="on">
<div class="tab">
<div class="container">
<h1>First Name</h1>
<label for="firstname" class="required">First Name</label>
<input id="firstname" type="text" placeholder="Enter First Name" required>
</div>
<button class="next" type="button">Next</button>
</div>
<div class="tab">
<div class="container">
<h1>Last Name</h1>
<label for="lastname" class="required">Last Name</label>
<input id="lastname" type="text" placeholder="Enter Last Name" required>
</div>
<button class="finish" type="button">Finish</button>
</div>
</form>
However, since there are no saved inputs on your storage on this form, it may not auto-fill as expected and is not completely reproducible. I still hope someone can help.

trouble with onclick for making display none and block

I'm trying to use onclick code and style.display in js to hide a something and make a dive which it's display is none by default to get block and appear.
The first one won't hide and the other one won't appear!
The script file works fine, I have other things in js which work perfectly.
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<a href="" id="chatbutton" >
<div class="mychat text-center" onclick="showDiv()">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
.mychat_open{
width: 15vw;
height: 20vh;
background-color: black;
position: fixed;
bottom: 20px;
right: 20px;
color: white;
opacity: 0.8;
min-height: 28px;
}
Your JS works fine, but you have the onclick function inside an empy <a href=""> tag. You can either add a # to it like this <a href="#"> or change it to some other kind of element such as a <button> to keep the page from reloading when it is clicked.
You should toggle the "d-none" class for the element you want to show instead.
document.getElementById('chatbox').classList.remove('d-none')
If the goal is to make the chat box hidden initially, then you can set its display style property to display:none.
<div id="chatbox" class="mychat_open text-center d-none" style="display:none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
This will hide the chatbox until the user clicks the button. This works because the js changes the style.display property of the element with id 'chatbox' to block.
I've added a return false to the link to prevent a page reload
added a style rule to actually hide the box initially, so we can show it :)
(added the p to visually show it's the other box showing, not some hiccup.)
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<html>
<body>
<a href="" id="chatbutton">
<div class="mychat text-center" onclick="showDiv(); return false;">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none" style="display: none;">
<p class="chattext">Chat Support Box</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
</body>
</html>
Dear May be this will help you in your case
cancel the a string and add button like
<button onclick="myFunction()">Chat Support</button>
Add in your div with ID chatbox style display none,
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
then add java
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
your complete forma like this
<button onclick="myFunction()">Chat Support</button>
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
<script>
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
More details may you can find
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

.show() doesn't work immediately - jQuery

I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>

Form validation with multiple highlighted fields

I have a registration form that I would like to have multiple field validation. What I mean by this is if more than one field is not filled in it will be highlighted red. I have some code already written but instead of highlighting the field not filled in, it's highlighting all of them. I realise it is quite long winded but I'm fairly new to this. My JS code is as follows:
`function formCheck() {
var val = document.getElementById("fillMeIn").value;
var val = document.getElementById("fillMeIn2").value;
var val = document.getElementById("fillMeIn3").value;
var val = document.getElementById("fillMeIn4").value;
var val = document.getElementById("fillMeIn5").value;
var val = document.getElementById("fillMeIn6").value;
var val = document.getElementById("fillMeIn7").value;
if (val == "") {
alert("Please fill in the missing fields");
document.getElementById("fillMeIn").style.borderColor = "red";
document.getElementById("fillMeIn2").style.borderColor = "red";
document.getElementById("fillMeIn3").style.borderColor = "red";
document.getElementById("fillMeIn4").style.borderColor = "red";
document.getElementById("fillMeIn5").style.borderColor = "red";
document.getElementById("fillMeIn6").style.borderColor = "red";
document.getElementById("fillMeIn7").style.borderColor = "red";
return false;
}
else {
document.getElementById("fillMeIn").style.borderColor = "green";
document.getElementById("fillMeIn2").style.borderColor = "green";
document.getElementById("fillMeIn3").style.borderColor = "green";
document.getElementById("fillMeIn4").style.borderColor = "green";
document.getElementById("fillMeIn5").style.borderColor = "green";
document.getElementById("fillMeIn6").style.borderColor = "green";
document.getElementById("fillMeIn7").style.borderColor = "green";
}
}`
My HTML is as follows:
'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
<input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
<input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
<input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>'
Thanks!
You could have the ids in an Array, iterate through its values, and execute the repeatable code in a function that groups all the logic inside.
example :
["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
// do things with id
})
Why not use the html "required" property instead?
If you want to do this with JS, you should give each variable a different name. In the code you posted you are continuously overwriting the same variable, and then, it evaluates val (which ended up being assigned to the (fill me7 value) to "", and if true, setting all the borders to red.
Set different variables, push the input values into an array when submit is triggered and loop through them if variables[i]==0, set getElementId(switch case[i] or another array with the name of the inputs[i]).bordercolor to red.
AGAIN, this sound VERY INEFFICIENT and I am not sure at all it would work. My guess is that it would take A LOT of time, and probably get timed out (except you are using some asych/try-catch kind of JS).
I would simply go for an HTML required property and then override the "required" property in CSS to make it look as you intend to. Simpler, easy and clean.
The main issue in your code is that you override the variable val each time you wrote var val = ....
Keeping your own your logic, you could write something like that.
var formModule = (function () {
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
function markInvalid($field) {
$field.style.borderColor = 'red';
}
function markValid($field) {
$field.style.borderColor = 'green';
}
return {
check: function () {
var isValid = true;
$fields.forEach(function ($f) {
if ($f.value === '') {
if (isValid) alert('Please fill in the missing fields');
isValid = false;
markInvalid($f);
}
else markValid($f);
});
return isValid;
}
};
})();
There are some extra concepts in this example which may be useful:
Working with the DOM is really slow, that's why you should
put your elements in a variable once for all and not everytime you
click on the submit button.
In my example i wrap the code with var formModule = (function () {...})();.
It's called module pattern. The goal is to prevent variables to leak in the rest of the application.
A better solution could be this one using the 'power' of html form validation:
HTML:
<form id="mbrForm" action="thanks.html" method="post">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
FIRST NAME:
<input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
</div>
<div class="col-md-4 vertical-gap">
LAST NAME:
<input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 vertical-gap">
ADDRESS:
<input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
<input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
<input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4 vertical-gap">
POST CODE:
<input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
</div>
<div class="col-md-4 vertical-gap">
PHONE No:
<input type="number" class="form-control vertical-gap" placeholder="Tel no">
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
EMAIL ADDRESS:
<input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
</div>
<div class="col-md-2"></div>
</div>
<div class="row vertical-gap">
<div class="col-md-2"></div>
<div class="col-md-8">
DISCIPLINE:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
</label>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
</div>
<div class="col-md-2"></div>
</div>
</form>
JS:
var formModule = (function () {
var $form = document.getElementById('mbrForm');
var $btn = document.getElementById('btnSubmit');
var $fields = [
document.getElementById('fillMeIn'),
document.getElementById('fillMeIn2'),
document.getElementById('fillMeIn3'),
document.getElementById('fillMeIn4'),
document.getElementById('fillMeIn5'),
document.getElementById('fillMeIn6'),
document.getElementById('fillMeIn7')
];
checkValidation();
$form.addEventListener('change', checkValidation);
$form.addEventListener('keyup', checkValidation);
$fields.forEach(function ($f) {
$f.addEventListener('change', function () {
markInput($f, $f.checkValidity());
});
});
function checkValidation() {
$btn.disabled = !$form.checkValidity();
}
function markInput($field, isValid) {
$field.style.borderColor = isValid ? 'green' : 'red';
}
})();
In this example, the button gets disabled until the form is valid and inputs are validated whenever they are changed.
I added required attribute in HTML inputs so they can be handled by native javascript function checkValidity(). Note that in this case inputs email and number are also correctly checked. You could also use attribute pattern to get a more powerfull validation:
<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">
Hope it helps.

Show/Hide div using bootstrap checkbox - require inputs to be entered only if checkbox is checked

Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});

Categories