Dropdown Menu That Creates An Input Field

Dropdown Menu That Creates An Input Field - javascript

What I would like to happen is when somebody selects the commercial option the email-signup1 pops up below it. This is the code I have:
<div class="field-widget">
<select id="field7" name="field227" class="validate-selection"
title="What Type Of Vehicle Is This">
<option >Select one...</option>
<option value="Commercial">Commercial</option>
<option value="Passenger">Passenger</option>
</select>
<div id="email-signup1" class="form-row" style="display:none;">
<div class="field-label"><label for="field22">Email</label>:</div>
<div class="field-widget"><input name="field22" id="field22"
class="required validate-email" title="Optional: Enter your email address" /></div>
</div>

Here is how you can do this with pure JavaScript: http://jsfiddle.net/dfj8u/3/
HTML
<div class="field-widget">
<select id="field7" name="field227" class="validate-selection"
title="What Type Of Vehicle Is This">
<option >Select one...</option>
<option value="Commercial">Commercial</option>
<option value="Passenger">Passenger</option>
</select>
<div id="email-signup1" class="form-row" style="display:none;">
<div class="field-label"><label for="field22">Email</label>:</div>
<div class="field-widget"><input name="field22" id="field22" class="required validate-email" title="Optional: Enter your email address" />
<br /><input type="button" id="closeButton" value="Close" />
</div>
</div>
CSS
.form-row {
width: 200px;
background: gray;
border: 1px solid black;
}
JS
(function () {
var select = document.getElementById('field7'),
closeButton = document.getElementById('closeButton');
function addHandler(el, event, handler) {
if (el.addEventListener) {
el.addEventListener (event, handler, false);
} else if (el.attachEvent) {
el.attachEvent (event, handler);
}
}
addHandler(select, 'change', inputChanged);
addHandler(closeButton, 'click', hideForm);
function inputChanged(event) {
if (this.value === 'Commercial') {
showForm();
}
}
function showForm() {
var form = document.getElementById('email-signup1');
form.style.display = 'block';
}
function hideForm() {
var form = document.getElementById('email-signup1');
form.style.display = 'none';
}
}());
Best regards.

Related

Disable Required validation on some specific input fields if they are hidden with select tag

Hi guys can you help me solve this i used display:none to hide some input fields and display them with a select tag, if it's on a specific country, so when i tried submitting the form it keeps asking the hidden input field to be filled whereas they are hidden with select tag, i want this specific input field to be disable if hidden, then enable when show with required, so if input is shown enable required else disable required if input is hidden
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required><div> </div>
<input id="second" name="second" placeholder="second " value="" required><div> </div>
<input id="third" style="display:none;" placeholder="third" name="third" value="" required><div> </div>
<input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required><div> </div>
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function showDiv(select){
if(select.value== "United States"){
document.getElementById('third').style.display = "block";
} else{
document.getElementById('third').style.display = "none";
}
if(select.value== "United kingdom"){
document.getElementById('forth').style.display = "block";
} else{
document.getElementById('forth').style.display = "none";
}
}
</script>
and also the space between the "second" and the "third" is what i want as the space between the "second" and the "forth" and any other fifth and six if i decided to add to the text field, i want hidden input field to be on same line
second and third
https://i.ibb.co/dQcXS2x/1.png
second and forth
https://i.ibb.co/c11VBfc/2.png

You may set the required attribute for such inputs, like this:
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
Something like this:
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required>
<div> </div>
<input id="second" name="second" placeholder="second " value="" required>
<div> </div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
<div> </div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
<div> </div>
<input type="submit" value="submit">
</form>
Update:
With div and CSS3 styles.
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
form {
border: #ccc solid 1px;
}
form div {
margin: 1em;
}
<form action="d.php" method="POST">
<div>
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
</div>
<div>
<input id="first" name="first" placeholder="first" value="" required>
</div>
<div>
<input id="second" name="second" placeholder="second " value="" required>
</div>
<div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
</div>
<div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
</div>
<div>
<input type="submit" value="submit">
</div>
</form>

How to display a textarea after selecting a certain option

I have a textarea element that is not displayed. If the user selects "Other" option in the select element, the textarea should show, but it is not showing with the below code.
The following is my select element :
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other" onclick="showHide(this)"
>Other feedback (free text)</option
>
</select>
The following is my textarea element :
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
value=""
style="width:540px;display:none"
></textarea>
</div>
The following is my JS :
function showHide(elm) {
var Fbtext = document.getElementById("fb_text");
if (document.getElementById("feed").value == "Other") {
Fbtext.classList.remove("hide");
}
}

