Exposing form input when previous is selected or filled in - javascript

This will most likely need to involve javascript, which I know almost nothing about so please bear with me.
I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.
Any ideas would be great, thanks!

Just hide all elements in the form except for the first one, listen for changes on the form and display the next element relating to the last changed element (the event.target).
Example (which is definitley improvable):
$(".form-group:not(:first-child)").hide();
$("form").on("change keypress paste", function (event) {
$(event.target).parent().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>

You could use JQuery to remove a hidden class on input focus.
Run the code snippet or check out the CodePen Demo:
$(document).ready(function() {
$("input").focus(function() {
$(this).parent(".form-group").next().removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group hidden">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group hidden">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group hidden">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

very beginner jQuery

I am brand new to jQuery, I'm proficient in HTML, CSS, and JavaScript. I've set up a little test form and I just need help getting the ball rolling. I'm trying to add the class of 'form-control' to all my inputs on the page and I can't seem to figure it out.
$(document).ready(function() {
$('input').addClass('form-control');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="row">
<div class="col-md-3 form-floating">
<input type="text" placeholder="First Name" id="firstName">
<label for="firstName">First Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Last Name" id="lastName">
<label for="lastName">Last Name</label>
</div>
<div class="col-md-3 form-floating">
<input type="text" placeholder="Phone" id="phone">
<label for="phone">Phone</label>
</div>
<div class="col-md-3 form-floating">
<input type="email" id="email" placeholder="Email">
<label for="email">Email</label>
</div>
</div>
</form>
Add this script to the head on document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
and it should work, and check chrome devtools if you have other errors.

Why reCaptcha v3 send an empry form to the server

I have included the recaptcha v3 to my simple html form, the form submit good, but in the server side i find an empty array coming to inbox.
Here a copy/paste of my form code:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("mywebsite_form").submit();
}
</script>
<form id="website_form" class="website-form" action="https://webto.mywebsite.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D58000000H4Yu">
<input type=hidden name="retURL" value="http://www.mywebsite.com">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input class="form-control" id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input class="form-control" id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="email">Email</label>
<input class="form-control" id="email" maxlength="80" name="email" size="20" type="text"/>
</div>
</div>
<div class="form-group col-md-12">
<label for="subject">Subject</label>
<input class="form-control" id="subject" maxlength="80" name="subject" size="20" type="text"/>
</div>
<div class="form-group col-md-12">
<label for="description">Description</label>
<textarea class="form-control" name="description"></textarea>
</div>
<button class="g-recaptcha"
data-sitekey="mywebsite_key"
data-callback='onSubmit'
data-action='submit'>Submit</button>
</form>
What additional lines should i add to make the form fields arrive to the other side "server"?
you should include the "reCAPTCHA_site_key" parameter in the url of the google script
<script src="https://www.google.com/recaptcha/api.jsrender=reCAPTCHA_site_key"></script>
I figure out the problem, the form was rendered twice in the same page wich make the not unique in the page,so the form was sended empty. To resolve that i have to render the form html code only 1 time, the problem is now solved.
Thanks a lot everyone!

Can't get the value of an element

I am trying to get the value of an input element. The element is in a modal and the modal data is populated with different values depending on the button I click to open the modal.
var modalBody = document.getElementsByClassName("modal-body");
for(var i = 0; i < modalbody.length; i++) {
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
alert(mac);
}
error: TypeError:
modalBody.item(...).getElementsByTagName(...)[2].getElementById is not
a function
I also tried with document.getElementById("mac-name").value; but that returns blank
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" required="" type="text">
</div>
</div>
</form>
Instead of using getElementsByClassName and then running the following on each element:
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
You can use instead use querySelectorAll and pass in .modal-body div #mac-name. This will select all elements with the id mac-name inside a div within an element with the class modal-body. You can use the results of this to then loop over each element and get each value:
var macs = document.querySelectorAll('.modal-body div #mac-name');
See example below:
var macs = document.querySelectorAll('.modal-body div #mac-name');
for (var i = 0; i < macs.length; i++) {
var mac = macs[i].value;
console.log(mac);
}
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id1" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name1" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name1" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 1" required="" type="text">
</div>
</div>
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id2" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name2" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name2" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 2" required="" type="text">
</div>
</div>
</form>

bootstrap custom validation is not showing up specific field on submission of the form

I want to know how to make the bootstrap custom validation also show the specific field where the form is not filled.
You can observe the normal form shows or goes to the specific field which is not filled when the form is submitted
where bootstrap custom validation doesn't do that.
This is the code with out bootstrap custom validation
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">#</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
This is the bootstrap validation
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>
If you remove novalidate="" from <form class="needs-validation was-validated" novalidate=""> you get the same result as without Bootstrap validation.
novalidate prevents the browser to validate the form so you can apply the custom behaviour of Bootstrap.
If you want to add scroll to id after the validation I suppose you have to do by yourself or check if there is such config in the library you are using.
I have updated the code by using some JavaScript code.
And it's working. :)
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
var invalidOptions = document.querySelectorAll(
".form-control:invalid");
invalidOptions.forEach(function(element) {
element.parentNode.childNodes.forEach(function(node) {
if (node.className == 'valid-feedback') {
node.className = 'invalid-feedback';
node.innerText =
'Please choose a Gender';
}
});
});
$('html, body').animate({
scrollTop: $(invalidOptions[0]).offset().top
}, 2000);
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">#</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</body>
</html>

add a class to parent element based on child class - inside of a submit event

Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});

Categories

Resources