javascript update form field by multiple option values - javascript

First of all, im new at this. I want to make a simple form to calculate a volume of right rectangular prism.
If the user select option custom, then user can customize the length(custom_panjang), width (custom_lebar) and height(custom_tinggi).
But there is other option without customize (10x10x5),etc.
I've found the solution to calculate the result from the customize option. But how can i calculate the other option (without calculate).
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">
Or you can see the demo right here
https://jsfiddle.net/aurj74nq/
Please help me, thank you.

Call the mult when the value changes in the select. Also, call pilihUkuran once at the end so that the function will be called for the initial value of the select. If you don't want this, then you can omit it.
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(30, 30, 5)
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(10, 10, 5)
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(20, 20, 5)
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
pilihUkuran(); // Optional
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

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 use different attribute on change the second select option

I'm trying to change the value of my input box by changing two different select options.
The first select box is product_type with two different data attributes on the options: data-price and data-price_c.
The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.
This is what I've tried:
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var selected_type = pt.options[pt.selectedIndex];
sp.onchange = function(){
var selected = sp.options[sp.selectedIndex];
if (selected_type === 1){
lp.value = selected.getAttribute('data-price');
} else {
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
};
sp.onchange();
count.onchange = function(){
fp.value = lp.value * count.value;
}
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" onchange="update();">
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
I hope I understated you correctly what needs to be done from code and explanation:
Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.
Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)
I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.
I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.
Hope this helps.
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>

Make a multiselect form

I have this select form to add in my database countries.
https://jsfiddle.net/Da4m3/394/
I want to change this form into this:
this is html code:
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1" /> Selected</label>
<div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
<div style="padding:5px"></div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Excluded Countries</b></p>
<select size="10" name="excludedcountries" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])" multiple >
<option value='97'>Afghanistan</option>
<option value='191'>Aland Islands</option>
<option value='105'>Albania</option>
<option value='114'>Algeria</option>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])">
</div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Selected Countries</b></p>
<select size="10" id="members_create_campaign_form_countries" name="members_create_campaign_form[countries][]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])" multiple >
</select>
and with this js:
$(document).ready(function () {
if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
$('#clist_div').show('slow');
}
$('#members_create_campaign_form_countrySelectionType_0').click(function () {
$('#clist_div').hide('slow');
});
$('#members_create_campaign_form_countrySelectionType_1').click(function () {
$('#clist_div').show('slow');
});
selectDiff('clist_div', 'members_create_campaign_form_countries');
});
function sortSelect(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
function SelectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = true;
}
}
function hasOptions(obj) {
if (obj!=null && obj.options!=null) {
return true;
}
return false;
}
function moveSelectedOptions(from,to) {
if (!hasOptions(from)) { return; }
for (var i=0; i<from.options.length; i++) {
var o = from.options[i];
if (o.selected) {
if (!hasOptions(to)) { var index = 0; } else { var index=to.options.length; }
to.options[index] = new Option( o.text, o.value, false, false);
}
}
// Delete them from original
for (var i=(from.options.length-1); i>=0; i--) {
var o = from.options[i];
if (o.selected) {
from.options[i] = null;
}
}
if ((arguments.length<3) || (arguments[2]==true)) {
sortSelect(from);
sortSelect(to);
}
from.selectedIndex = -1;
to.selectedIndex = -1;
}
how i can do that? i have tried but all time don't insert in to my database!
Is from this value allTarget that put me all, and this value countries[] for multiselect, i don't know where and how i can put this values.
I have do some modifications and i have this code that when i select from left side is working, is adding to my database but when i push options to right side is not adding in database.
<div class="st-form-line">
<span class="st-labeltext">Countries</span>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="www" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="www" required="required" value="1"/> Selected</label>
<div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
<div style="padding:5px"></div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Excluded Countries</b></p>
<select size="10" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['countries[]'])" multiple >
<?php foreach($arrayCountries as $country) {?>
<option value="<?= $country ?>" ><?= $country ?></option>
<?php } ?>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['countries[]'],this.form['countries[]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['[countries[]'],this.form['countries[]'])">
</div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Selected Countries</b></p>
<select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form ['countries[]'],this.form['countries[]'])" multiple >
</select>
</div>
</div>
<div class="clear"></div>
</div>
Quickly coded, but is this what you're looking for?
https://jsfiddle.net/Da4m3/398/
(didn't bother to write the css)
The magic happens in the js code
s = $('#selected');
n = $('#not-selected');
l = $('#left');
r = $('#right');
l.on('click', function() {
move = s.find('option:checked');
move.attr('selected', false);
n.append(move);
});
r.on('click', function() {
move = n.find('option:checked');
move.attr('selected', false);
s.append(move);
});

show next custom error message if user enter only first input in any row

iam working on form validation, my requirement is show erro message if user did not fill all field in a row. in my page there are two rows every row contains two input fields. when i click submit button when all fields are empty it should show error. page first two inputs working. when user enter first field the next field also mandatory. no need of second row, if user filled first row and also filed second row first field, the second row second field mandatory.
in this manner is my requirement i have written some code.
Thanks in advance.
HTML
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var result;
var i = 1
for (i = 1; i < sameCls.length; i++) {
result += sameCls[i]
if (result == 1) {
version1Error.textContent = "Enter version";
return false;
} else {
version1Error.style.display = "none";
}
}
}
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div id="version1Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice1Error" class="selectDevice1Cls"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div id="version2Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice2Error" class="selectDevice2Cls"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>
OK i add it to this code.check it!.
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>
JS :
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var errorPos = [];
var result;
var i = 0;
for (i = 0; i < sameCls.length; i++) {
result = sameCls[i];
if (result.value == "" ) {
errorPos.push(i);
} else {
//version1Error.style.display = "none";
}
}
//reset error class
var listerror = document.getElementsByClassName("error");
for(var t5 = 0 ; t5 < listerror.length ; t5++ ){
listerror[t5].textContent = "";
}
console.log(errorPos);
var flag = false;
if(errorPos.length > 0){
for (i = 0; i < sameCls.length; i=i+2 ) {
if(i % 2 == 0){
console.log(errorPos.indexOf(i));
if(errorPos.indexOf(i)==-1){
if(errorPos.indexOf(i+1)==-1){
flag = true;
}
else{
flag = false;
}
}
}
}
if(!flag){
for(var t2= 0 ; t2 < errorPos.length ; t2++){
console.log(sameCls[errorPos[t2]]);
for(var t3 = 0 ; t3 < sameCls[errorPos[t2]].parentNode.childNodes.length; t3++ ){
if(sameCls[errorPos[t2]].parentNode.childNodes[t3].className == "error"){
sameCls[errorPos[t2]].parentNode.childNodes[t3].textContent = "Erorr!!";
sameCls[errorPos[t2]].parentNode.childNodes[t3].style.display = "block";
return false;
}
}
}
}
}
return false;
}
Check It!