You can pass value from select using onchangeevent to your function and check if that value is equals to Others if yes display textarea else hide it. Working example :
function showHide(elm) {
if (elm == "Other") {
//display textbox
document.getElementById('fb_text').style.display = "block";
} else {
//hide textbox
document.getElementById('fb_text').style.display = "none";
}
}
<select class="form-control" name="feed" id="feed" value="" onchange="showHide(this.value)" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;display:none"></textarea>
</div>

Add change event to the select element, see if the selected option is 'Other', hide the text area else show.
const textareaEle = document.querySelector('textarea');
document.querySelector('select').addEventListener('change', function() {
textareaEle.style.display = (this.value == 'Other') ? 'block' : 'none';
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control" name="feed" id="feed" value="" style="width:540px">
<option selected="selected" disabled="true">Please select</option>
<!-- <option></option> -->
<option value="Excellent" id="Excellent"> All text is excellent</option>
<option value="Other" id="Other">Other feedback (free text)</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea class="form-control hide" name="fb_text" id="fb_text" rows="5" placeholder="Describe yourself here..." value="" style="width:540px;"></textarea>
</div>

I have not checked but I understand in your code you try to remove a class (hide) that you have not assigned, because you hide the textarea with the attribute style
Please try this example, I understand in your example you use bootstrap, for demonstration I have added hide
const feed = document.querySelector('#feed');
const fbtext = document.querySelector('#fb_text');
feed.addEventListener('change', handleChange);
function handleChange(event) {
const value = event.target.value;
if (value === 'Other') {
fbtext.classList.remove('hide');
return false;
}
fbtext.classList.add('hide');
}
.hide {
display: none;
}
<select
class="form-control"
name="feed"
id="feed"
value=""
style="width:540px"
>
<option selected="selected" disabled="true">Please select</option>
<option value="Excellent" id="Excellent"> Excellent</option>
<option value="Other" id="Other">Other</option>
</select>
<div class="form-group">
<label for="fb_text"></label>
<textarea
class="form-control hide"
name="fb_text"
id="fb_text"
rows="5"
placeholder="Describe yourself here..."
></textarea>
</div>

jQuery does not see the text that was added

There is a script. It adds text from selects to the tags of the Special Price block. At input of number the new similar block is added. It is necessary to add exactly the same block as the previous one. But the text from the tags <span> (numb, curr) is not added. I understand that this script only parses the original HTML markup?
https://playcode.io/301889?tabs=console&script.js&output
The code:
(function() {
$(document).ready(function() {
$('.field.inline.specially > span.curr').text(
$('#id_lot_currency > option:selected').eq(0).text()
);
$('.field.inline.specially > span.numb').text(
$('#id_lot_type > option:selected').eq(0).text()
);
$(document).on('change','#id_lot_currency',function () {
$('.field.inline.specially span').eq(3).text($('option:selected',this).text())
})
$(document).on('change','#id_lot_type',function () {
$('.field.inline.specially span').eq(1).text($('option:selected',this).text())
});
})
var copy = document.querySelector('.field.inline.specially').cloneNode(true);
document.querySelector('html').addEventListener('input', function(e) {
if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
var error = 0;
for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
evt.value = evt.value.replace(/[^\d]/, '');
if (!evt.value || +evt.value < 1) error++;
}
if (!error) {
var last = document.querySelectorAll('.field.inline.specially');
last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
}
}
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
<label for="id_lot_minimum" class="subhead">Lot minimum:</label>
<input type="number" name="lot_minimum" required id="id_lot_minimum" />
<select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
<option value="1">kg</option>
<option value="2">foot</option>
</select>
</div>
<div class="field inline" id='lot'>
<label for="id_lot_cost" class="subhead">Cost:</label>
<input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
<select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
<option value="1">usd</option>
<option value="3">blg</option>
<option value="2">uah</option>
</select>
</div>
<div class="field inline specially">
<label for="specially" class="subhead">Special price</label>
<span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
<span class='numb'></span>
<span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
<span class='curr'></span>
</div>

instead of $('#item').on('change',function) use $(document).on('change','#item',function) which will work on event the injected HTML.

(function() {
$(document).ready(function() {
$('.field.inline.specially > span.curr').text(
$('#id_lot_currency > option:selected').eq(0).text()
);
$('.field.inline.specially > span.numb').text(
$('#id_lot_type > option:selected').eq(0).text()
);
$(document).on('change','#id_lot_currency',function () {
$('.field.inline.specially span.curr').text($('option:selected',this).text())
})
$(document).on('change','#id_lot_type',function () {
$('.field.inline.specially span.numb').text($('option:selected',this).text())
});
})
document.querySelector('html').addEventListener('input', function(e) {
var copy = document.querySelector('.field.inline.specially').cloneNode(true);
if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
var error = 0;
for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
evt.value = evt.value.replace(/[^\d]/, '');
if (!evt.value || +evt.value < 1) error++;
}
if (!error) {
var last = document.querySelectorAll('.field.inline.specially');
last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
}
}
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
<label for="id_lot_minimum" class="subhead">Lot minimum:</label>
<input type="number" name="lot_minimum" required id="id_lot_minimum" />
<select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
<option value="1">kg</option>
<option value="2">foot</option>
</select>
</div>
<div class="field inline" id='lot'>
<label for="id_lot_cost" class="subhead">Cost:</label>
<input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
<select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
<option value="1">usd</option>
<option value="3">blg</option>
<option value="2">uah</option>
</select>
</div>
<div class="field inline specially">
<label for="specially" class="subhead">Special price</label>
<span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
<span class='numb'></span>
<span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
<span class='curr'></span>
</div>

How do I enable my form's submit button using jquery?

I have a basic form with some input fields and a dropdown(select field).
Almost all fields have a form of validation. When a field has an error, an error message with the CSS class 'errorText' is displayed next to the field.
By default, my submit button is 'disabled'. I want to remove the 'disabled' attribute from my submit button once all tags with 'errorText' CSS classes are hidden/removed.
my current script just hides all tags with 'errorText' when an error occurs. how do I stop it from doing that and how can I enable my submit button once all fields have been properly enter/validated? Thanks.
EDIT: SOLVED. CODE UPDATED.
// Field Validations
$('#firstName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="firstName"]').addClass('errorText');
$('#errorFName').show();
} else {
$('label[for="firstName"]').removeClass('errorText');
$('#errorFName').hide();
}
});
$('#lastName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="lastName"]').addClass('errorText');
$('#errorLName').show();
} else {
$('label[for="lastName"]').removeClass('errorText');
$('#errorLName').hide();
}
});
$('#state')
.on('blur', function() {
var $this = $(this);
if ($('#state').val() == "") {
$('label[for="state"]').addClass('errorText');
$('#errorState').show();
} else {
$('label[for="state"]').removeClass('errorText');
$('#errorState').hide();
}
});
// Submit Button validation
$('input, select').on('keyup, blur', function() {
if ($('.errorText:visible').length ||
$('#firstName' || '#lastName' || '#state').val() == '' ) {
$('input[type="submit"]').prop('disabled', true);
} else if ($('#firstName').val() != '' &&
$('#lastName').val() != '' &&
$('#state').val() != '' ) {
$('input[type="submit"]').prop('disabled', false);
}
});
.errorText {
color: #c4161c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<label for="firstName" class="required">First Name</label>
</div>
<div>
<input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
</div>
<div>
<input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />
<div>
<label for="state" class="required">State</label>
</div>
<div>
<select name="state" id="state">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />

If it helps, check this update using data-attribute. We group the label,input,error in a div and handle error message. Also simplified the check valid on input and select element but can be modified.
html
<div>
<label for="firstName" class="required">First Name</label>
<input type="text" name="firstName" id="firstName" />
<span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
<label for="state" class="required">State</label>
<select name="state" id="state" data-valid="">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
<span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />
script
$(function() {
$('input,select')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$this.data("valid", 'false');
//find the immediate span with errorText and show it
$this.next("span.errorText").show();
} else {
$this.data("valid", 'true');
$this.next("span.errorText").hide();
}
checkInputs();
});
});
function checkInputs() {
//find all the input and select items where the data attribute valid is present and make an array
var array = $('input,select').map(function() {
return $(this).data("valid");
}).get();
//if there are not empty or false indicating invalid value set submit property to true
if (array.indexOf("") == -1 && array.indexOf("false") == -1) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
}
css
.errorText {
color: #c4161c;
display: block;
}

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>

Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>

So the solution was to delete return false; from the function.

Develop Reference

JavaScript is the programming language of the Web.

Dropdown Menu That Creates An Input Field - javascript

Related

Disable Required validation on some specific input fields if they are hidden with select tag

How to display a textarea after selecting a certain option

jQuery does not see the text that was added

How do I enable my form's submit button using jquery?

Javascript Form validation not working for select element

Categories

Resources