onchange event not working in firefox - javascript

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>

Related

How can i put a form inside a div and see question by questions

i have a form with 13 questions but i would like to put it inside a small div, so i can see first the question 1, with an right arrow go to question 2, then to question 3. With a left arrow go back to last question.
I am new with this so i would appreciate your help. Thanks
This is a piece of my form and my sad try
Iam using back-1 back-2 to exchange background images
$(".right-arrow").on('click', () => {
$("#interview-map").attr("hidden", "")
$(".titulo").attr("hidden", "")
$(".fuentestyle").removeAttr('hidden')
$(".container").removeClass("back-1").addClass("back-2")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container back-1 py-3 h-100">
<div class="location-container col-12">
<label for="inputAddress2" class="titulo form-label">¿Whats your address? </label>
<div id="interview-map" class="row">
<div class="locate">
<p>show my position</p>
<input id="track" type="checkbox" />
</div>
</div>
<img class="right-arrow" src="assets/img/right_arrow.png" alt="">
</div>
<div class="col-md-12">
<form id="form_interview" class="col-lg-12 row g-3 mx-10 my-10">
<div id="interview-address" class="fuentestyle col-12" hidden>
<label for="referencia" class="form-label">Add your address: </label>
<input type="text" class="form-control" id="referencia" placeholder="Reference">
</div>
<div class="mb-3" hidden>
<label for="disabledSelect" class="form-label">¿Question fuente?</label>
<select id="fuente" class="form-select form-select-sm" aria-label=".form-select-sm example">
<option id="fuente-0" selected class="form-control"></option>
<option id="fuente-1" value="1"></option>
<option id="fuente-2" value="2"></option>
<option id="fuente-3" value="3"></option>
<option id="fuente-4" value="4"></option>
</select>
</div>
<div class="mb-3" hidden>
<label for="disabledSelect" class="form-label">Question construido</label>
<select id="construido" class="form-select form-select-sm" aria-label=".form-select-sm example">
<option id="construido-0" selected class="form-control"></option>
<option id="construido-1" value="1"></option>
<option id="construido-2" value="2"></option>
</select>
</div>
<div class="col-12" hidden>
<label for="dias_agua" class="form-label">Question dias_agua </label>
<input type="text" class="form-control" id="dias_agua" placeholder="Enter a number">
</div>
<div class="col-12" hidden>
<label for="horas_agua" class="form-label">Question horas_agua </label>
<input type="text" class="form-control" id="horas_agua" placeholder="Enter a number to 24">
</div>
Personally I would try to make my application more data driven, but if you cannot change the form itself, then you could do something like this...
let index = 1;
function back() {
index--;
update();
}
function next() {
index++;
update();
}
function update() {
// Find all questions
const questions = document.querySelectorAll("[id^='question-']");
// Hide all questions
questions
.forEach(question => {
question.style.display = "none";
});
// Show the active question
const activeQuestion = document.getElementById("question-" + index);
if (activeQuestion != null)
activeQuestion.style.display = "block";
// Hide/Show the buttons according to which question is being shown
document.getElementById("back").style.display = index <= 1 ? "none" : "block";
document.getElementById("next").style.display = index >= questions.length ? "none" : "block";
}
update();
<div id="question-1">Question 1</div>
<div id="question-2">Question 2</div>
<div id="question-3">Question 3</div>
<div id="question-4">Question 4</div>
<div id="question-5">Question 5</div>
<button id="back" onclick="back()">Back</button>
<button id="next" onclick="next()">Next</button>
Note:
The solution above uses native javascript (jQuery is not necessary).
This code could be written more efficiently, for example you don't really have to query for all questions on each update. Instead, you could do this once when the page is loaded.

How do I display a JS value in the <option value="url here & js here">

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>

Get value of textfield after selecting option

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);

using javascript to grab multiple id's

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>

Javascript - custom url depending on selected option

<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;
}

Categories