i have this code which changes the input type of my textfield between email and text.
<div id ="info_input" class="container">
<form class="col s12">
<div class="row">
<div style="padding-top: 15px;padding-left: 50px" class="col s6 l4">
<select class = "source">
<option value="" disabled>Choose your option</option>
<option value="select_id">ID</option>
<option value="select_email">EMAIL</option>
</select>
<label>INPUT SELECTION</label>
</div>
<div class="input-field col s6 l5">
<div id = "source_input_field_id_div">
<input id="source_input_field" type="text" class="validate" required>
<label for="source_input_field_id">ID</label>
</div>
<div id = "source_input_field_email_div">
<input id="source_input_field" type="email" class="validate" required>
<label for="source_input_field_email">Email</label>
</div>
</div>
<div style="padding-top: 15px">
<a onclick="getInfo()"; class="waves-effect waves-light btn">button</a>
</div>
</div>
</div>
then my type-change code
<script type="text/javascript">
$(document).ready(function(){
//hide email form
$("#source_input_field_email_div").hide();
$("select.source").change(function(){
var selectedSource = $(".source option:selected").val();
if(String(selectedSource) == 'select_id'){
$("#source_input_field_id_div").show();
$("#source_input_field_email_div").hide();
}
else{
$("#source_input_field_id_div").hide();
$("#source_input_field_email_div").show();
}
});
});
</script>
I have a button when clicked must log which field value must be logged
function getInfo(){
var input_value = document.getElementById('source_input_field').value;
console.log(input_value);
}
the only value the button gets is with the ID tag. any turn around for this?
EDIT:
change my get Info to get the right text. chamged the id of both textfield
if(String(selectedSource) == 'select_id'){
input_value = document.getElementById('source_input_field_id').value;
}
else{
input_value = document.getElementById('source_input_field_email').value;
}
console.log(input_value);
Related
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>
I have a bootstrap html page that contains already 2 auto update text field functions for its needs. Along with that I added another fields in a modal to complete the page and requires another auto calculation to be populated on a certain text field.
Base form for first and 2nd instance of auto update
<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Item</label>
<select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
<option value="" selected disabled>Select Item</option>
<?php
//some sql function for fetch
echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
}
}
?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//FIRST INSTANCE AUTO UPDATING TEXT FIELD
<label for="exampleInputEmail1">Price (ea)</label>
<input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Quantity</label>
<input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//2ND INSTANCE AUTO UPDATING TEXTFIELD
<label for="exampleInputEmail1">Total</label>
<input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group" align="right">
<button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
</div>
</div>
</form>
Modal window 3rd instance
<!--create confirmation modal window-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<b>Final Check</b>
</div>
<div class="modal-body">
<div class="row">
<form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<!-- hidden for purpose of change auto calc -->
<input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Received</label>
<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//3RD INSTANCE AUTO UPDATE NOT WORKING
<label for="exampleInputEmail1">Change</label>
<input type="text" class="form-control" id="thechange" name="thechange" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
<!--end modal-->
JQUERIES
For first instance (working)
<script type="text/javascript">
function GenPrice(data) {
var xprice = data.value;
var zprice = xprice.split("|");
document.getElementById ("eaprice").value = zprice[0];
document.myForm.eaprice.value = zprice[0];
}
</script>
For second instance (working) based from Calculate total value inline form
<script type="text/javascript">
/* total value calculator */
$(document).ready(function () {
//Calculate both inputs value on the fly
$('.calculate').keyup(function () {
var Tot = parseFloat($('#eaprice').val()) * parseInt($('#quantity').val());
if(isNaN(Tot)) Tot = "";
$('#ztotal').val(Tot);
});
//Clear both inputs first time when user focus on each inputs and clear value 00
$('.calculate').focus(function (event) {
$(this).val("").unbind(event);
});
});
</script>
For third instance (not working) based from auto calculate total value
<script type="text/javascript">
$(document).ready(function(){
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '')
{
total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
}
});
$('#thechange').html(total);
});
})(jQuery);
</script>
I'm not sure why the 3rd instance which is inside a modal window doesn't auto update at all given ive just made a separate jquery class for it. Thanks in advance for further suggestions.
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '') {
total += parseFloat($(this).val());
}
});
var totalFinal = total - parseFloat($('#thetotal').val());
$('#thechange').val(totalFinal);
});
I have a table that lists all of the users invoices, and each invoice contains a pay button to allow them to pay the bill.
I currently have a loop that goes through each invoice and displays each invoice in its own row, and when a user goes to click on the pay button the JavaScript will show a selection box to use a saved card or a new card, if the user chooses a saved card then the JavaScript will show the other select box containing their saved cards, if the new card is chosen then the other input fields will be displayed, right now the showing and hiding part when selecting a saved card or new card ONLY works for the very first row in the table, no other rows work with that JavaScript, I'm sure its because JavaScript is grabbing that first id and stopping there. How can I do this correctly to where it grabs all of the ids and runs the code when the user chooses a saved card or new card on each invoice?
I created a JSFiddle to show my exact situation, can someone modify it to where it will work? I would really appreciate it!
https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
#if($payments)
#foreach($payments as $payment)
<tr>
<td>${{number_format(($payment->price /100), 2, '.', ' ')}}</td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
#if($payment->status == "Paid")
#else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
#if($payment->reoccurring == "Yes")
Subscribe
#else
Pay Here
#endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
#endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function () {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
Advice: use jQuery. For situations like this, it significantly simplifies the js function part of it.
jsFiddle Solution: https://jsfiddle.net/brednmuc/4/
Brief Description:
Move away from using HTML IDs for everything and just make attributes that make the most sense for your web application. This methodology allows you to practically define an unlimited number of attributes that you can key certain behaviors off of. This also prevents conflicts with libraries that you may use / integrate with your project.
Code:
jQuery:
$(document).ready(function() {
$("select[name='paymentMethod']").change(function() {
var dropdownValue = $(this).val();
var transactionId = $(this).parent().attr('transactionId');
switch (dropdownValue) {
case 'Saved Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").show();
break;
case 'New Card':
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
default:
$("td[transactionId='" + transactionId + "'] div.savedCardsDiv").hide();
break;
};
});
});
HTML:
<table>
<tr>
<td transactionId="1">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
<tr>
<td transactionId="2">
<select name="paymentMethod" form="carform" class="paymentMethod">
<option value="">Select your option</option>
<option value="Saved Card">Saved Card</option>
<option value="New Card">New Card</option>
</select>
<div class="savedCardsDiv" style="display: none;">
<select name="savedCards" form="carform" class="savedCards">
<option value="">Select your option</option>
<option value="Saved Card">****4242</option>
<option value="New Card">****5423</option>
</select>
</div>
</td>
</tr>
</table>
I currently have a dropdown field that onchange will input the value.
function CurrentStatusChanged() {
var currentS1 = document.getElementById("currentStatus1").value;
var currentS2 = document.getElementById("currentStatus2").value;
document.getElementById("currentStatusView1").innerHTML = "You selected: " + currentS1;
document.getElementById("currentStatusView2").innerHTML = "You selected: " + currentS2;
}
I have many fieldsets created and then correct fieldset needs to show dependent on the what selected in the dropdown box.
My question is:
What is the best approach? As I don't feel innerHTML then all of the code is good practise.
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
I am trying to add a field set like the one above to a container, however i have at least 12 that change dependent on the drop-down. kindisch answer doesn't allow mt use the complete field set but is on the right track i believe.
Use templates for that. For example:
var storage = [],
select = document.getElementById("selection"),
container = document.getElementById("container");
select.addEventListener("change", function() {
var _id = select.value,
_tpl = document.getElementById(_id);
save();
container.innerHTML = _tpl.innerHTML;
update();
}, false);
// Save current state
function save() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
storage[_fields[i].name] = _fields[i].value;
}
}
// Fill input fields of element
function update() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
if (_fields[i].name in storage) {
_fields[i].value = storage[_fields[i].name];
}
}
}
<select id="selection">
<option value="status-one">One</option>
<option value="status-two">Two</option>
<option value="status-three">Three</option>
</select>
<div id="container"></div>
<script type="text/html" id="status-one">
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
</script>
<script type="text/html" id="status-two">
<p>This is status two.</p>
</script>
<script type="text/html" id="status-three">
<p>This is status three.</p>
</script>
could you use html5 data attributes? https://jsfiddle.net/hj6bbgbd/
<select id="mySelect" onchange="myFunction()">
<option value="1" data-text = "text for choice one">One</option>
<option value="2" data-text = "text for choice two">Two</option>
<option value="3" data-text = "text for choice three">Three</option>
</select>
<fieldset>
<fieldset>
<legend>My Legend:</legend>
<p id="demo"> text for choice one </p>
</fieldset>
<script>
function myFunction() {
var sel = document.getElementById('mySelect');
var opt = sel.options[sel.selectedIndex];
document.getElementById("demo").innerHTML = opt.dataset.text;
}
</script>
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>