Develop Reference

How to submit only one of hide/show fields data when required - Laravel

A form contains multiple fields. One field is "yes/no" dropdown. When yes selected, another dropdown appears. When no selected a text input field appears.
Depending on yes/no dropdown one of the fields' data should be submitted to the database.
However, both fields data is sent to the database. But the database wants a string and now it gets an array. Data can be submitted.
What should be adapted to prevent this, so only data from the showed field is put through the controller and not also data from at that moment hidden field?
Note: 1 field (input of dropdown) should be filled in, required.
JQuery
window.onload = function() {
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'none';
}
function hideShow() {
var D = document.getElementById("yesno")
var Y = document.getElementById('isYes')
var N = document.getElementById('isNo')
if (D.selected) {
if (D.value == "yes"){
Y.style.display = 'block';
N.style.display = 'none';
Y.required = true;
}
else{
N.style.display = 'block';
Y.style.display = 'none';
N.required = true;
}
}
}
HTML
<div class="row">
<div class="col-6">
<select name="agree" class="form-control" onchange="hideShow();" id="yesno" required>
<option></option>
<option id="yes">Yes</option>
<option id="no">No</option>
</select>
</div>
<div class="col-6">
<select name="type" class="form-control" id="ifYes">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="text" id="ifNo" class="form-control input-text" name="type">
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-primary btn-block" style="margin: 10px;">New</button>
</div>

In my controller, I have performed validation on institute saying required. Now, I remove this. And with adapting the javascript code the error is gone.
$this->validate($request, [
'institute' => 'min:2',
...
]);
$project = new Project();
...
$project->type = request('type');
...
$project->save();
Javascript adding the disabled fields
function hideShow() {
var x = document.getElementById('YesNo');
var r = x.options[x.selectedIndex].value;
var y = document.getElementById("ifyes");
var n = document.getElementById("ifno");
if ( r == "Yes"){
y.style.display = "block";
n.style.display = "none";
y.disabled = false;
n.disabled = true;
y.required = true;
n.required = false;
}
else if ( r == "No") {
y.disabled = true;
n.disabled = false;
y.style.display = "none";
n.style.display = "block";
y.required = false;
n.required = true;
} else{
y.disabled = true;
n.disabled = true;
y.style.display = "none";
n.style.display = "none";
y.required = false;
n.required = true;
}
}

show multiple text when select option is select

I have multiple div, I want to display 2 hidden text when I select the value of 1, when I choose value of 2 it will display 4 hidden text etc.
function showDiv(divId, element) {
document.getElementById('depositProductType').addEventListener('change', function() {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('allowJoint').style.display = style;
document.getElementById('allowTransfer').style.display = style;
var style = this.value == 2 ? 'block' : 'none';
document.getElementById('allowJoint').style.display = style;
document.getElementById('allowTransfer').style.display = style;
document.getElementById('allowDisabling').style.display = style;
document.getElementById('createOne').style.display = style;
var style = this.value == 3 ? 'block' : 'none';
document.getElementById('allowTransfer').style.display = style;
document.getElementById('createOne').style.display = style;
});
}
<select id="depositProductType" name="prod_type" onchange="showDiv('allowJoint','allowTransfer','allowDisabling','createOne', this)">
<option class="blank" value="">Please select</option>
<option value="1">Fixed Deposit</option>
<option value="2">Savings Deposit</option>
<option value="3">Scheduled Deposit</option>
</select>
<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint"> ------- </div>
<div id="allowTransfer"> ------ </div>
<div id="allowDisabling"> ------- </div>
<div id="createOne"> ---------- </div>

