<form name="myform" action="#" method="post">
<div class="col-md-4">
<div class="col-md-4 desc">Naziv marke: </div>
<div class="col-md-8">
<select class="form-control" id="brandovi">
<option value="AllBrands" selected>Sve marke</option>
<option value="Dunlop">Dunlop</option>
<option value="Fulda">Fulda</option>
<option value="Goodyear">Goodyear</option>
<option value="Sava">Sava</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<input type="radio" autocomplete="off" name="season" value="Summer"> <img width="20" src="img/ikone/summer.png" />
<input type="radio" autocomplete="off" name="season" value="AllSeason"> <img width="20" src="img/ikone/allSeason.png" />
<input type="radio" autocomplete="off" name="season" value="Winter"> <img width="20" src="img/ikone/winter.png" />
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 desc">Tip vozila:</div>
<div class="col-md-8">
<select class="form-control">
<option value="AllTypes"> Sve vrste </option>
<option value="fourxfour"> 4x4</option>
</select>
</div>
</div>
<div class="col-md-2 text-right">
<input type="submit" name="submit" value="Traži"/>
</div>
</form>
I have this in HTML, so I need javascript code that will output custom URL depending on selected values
Url example
http://link.com/?brandovi=sava&sezona=zima&vrstaVozila=4x4
I tried several JS codes but I could not make it.
Please help.
I solved the problem :D
Here is the solution
<script type="text/javascript">
function submitUrl(form){
var brandovi = document.getElementById("brandovi");
var brand = brandovi.options[brandovi.selectedIndex].value;
var vrsteVozila = document.getElementById("vrsteVozila");
var vrsta = vrsteVozila.options[vrsteVozila.selectedIndex].value;
var radios = document.getElementsByName('season');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var sezona = radios[i].value;
}
else{
var sezona = '';
}
}
window.location = 'http://localhost/wordpress/' + '?brandovi=' + brand + '&sezona=' + sezona + '&vrstaVozila=' + vrsta;
}
Related
I'm trying to insert multiple row data in two DB tables using single click but this code insert only one row at a time. When i try dd($request->all()); i got data in array but insert only one row. What is the problem and how can i fix it?
protected $table = 'biniyojan';
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
#foreach ($bini as $bi)
#endforeach
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
{{-- message --}}
{!! Toastr::message() !!}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
As #aynber pointed at, you need to move the line $biniyojan_details = new BiniyojanDetails(); inside the loop so it initiate a new object for each iteration.
Another solution would be to insert all the entries in the same time(better performance). For that, we prepare the data to be inserted first
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojanDetailsToBeInserted = [];
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details = [];
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details['debit_credit'] = $request->debit_credit[$i];
//$biniyojan_details['debit_credit_type'] = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojanDetailsToBeInserted[] = $biniyojan_details;
}
}
if ($biniyojanDetailsToBeInserted) {
BiniyojanDetails::insert($biniyojanDetailsToBeInserted);
}
return redirect()->back()->with('status', 'Inserted');
}
Your code create only one row but the noticeable thing is that it create one row but with last data of the array.
Because you are not making object inside the loop it is outside of the loop so the loop runs on the same object and update its properties each time loop runs and save it.
Make object inside the loop so it make new object each time which means it will create new row each time instead of updating the same row.
There is a better way for this if you have same names of your array keys as database table columns.
Biniyojan::insert($request->data);
It works like this.
User::insert([
['name' => 'John', 'email' => 'john#example.com'],
['name' => 'Marina', 'email' => 'marina#example.com'],
]);
How can I use document.write to display a value from the drop down menu in
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
Is this even possible? How can I accomplish this goal? On the next page I need to _GET the 'rate' and I cannot figure out how to pass it into the value.
When the forms submitted this code is used to send the user to the URL in the value=""
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
goBtn.onclick = function() {
window.location = menu.value;
}
Here is the HTML I am working with.
<script>
function getRate() {
var rate = document.getElementById("s2").value;
</script>
<div class="row">
<div class="col-md-12">
<div class="subscribe-block">
<div class="row">
<form class="form-horizontal" role="form" id="subscribeForm">
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Insurance Plan</div>
<select id="s1" class="form-control input-lg">
<option value="jmp.php?type=auto&rate=<script>document.write(rate)</script>">Auto Insurance</option>
<option value="jmp.php?type=health&rate=<script>document.write(rate)</script>">Health Insurance</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset style="margin-top: -1.1em">
<div style="color: #fff;">Estimated Current Payment</div>
<select name="s2" id="s2" class="form-control input-lg">
<option>$5</option>
<option>$10</option>
<option>$20</option>
<option>$30</option>
<option>$40</option>
<option>$50</option>
<option>$60</option>
<option>$70</option>
<option>$80</option>
<option>$90</option>
<option>$100</option>
<option>$110</option>
<option>$120+</option>
</select>
</fieldset>
</div>
<div class="col-sm-4">
<input style="color: #fff;" id="search" placeholder="Continue >>" class="btn btn-warning btn-block btn-lg">
</div>
<script>
var goBtn = document.getElementById("search");
var menu = document.getElementById("s1");
var myObject = {
"value1": "jmp.php?type=auto&rate=<script>document.write(rate)<\/script>",
"value2": "jmp.php?type=health&rate=<script>document.write(rate)<\/script>"
}
goBtn.onclick = function() {
window.location = myObject[menu.value];
}
</script>
<select id="s1" class="form-control input-lg">
<option value="value1">Auto Insurance</option>
<option value="value2">Health Insurance</option>
</select>
In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>
I want to disable the text box when the checkbox is checked for the appended text box. The hard coded text box is disabled when the checkbox is checked.
Run the code snippet to see the outcome or view the screenshots shown below.
Below is the main.js and main.html file
<!--main.js-->
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox()"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox() {
var checkElement = document.getElementById('venueTB');
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
<!--main.html-->
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
actual outcome
expected outcome
it's because document.getElementById('venueTB') returns the first element in the DOM with id="venueTB".
Try to add classes to all the checkboxes, and get them by calling
document.querySelectorAll('.class-name')
Another thing, in checkBox() function, i think it should be:
var checkDisabled = checkElement.disabled == true;
instead of:
var checkDisabled = checkElement.disabled = true;
The IDs must be unique. Because you have inline js functions you can change from:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()">
To:
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
In this way you will pass:
the event object
this: the current DOM object
In this way your function can be:
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
var checkDisabled = checkElement.disabled = true;
if (checkElement != null && checkDisabled) {
checkElement.value = "-NO VENUE-";
}
}
The snippet:
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox(event, this)"> <label for="venueChk' + counter + '" >No Venue</label> </div>';
document.getElementById('newProg').appendChild(objNewDiv);
}
function removeProg() {
if (0 < counter) {
document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter));
counter--;
} else {
alert("No boxes to remove");
}
}
function checkBox(e, obj) {
var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0];
if (obj.checked) {
checkElement.disabled = true;
checkElement.value = '-NO VENUE-';
} else {
checkElement.disabled = false;
checkElement.value = '';
}
}
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<p>OR</p>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input id="venueTB" type="text" value="" placeholder="Venue" />
</div>
</div>
<div class="2u 12u$(medium)">
<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)">
<label for="venueChk">No Venue</label>
</div>
</div>
<div id="newProg"></div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()">
<div style="font-size: 35px">+</div>
</a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()">
<div style="font-size: 35px">-</div>
</a>
</div>
</div>
in this piece of code i have 2 dropdown lists. one is department and the other is section name. on the basis of department i am changing my section name accordingly and then pushing these two dropdown list's values into my form's input.
The problem is that onchange event is working fine in chrome but not in firefox if you use keyboard(tab key and arrow keys) only. how can i fix this without adding jquery??
function fields(){
var seldprt = document.getElementById("seldprt");//seldprt is for Department
var section = seldprt.value;//assigning the value of Department dropdown list to section variable
var dprt_input=section;
var input_Department=document.getElementById("departmentinput");
input_Department.value=dprt_input;
if(section=="REGULATORY")
{
document.getElementById("LEGALDiv").style.display="none";
document.getElementById("REGDiv").style.display="";
var subsection=document.getElementById("REGDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
else if(section=="LEGAL")
{
document.getElementById("LEGALDiv").style.display="";
document.getElementById("REGDiv").style.display="none";
var subsection=document.getElementById("LEGALDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}
<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event -->
<label>Department Name:</label>
<div align="right" class="selectdiv">
<select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();">
<option value = "LEGAL">LEGAL</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="REGDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()">
<option value = "GLT">GLT</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="LEGALDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv" >
<select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()">
<option value = "GLT">GLT</option>
<option value = "LEGAL">LEGAL</option>
</select>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()" style="">Name</div>
<input type="text" style="" name="name" id="departmentinput">
<div class="entry" style="" onclick="previous_values()">Section Number</div>
<input type="text" style="" name="Section" id="subcatagoryinput">
<div id="readwrite_buttons" class="hide">
<button id="ok" onclick="document.forms[0].submit();return false;">OK</button>
<button id="cancel" onclick="javascript:window.close();return false;">Cancel</button>
</div>
<div id="readonly_buttons" class="hide">
<button id="back" onclick="javascript:window.close();return false;">Back</button>
</div>
</form>
The onkeyup event should do what you're trying to do. It's could potentially generate a lot of events, so I would consider carefully whether it's really necessary. I saw that you tried the onkeypress event in your snippet. For reasons unknown to me, at least in firefox, it doesn't seem to catch the up/down arrows while onkeyup and onkeydown apparently do.
function fields(){
var seldprt = document.getElementById("seldprt");//seldprt is for Department
var section = seldprt.value;//assigning the value of Department dropdown list to section variable
var dprt_input=section;
var input_Department=document.getElementById("departmentinput");
input_Department.value=dprt_input;
if(section=="REGULATORY")
{
document.getElementById("LEGALDiv").style.display="none";
document.getElementById("REGDiv").style.display="";
var subsection=document.getElementById("REGDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
else if(section=="LEGAL")
{
document.getElementById("LEGALDiv").style.display="";
document.getElementById("REGDiv").style.display="none";
var subsection=document.getElementById("LEGALDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}
<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event -->
<label>Department Name:</label>
<div align="right" class="selectdiv">
<select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();">
<option value = "LEGAL">LEGAL</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="REGDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()">
<option value = "GLT">GLT</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="LEGALDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv" >
<select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()">
<option value = "GLT">GLT</option>
<option value = "LEGAL">LEGAL</option>
</select>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()" style="">Name</div>
<input type="text" style="" name="name" id="departmentinput">
<div class="entry" style="" onclick="previous_values()">Section Number</div>
<input type="text" style="" name="Section" id="subcatagoryinput">
<div id="readwrite_buttons" class="hide">
<button id="ok" onclick="document.forms[0].submit();return false;">OK</button>
<button id="cancel" onclick="javascript:window.close();return false;">Cancel</button>
</div>
<div id="readonly_buttons" class="hide">
<button id="back" onclick="javascript:window.close();return false;">Back</button>
</div>
</form>