Can't keep CSS change via Javascript

I have a simple "select" - show below.
<label>Best way to reach you?</label><br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<button onclick="showHidden()">Which way?</button>
the object I wish to show is in the HTML with the following properties:
<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>
I then have a .js file with the following function.
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
}
}
I then have the id listed within my CSS as the following:
#email{ display:none; }
The goal is to "show" the email text box when the "email" option is selected from the <select> above.
As of right now, I'm simply printing what was selected, so I can know for sure that I'm getting the right values to run the if statement against. That being said, when I select the email option, it literally flashes the email text box but immediately reverts back to a hidden state.
UPDATED CODE
<label>Best way to reach you?</label><br>
<select onchange="showHidden()" id="contactMethod">
<option value="select">Select...</option>
<option value="email">Email</option>
<option value="phone">Work Phone</option>
<option value="cPhone">Cell Phone</option>
<option value="Im">Instant Messanger</option>
</select>
MODIFIABLE FIELDS
<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">
JS
function showHidden() {
var dropSelection = document.getElementById("contactMethod").value;
if(dropSelection == "email") {
document.getElementById("email").style.display = "block";
document.getElementById("emailLabel").style.display = "inline";
}
else if(dropSelection == "phone") {
document.getElementById("phone").style.display = "block";
document.getElementById("phoneLabel").style.display = "inline";
}
else if(dropSelection == "cPhone") {
document.getElementById("cPhone").style.display = "block";
document.getElementById("cPhoneLabel").style.display = "inline";
}
else if(dropSelection == "Im") {
document.getElementById("Im").style.display = "block";
document.getElementById("IMLabel").style.display = "inline";
}
}
function showHidden(){
var dropSelection = document.getElementById("contactMethod").value;
console.log(dropSelection)
if(dropSelection == "email"){
document.getElementById("email").style.display = "block";
}
}
#email{
display:none;
}
<label>Best way to reach you?</label>
<br>
<select id="contactMethod">
<option value="wp">Work Phone?</option>
<option value="cp">Personal Cell Phone?</option>
<option value="email">Email?</option>
<option value="Im">Instant Messanger?</option>
</select>
<br>
<button onclick="showHidden()">Which way?</button>
<br>
<label>E-mail Adress:</label>
<br>
<input id="email" type="text" display="none">
<br>
I don't see any problem, it works fine.

Categories

Resources