First change you select to only pass the element
<select id="depositProductType" name="prod_type" onchange="showDiv(this)">
Then you showDiv can no need to listen to event since it is trigger by the onChange event already. Just call your function.
function showDiv(ele) {
var allowJoint = document.getElementById('allowJoint');
var allowTransfer = document.getElementById('allowTransfer');
var allowDisabling = document.getElementById('allowDisabling');
var createOne = document.getElementById('createOne');
if(ele.value == 1) {
allowJoint.style.display = 'block';
allowTransfer.style.display = 'block';
allowDisabling.style.display = 'none';
createOne.style.display = 'none';
}
else if(ele.value == 2) {
allowJoint.style.display = 'block';
allowTransfer.style.display = 'block';
allowDisabling.style.display = 'block';
createOne.style.display = 'block';
}
else if(ele.value == 3) {
allowTransfer.style.display = 'block';
createOne.style.display = 'block';
allowJoint.style.display = 'none';
allowDisabling.style.display = 'none';
}
}

function showDiv(element) {
var old_element = document.getElementById("depositProductType");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
document.getElementById('depositProductType').addEventListener('change', function() {
console.log(this.value)
document.getElementById('allowJoint').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';
document.getElementById('allowTransfer').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';
document.getElementById('allowDisabling').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';
document.getElementById('createOne').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';
});
}
<select id="depositProductType" name="prod_type" onchange="showDiv(this)">
<option class="blank" value="0">Please select</option>
<option value="1">Fixed Deposit</option>
<option value="2">Savings Deposit</option>
<option value="3">Scheduled Deposit</option>
</select>
<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint" style="display: none"> allowJoint </div>
<div id="allowTransfer" style="display: none"> allowTransfer </div>
<div id="allowDisabling" style="display: none"> allowDisabling </div>
<div id="createOne" style="display: none"> createOne </div>

Changing html content with javascript based on dropdown selection

I have a code in which I want different html elements to appear and disappear based on selection in html dropdown. The problem is that the console returns the value of the dropdown correctly but with the given code below, none of the html appear upon changing the value of the dropdown.
Here's the code: http://textuploader.com/dhzi6
HTML
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"></div>
<div id="wrapperTwo"></div>
<div id="wrapperThree"></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}

The problem is you have not fired the onchange event. Add onchange event for your select box and kept your javascript code inside one function. It will work.
HTML
<select id="dropDown" onchange="test()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>First</h1></div>
<div id="wrapperTwo"><h1>Second</h1></div>
<div id="wrapperThree"><h1>Third</h1></div>
JS
var dropDown = document.getElementById("dropDown"),
myWrappers = [
document.getElementById("wrapperOne"),
document.getElementById("wrapperTwo"),
document.getElementById("wrapperThree")
];
function test() {
for (i=0; i<myWrappers.length; i++){
if(dropDown.value === "default"){
myWrappers[i].style.display = "none";
} else if(dropDown.value === "one"){
myWrappers[i].style.display = "none";
myWrappers[0].style.display = "block";
} else if(dropDown.value === "two"){
myWrappers[i].style.display = "none";
myWrappers[1].style.display = "block";
} else if(dropDown.value === "three"){
myWrappers[i].style.display = "none";
myWrappers[2].style.display = "block";
}
}
}
FIDDLE DEMO
UPDATE
Now the above code will run successfully, but the way you are achieving the desired result is too complicated. You can make it very simple and neat. Look at the following code javascript code.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(dropDown === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(dropDown === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(dropDown === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(dropDown === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
In the above code, first thing there is no for loop. Simply check the selected value and display the html parts accordingly. The same I have added in the snippet below.
function changeEvent() {
var dropDown = document.getElementById("dropDown").value;
if(selvalue === "default"){
document.getElementById('wrapperOne').style.display = 'block';
document.getElementById('wrapperTwo').style.display = 'block';
document.getElementById('wrapperThree').style.display = 'block';
} else {
document.getElementById('wrapperOne').style.display = 'none';
document.getElementById('wrapperTwo').style.display = 'none';
document.getElementById('wrapperThree').style.display = 'none';
if(selvalue === "one"){
document.getElementById('wrapperOne').style.display = 'block';
} else if(selvalue === "two"){
document.getElementById('wrapperTwo').style.display = 'block';
} else if(selvalue === "three"){
document.getElementById('wrapperThree').style.display = 'block';
}
}
}
<select id="dropDown" onChange="changeEvent()">
<option value="default" selected="selected"> Please select shape </option>
<option value="one" id="rectangle">Rectangle</option>
<option value="two" id="triangle">Triangle</option>
<option value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne"><h1>This is Wrapper ONE</h1></div>
<div id="wrapperTwo"><h1>This is Wrapper TWO</h1></div>
<div id="wrapperThree"><h1>This is Wrapper THREE</h1></div>

If you are willing to use jQuery i would suggest this:
$('#dropDown').on('change', function(e){
var selectedOption = $(this).find(':selected');
if (selectedOption.attr('data-id') != null) {
$('.wrapper:not(#' + selectedOption.attr('data-id') + ')').hide();
$('#' + selectedOption.attr('data-id')).show();
} else {
$('.wrapper:not(:hidden)').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
<option value="default" selected="selected"> Please select shape </option>
<option data-id="wrapperOne" value="one" id="rectangle">Rectangle</option>
<option data-id="wrapperTwo" value="two" id="triangle">Triangle</option>
<option data-id="wrapperThree" value="three" id="circle">Circle</option>
</select>
<div id="wrapperOne" class="wrapper" style="display: none;">One</div>
<div id="wrapperTwo" class="wrapper" style="display: none;">Two</div>
<div id="wrapperThree" class="wrapper" style="display: none;">Three</div>
With best regards,
John

Javascript onchange doesn't show hidden div

I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:
<?php
echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
echo '<option value="disable_all" selected>Disable All';
}
else{
echo '<option value="disable_all">Disable All';
}
echo '</select>';
echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>";
?>
I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up
Where did I go wrong?
UPDATE: This is the View Source from Google Chrome
<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>

This line:
var menu = document.getElementById('ipqos');
There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:
<select name="ipqos" id="ipqos" onchange="myFunction()">
Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:
menu.options[menu.selectedIndex].value == 'enable_iprule'
Working example:
function myFunction() {
var menu = document.getElementById('ipqos');
var val = menu.options[menu.selectedIndex].value;
if (val == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (val == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>

RGraham solutions works perfectly.
I did a small work arround on your script.
Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/
For the Javascript, I did simplify the process a little bit.
function changedSelect() {
var selectedOption = document.getElementById("ip_select").value;
document.getElementById("demo").innerHTML = "You selected: " + selectedOption;
if(selectedOption == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (selectedOption == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
As he told, you need to give an ID to your select element to make it works.
<select id="ip_select" name="ipqos" onchange="changedSelect();">

JavaScript Giving 'Object Expected' Error

I am writing some code that shows or hides a calendar based on a drop down select form. I have it set to run my showHideCalendar() function as an onchange action on the drop down selection. When I change the selected option I receive an "Object expected" error. I have included the relevant HTML and JavaScript code.
<script type="text/javascript" language="javascript">
function showHideCalendar(element) {
document.getElementById("calendar").style.display = "none";
if (document.getElementById("dropdown").selectedIndex === 13) {
cal5.popup();
document.getElementById("textField").value = "";
document.getElementById("calendar").style.display = "inline";
}
}
</script>
<FORM NAME='Labs' METHOD='POST' ACTION="">
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>
<option value='NoReorder'>Do Not Reorder</option>
<option value='2012-06-14 08:40:39.067'>Today</option>
<option value='2012-06-21 08:40:39.067'>1 Week</option>
<option value='2012-06-28 08:40:39.067'>2 Weeks</option>
<option value='2012-07-05 08:40:39.067'>3 Weeks</option>
<option value='2012-07-12 08:40:39.067'>4 Weeks</option>
<option value='2012-07-26 08:40:39.067'>6 Weeks</option>
<option value='2012-07-14 08:40:39.067' selected>1 Month</option>
<option value='2012-08-14 08:40:39.067'>2 Months</option>
<option value='2012-09-14 08:40:39.067'>3 Months</option>
<option value='2012-10-14 08:40:39.067'>4 Months</option>
<option value='2012-12-14 08:40:39.067'>6 Months</option>
<option value='2013-03-14 08:40:39.067'>9 Months</option>
<option value='custom' id='custom'>Calendar Select</option>
</select>
<div id='calendar' style='display:inline'>
<input type=text name='StartDate' value='' size=20 onchange='inputChanged()' onkeydown='inputChanged()' onblur='inputChanged()' id='textField'>
<a href='javascript:cal5.popup();' onmousedown='inputChanged()'> <img src='/jscalendar/img/cal.gif' width='16' height='16' border='0' alt='Click Here to Pick up the date'></a>
</div>
<input type=checkbox name=SameDate value='on' checked onClick='SetTimeFrame(document.Labs.TimeFrame0)'> Use Same Date For All Labs
<input class='btnsave' type=button name=Save value='Reorder Labs' onClick=javascript:document.Labs.action='/LabReview/Reorder.php?PROV=PROVID&MaxCount=2&Text=1';document.Labs.submit();>
<input class='btncancel' type=button name=Cancel value=Cancel onClick=javascript:top.window.close()>
</FORM>
Does anyone see any reason why this is not working. The error is thrown on the line <select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>.
One of the answerers thinks the error isn't in my new code, but rather something else on the page. I am editing my question to add the rest of the javascript that is on the page.
<script type="text/javascript" language="javascript">
function showHideCalendar(element) {
document.getElementById("calendar").style.display = "none";
if (document.getElementById("dropdown").selectedIndex === 13) {
cal5.popup();
document.getElementById("textField").value = "";
document.getElementById("calendar").style.display = "inline";
}
}
function inputChanged() {
document.getElementById("dropdown").selectedIndex = 13;
}
function SetTimeFrame(element)
{
if (document.Labs.SameDate.checked==true)
{
var Elements=document.Labs.elements.length;
for (var i=0; i<Elements; i++)
{
if (document.Labs.elements[i].type=='select-one')
{
document.Labs.elements[i].options[element.selectedIndex].selected=true;
}
}
}
}
if (top.window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>"))
{
if ('<?php echo($Reviewed); ?>' == 'yes')
{
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
else if ('<?php echo($Reviewed); ?>' == 'partial')
{
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
}
else
{
var temp=top.window.opener.location.href;
top.window.opener.location.href=temp;
top.window.opener.top.window.location.reload();
}
function DateCheck(element)
{
var xx = element.value;
var re = new RegExp("^[0-9][0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]$");
var re2 = new RegExp("^[0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]$");
var re3 = new RegExp("^[0-9][0-9]/[0-9]/[0-9][0-9][0-9][0-9]$");
var re4 = new RegExp("^[0-9]/[0-9]/[0-9][0-9][0-9][0-9]$");
var error = "";
var maxdays = new Array(0,31,29,31,30,31,30,31,31,30,31,30,31);
var retval = true;
if(element.value != "")
{
if(xx.search(re) < 0 && xx.search(re2) < 0 && xx.search(re3) < 0 && xx.search(re4) < 0)
{
error = "Invalid Date Format " + xx + ". Please enter dates in the format mm/dd/yyyy."
retval = false;
element.value = ""
}
else
{
var list = xx.split("/");
var month = list[0];
if(month.charAt(0) == "0")
month = month.substr(1);
if( list[0] < 1 || list[0] > 12)
{
error = "Invalid Month " + list[0];
retval = false;
element.value = ""
}
else
if(list[1] < 1 || list[1] > maxdays[month])
{
error = "Invalid Day " + list[1];
retval = false;
element.value = ""
}
else
if(list[2] < 1900)
{
error = "Invalid Year (Must be greater than 1900) " + list[2];
retval = false;
element.value = ""
}
}
if(!retval)
alert(error);
return retval;
}
}
</script>

Change:
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>
To:
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(this)'>

It turns out the problem was caused by the following block of code.
if (top.window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>")) {
if ('<?php echo($Reviewed); ?>' == 'yes')
{
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
else if ('<?php echo($Reviewed); ?>' == 'partial')
{
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
}
else
{
var temp=top.window.opener.location.href;
top.window.opener.location.href=temp;
top.window.opener.top.window.location.reload();
}
When I removed that from the code, it worked like a charm. Thanks to everyone for their suggestions and thoughts.