Symfony 4 - How to remove choice on twig with Javascript? - javascript

I've a symfony 4 project with my form.
In my formType, I've a choiceType like :
->add('momentDebut', ChoiceType::class, [
'choices' => [
"matin" => "matin",
"après-midi" => "après-midi",
"journée" => "journée"
],
In my twig, I have a select :
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
with onChange function which display or not some elements.
When I select "Du xx au xx", I would like my 'momentDebut'show all the choices except 'day'.
EDIT:
My Twig :
//...
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
//...
<div id="momentDebut">
<div class="row">
<div class="col">
{{form_row(form.dateDebut)}}
</div>
<div class="col">
{{form_row(form.momentDebut)}}
</div>
</div>
</div>
//...
EDIT2 : My (matin,après-midi,journée) HTML in the source-code:
<div id="absence_momentDebut">
<div class="form-check">
<input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin">
<label class="form-check-label required" for="absence_momentDebut_0">matin</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi">
<label class="form-check-label required" for="absence_momentDebut_1">après-midi</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée">
<label class="form-check-label required" for="absence_momentDebut_2">journée</label>
</div>
</div>
I updated my code like this :
function choiceDay(select) {
var valeur = select.options[select.selectedIndex].value;
var targetSelect = document.querySelector('[name="absence[momentDebut]"]');
var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
console.log(targetSelect.value);
console.log(targetOption);
// var choice = $('#choiceMomentDebut').text();
// console.log(choice);
switch (valeur) {
case "periode":
document.getElementById("absence").style.visibility = "visible";
document.getElementById("momentDebut").style.visibility = "visible";
document.getElementById("momentFin").style.visibility = "visible";
if (targetOption.value == "journée") { // Reset the selection to the default if it's currently selected
targetSelect.selectedIndex = 0;
}
// Disable the selection
targetOption.setAttribute('disabled', true);
break;
case "jour":
document.getElementById("absence").style.visibility = "visible";
document.getElementById("momentDebut").style.visibility = "visible";
document.getElementById("momentFin").style.visibility = "hidden";
targetOption.removeAttribute('disabled');
break;
default:
break;
}
}
And it seems work !
The problem was about this line :
targetOption = targetSelect.querySelector('option[value="journée"]');
I replaced it by
var targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
And now, all is good !
Thanks for your help !!

Although is not exactly removing the option as you ask one possible solution is to just disable it, preventing from being selected, which is a little easier.
function choiceDay(el) {
targetRadio = document.querySelector('[name="absence[momentDebut]"]:checked');
targetOption = document.querySelector('[name="absence[momentDebut]"][value="journée"]');
if (el.value == "periode") {
if (targetOption == targetRadio) {
// Uncheck if it's currently selected
targetOption.checked = false;
}
// Disable the selection
targetOption.setAttribute('disabled', true);
} else {
targetOption.removeAttribute('disabled');
}
}
<select class="browser-default custom-select" id="choiceUser" onchange="choiceDay(this)">
<option value="" disabled selected>Choisissez la durée de l'absence</option>
<option value="jour">La journée</option>
<option value="periode">Du xx au xx</option>
</select>
<div id="absence_momentDebut">
<div class="form-check">
<input type="radio" id="absence_momentDebut_0" name="absence[momentDebut]" required="required" class="form-check-input" value="matin">
<label class="form-check-label required" for="absence_momentDebut_0">matin</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_1" name="absence[momentDebut]" required="required" class="form-check-input" value="après-midi">
<label class="form-check-label required" for="absence_momentDebut_1">après-midi</label>
</div>
<div class="form-check">
<input type="radio" id="absence_momentDebut_2" name="absence[momentDebut]" required="required" class="form-check-input" value="journée">
<label class="form-check-label required" for="absence_momentDebut_2">journée</label>
</div>
</div>
However you end up doing it, you should add some validation in php, since you could submit any value with javascript disabled. You can find several questions about this.

Related

How to show radio button after selecting option

I have a form with several inputs like below
This is the value from Jenis Layanan
When I choose value from Jenis Layanan, if I choose Corporate, I want to add new field radio button below jenis layanan. And if I choose Perorangan or Home Visit, radio button dissapear.
How can I make it work like this?
My code
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>
You have to write some JS to your form with event listener:
document.querySelector('#sub_product').addEventListener('change', () => {
// your code
})
I made codepen for you with an example:
https://codepen.io/VeterJS/pen/BaRvYYx
Is easier with jQuery, when the Corporate option is selected the div display containing the radio buttons is changed to block and when other option is selected then the display goes back to none which hides the element.
$("select").change(function() {
let option = '';
$("select option:selected").each(function() {
option = $( this ).text();
});
if(option == 'Corporate'){
$('#radioBTNS').css('display','block')
}else{
$('#radioBTNS').css('display','none')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div id="radioBTNS" style="margin:10px;display:none">
<input type="radio" id="age1" name="age" value="30">
<label for="age1">Radio btn one</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">Radio btn two</label><br>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>

How to make both event listeners work

What I am trying to be is make the first event listener use it on change when you change the option and then once you fill out the form make it pop out at the bottom of the page. I can only use Vanilla Javascript. Also if you select anything other then the 5th option it will turn gray and not be able to select any of the radio buttons. Then you fillout the form and I can't have the form submit I have to have it just drop down with innerHTML.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" disabled>
<label class="form-check-label" for="exampleRadios1">
Red Fleet
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="white" disabled>
<label class="form-check-label" for="exampleRadios2">
White Fleet
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" disabled>
<label class="form-check-label" for="exampleRadios3">
Blue Fleet
</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-
describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", init, false);
function init(e) {
e.preventDefault;
document.getElementById("select").addEventListener("change", start);
}//end init function
//main algorithm
function start(e) {
e.preventDefault;
short();
//child one
function short(e) {
e.preventDefault;
var blue;
var white;
var red;
var select;
select = document.getElementById("select").value;
if (select == 1) {
document.getElementById("red").disabled = false;
document.getElementById("white").disabled = false;
document.getElementById("blue").disabled = false;
document.getElementById("btn").addEventListener("click", uhjeff);
}
else {
document.getElementById("red").disabled = true;
document.getElementById("white").disabled = true;
document.getElementById("blue").disabled = true;
document.getElementById("btn").addEventListener("click", uhjeff);
}
}
}
function uhjeff(e) {
var date;
var location;
var textbox;
e.preventDefault;
document.getElementById("dateout").innerHTML = document.getElementById("date").value;
document.getElementById("locationout").innerHTML = document.getElementById("location").value;
document.getElementById("textboxout").innerHTML = document.getElementById("textbox").value;
}
</script>
</body>
</html>
You had several errors. Please read the HTML and JavaScript comments inline below for corrections.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<!-- The "for" attribute of a <label> must match the "id" attribute of the
element that it is a label for. -->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
<label class="form-check-label" for="red">Red Fleet</label>
</div>
<div class="form-check">
<!-- radio buttons need to have a value for them to have meaning -->
<input class="form-check-input" type="radio" name="color" id="white" value="white" disabled>
<label class="form-check-label" for="white">White Fleet</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" value="blue" disabled>
<label class="form-check-label" for="blue">Blue Fleet</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="location">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="textbox">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
// If you script is located after all the HTML, then it is unecessary to set up a
// DOMContentLoaded event listener because, at this point, the DOM is loaded.
document.getElementById("select").addEventListener("change", start);
// Get the references to the DOM elements you'll be using just once:
var blue = document.getElementById("blue");
var white = document.getElementById("white");
var red = document.getElementById("red");
// You need a reference to the form, not the submit button, because it's the
// submit event of the form that you'll need to cancel later.
var form = document.querySelector("form");
var dateout = document.getElementById("dateout");
var date = document.getElementById("date");
var locationout = document.getElementById("locationout");
// location is a Global property of window, don't use it as a variable name
var loc = document.getElementById("location");
var textboxout = document.getElementById("textboxout");
var textbox = document.getElementById("textbox");
// You were setting the button's event handler in all cases, so it doesn't
// belong in an "if". Also, the button is a submit button, so handle the submit event
// of the form, not the click event of the button
form.addEventListener("submit", uhjeff);
//main algorithm
function start(e) {
// There is no reason to cancel the "change" event of the select.
// Also, since all this function does is call short(), just make this
// function have the contents of short()
// Since this is the change event handler for your select, you can access
// the select with the keyword "this"
if (this.value == 1) {
// You initially set the elements to be disabled with the disabled HTML attribute.
// To avoid confusion, modify the attribute, not the JavaScript property.
red.removeAttribute("disabled");
white.removeAttribute("disabled");
blue.removeAttribute("disabled");
} else {
red.setAttribute("disabled", "disabled");
white.setAttribute("disabled", "disabled");
blue.setAttribute("disabled", "disabled");
}
}
function uhjeff(e) {
e.preventDefault(); // .preventDefault() is a method, you need to add () after it.
// .innerHTML is for setting/getting strings that contain HTML
// Use .textContent when working with strings that don't have HTML
dateout.textContent = date.value;
locationout.textContent = loc.value;
textboxout.textContent = textbox.value;
}
</script>
</body>
</html>

Check/uncheck radio buttons and hide option when uncheck

I have 2 radio buttons which when I click on one of them I get dropdown menu where must choose amount.
So far I was able to make it check/unchek them but the problem is that when I uncheck the radio button dropdown doesn't hide again.
I'm not very good in javascript so please help on this one. Here is the part of code
<div class="radio">
<label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal
</div>
<div class="radio">
<label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</div>
</span>
Here is JS
$(document).ready(function(){
$("#paypal").change(function(){
var showOrHide =$(this).is(':checked');
$("#paypalamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#paypalamount',showOrHide )
});
$("#bank").change(function(){
var showOrHide =$(this).is(':checked');
$("#bankamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#bankamount',showOrHide )
});
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
});
And this is working demo of the code above JSFIDDLE
$(document).ready(function() {
$(":radio[name=bankpaypal]").change(function() {
if ($(this).is(':checked')) {
var name = $(this).attr('id')
$('span').hide()
$('span#' + name + 'amount').show()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" autocomplete="off" id="paypal" name="bankpaypal">
</label>PayPal
</div>
<div class="radio">
<label>
<input type="radio" autocomplete="off" name="bankpaypal" id="bank">
</label>Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount1" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount1" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
Name of radio button should be same to select only 1
ID should be unique
Get the selected radio button and show its counter select using its ID since they are similar
Use following code to check whether a radio button is checked or not
if($("input:radio[name=paypal]:checked").val())
alert("checked");
else
alert("Not checked");
Do your process of hiding and showing inside the if else conditions.
You only need to check for the value of a RadioButton as not checked. If unchecked set the style attribute display:none for the respective dropdown again in Javascript.
Just like you do it for the checked-Status of the RadioButton and just change the condition and the actions like you want the RadioButtons to behave.

Using the value of a dynamic <select> to show an <input type="text>

I am building a form for my business where I use two <select> fields (the 2nd <select> relies on values in the 1st <select> to populate it) and two <input type="text"> fields
The logic works like this, the user selects a location from the 1st <select>;
an "onchange" fires; and,
determines whether to:
a) show the second <select>; or,
b) the two input fields "Other Location" and "Other College".
This all works swimmingly well.
I run into problems when I try to use an "onchange" event in the dynamic <select> to test if the user selects "Other. The code that hides the 2nd <select> and the two <input> fields, breaks and show all 3 when they should be hidden.
Here is the code for dynamic1, this code does what its supposed to do, based on the value selected in "location"
function dynamic1(parent,child){
//You will have to adjust the parent arrays and the values assigned to them in order to insert the values of your choice
var parent_array = new Array();
parent_array[0] = ['Please select a location...'];
parent_array[1] = ['Please select a university ...' ,'Macquarie University','UNSW','AICE','Sydney University','Western Sydney University','UWS','Australian Catholic University','Other'];
parent_array[2] = ['Please select a university..','University of Newcastle','Australian Catholic University','Other'];
parent_array[3] = ['Please select a university ...','Central Coast TAFE','Language College','Other'];
parent_array[4] = ['Please select a university','ANU', 'University of Canberra','Australian Catholic University','Other'];
parent_array[5] = ['Please select a university ...','Melbourne University','Monash University','Deakin University','Victoria University','Swinburne University','RMIT','Australian Catholic University','Other'];
parent_array[6] = ['Please select a university ...','University of Queensland','QUT','Australian Catholic University','Other'];
parent_array[7] = ['Please select a university ...','Edith Cowan','Murdoch','University of WA','WAAPA', 'Other'];
parent_array[8] =['Please enter your city ...'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
/there is code above this that populates the dynamic <select> and has the css */
function handleCourseLocation(){
var e = document.getElementById('location');
var opt = e.options[e.selectedIndex];
var oln = document.getElementById('otherlocation');
var uni = document.getElementById('university');
var otuni = document.getElementById('otheruni');
if (opt.value == 0){
oln.style.display ="none";
uni.style.display ="none";
otuni.style.display ="none";
}
else if (opt.value==8){
oln.style.display ="";
uni.style.display ="none";
otuni.style.display ="";
}
else {
oln.style.display ="none";
uni.style.display ="";
otuni.style.display ="none";
}
}
/* this is the function that fails */
/*(function handleUni(){
var f=document.getElementById('university');
var optf = f.options[f.selectedIndex];
var otuni = document.getElementById('otheruni');
If (optf.text == "Other"){
otuni.style.display="";
}
else {
otuni.style.display="none";
}
} */
function dynamicCourse(parent, child){
dynamic1(parent, child);
handleCourseLocation();
}
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px; /* 40 px to provide clearance at the bottom for a bottom fixed navbar*/
padding-left: 10%;
padding-right:10%
}
select:invalid {
color: gray;
}
option:first {
color: gray;
}
</style>
</head>
<body onload="handleCourseLocation();">
<form class="form-horizontal">
<fieldset>
<legend>Details about you</legend>
<div class="control-group">
<label class="control-label" for="input-label">first name </label>
<div class="controls">
<input type="text" id="firstname" placeholder="e.g. Wendy, Min etc" maxlength="60" size="60"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">family name </label>
<div class="controls"</div>
<input type="text" id="lastname" placeholder="e.g. Xu, Smith etc" maxlength="60" size="60"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for ="input-label">your email </label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="email#somewhere.com" size="80"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your birthday </label>
<div class="controls">
<input type="date" id="birthdate"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">gender </label>
<div class="controls">
<select class="span1"id="gender"/>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">telephone </label>
<div class="controls controls-row">
<input class="span1" type="text" id="country" placeholder="61" maxlength="3"/>
<input class="span5" type="text" id="telnumber" placeholder="9999-9999" maxlength="10"/>
</div>
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your course</legend>
<p>We strive to make your travel time from your homestay to your institution to be less than 45 minutes. To achieve this we need to know when you start your course and where you will be studying when you are here.</p>
<div class="control-group">
<label class="control-label" for="input-label">start date </label>
<div class="controls">
<input type="date" id="cseStart"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">location </label>
<div class="controls controls-row">
<select class="span2" id="location" required onchange="dynamicCourse(this,'university');"/>
<option value = 0>Please select city or town ...</option>
<option value = 1>Sydney</option>
<option value = 2>Newcastle</option>
<option value = 3>Gosford/Central Coast</option>
<option value = 4>Canberra</option>
<option value = 5>Melbourne</option>
<option value = 6>Brisbane</option>
<option value = 7>Perth</option>
<option value = 8>Other city</option>
</select>
<input type = "text" id="otherlocation" placeholder="please type the city or town your college is in" maxlength ="60" size = "42"/>
<select class="span3" id="university" name="university" />
</select>
<input type = "text" id="otheruni" placeholder="please type your university or college" maxlength ="60" size = "42" />
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your homestay needs ...</legend>
<p>To help us find you a homestay family to meet your needs, we need to know a little more about what type of homestay you are looking for.</p>
</fieldset>
</form>
Any help would be appreciated...
Okay I made a few minor syntax changes and it seems to be working fine. Let me know if this isn't as expected.
<html>
<head>
<script>
function dynamic1(parent, child) { //You will have to adjust the parent arrays and the values assigned to them in order to insert the values of your choice
var parent_array = new Array();
parent_array[0] = ['Please select a location...'];
parent_array[1] = ['Please select a university ...', 'Macquarie University', 'UNSW', 'AICE', 'Sydney University', 'Western Sydney University', 'UWS', 'Australian Catholic University', 'Other'];
parent_array[2] = ['Please select a university..', 'University of Newcastle', 'Australian Catholic University', 'Other'];
parent_array[3] = ['Please select a university ...', 'Central Coast TAFE', 'Language College', 'Other'];
parent_array[4] = ['Please select a university', 'ANU', 'University of Canberra', 'Australian Catholic University', 'Other'];
parent_array[5] = ['Please select a university ...', 'Melbourne University', 'Monash University', 'Deakin University', 'Victoria University', 'Swinburne University', 'RMIT', 'Australian Catholic University', 'Other'];
parent_array[6] = ['Please select a university ...', 'University of Queensland', 'QUT', 'Australian Catholic University', 'Other'];
parent_array[7] = ['Please select a university ...', 'Edith Cowan', 'Murdoch', 'University of WA', 'WAAPA', 'Other'];
parent_array[8] = ['Please enter your city ...'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for (var i = 0; i < parent_array[parent_value].length; i++) {
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];
}
}
/*there is code above this that populates the dynamic <select> and has the css */
function handleCourseLocation() {
var e = document.getElementById('location');
var opt = e.options[e.selectedIndex];
var oln = document.getElementById('otherlocation');
var uni = document.getElementById('university');
var otuni = document.getElementById('otheruni');
if (opt.value == 0) {
oln.style.display = "none";
uni.style.display = "none";
otuni.style.display = "none";
} else if (opt.value == 8) {
oln.style.display = "";
uni.style.display = "none";
otuni.style.display = "";
} else {
oln.style.display = "none";
uni.style.display = "";
otuni.style.display = "none";
}
}
/* this is the function that fails */
function handleUni() {
var f = document.getElementById('university');
var optf = f.options[f.selectedIndex];
var otuni = document.getElementById('otheruni');
if(optf.text == "Other") {
otuni.style.display = "";
} else {
otuni.style.display = "none";
}
}
function dynamicCourse(parent, child) {
dynamic1(parent, child);
handleCourseLocation();
}
</script>
<style>
body {
padding-top: 60px;
/* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
/* 40 px to provide clearance at the bottom for a bottom fixed navbar*/
padding-left: 10%;
padding-right: 10%
}
select:invalid {
color: gray;
}
option:first {
color: gray;
}
</style>
</head>
<body onload="handleCourseLocation();">
<form class="form-horizontal">
<fieldset>
<legend>Details about you</legend>
<div class="control-group">
<label class="control-label" for="input-label">first name </label>
<div class="controls">
<input type="text" id="firstname" placeholder="e.g. Wendy, Min etc" maxlength="60" size="60" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">family name </label>
<div class="controls" </div>
<input type="text" id="lastname" placeholder="e.g. Xu, Smith etc" maxlength="60" size="60" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your email </label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="email#somewhere.com" size="80" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">your birthday </label>
<div class="controls">
<input type="date" id="birthdate" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">gender </label>
<div class="controls">
<select class="span1" id="gender" />
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">telephone </label>
<div class="controls controls-row">
<input class="span1" type="text" id="country" placeholder="61" maxlength="3" />
<input class="span5" type="text" id="telnumber" placeholder="9999-9999" maxlength="10" />
</div>
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your course</legend>
<p>We strive to make your travel time from your homestay to your institution to be less than 45 minutes. To achieve this we need to know when you start your course and where you will be studying when you are here.</p>
<div class="control-group">
<label class="control-label" for="input-label">start date </label>
<div class="controls">
<input type="date" id="cseStart" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="input-label">location </label>
<div class="controls controls-row">
<select class="span2" id="location" required onchange="dynamicCourse(this,'university');" />
<option value=0>Please select city or town ...</option>
<option value=1>Sydney</option>
<option value=2>Newcastle</option>
<option value=3>Gosford/Central Coast</option>
<option value=4>Canberra</option>
<option value=5>Melbourne</option>
<option value=6>Brisbane</option>
<option value=7>Perth</option>
<option value=8>Other city</option>
</select>
<input type="text" id="otherlocation" placeholder="please type the city or town your college is in" maxlength="60" size="42" />
<select class="span3" id="university" name="university" />
</select>
<input type="text" id="otheruni" placeholder="please type your university or college" maxlength="60" size="42" />
</div>
</fieldset>
<p> </p>
<fieldset>
<legend>Details about your homestay needs ...</legend>
<p>To help us find you a homestay family to meet your needs, we need to know a little more about what type of homestay you are looking for.</p>
</fieldset>
</form>
</div>
</fieldset>
</form>
</body>
</parent_array[parent_value].length;i++){>
</head>
</html>

DOM event chaining not working

So, any hints why this is not working?
I'm trying to get both input fields ('pagamento' and 'parcelas') at a preset if the 'Boleto' radiobox is selected, ('1' and 'MercadoPago', respectively, and back again to user input if the 'Cartão' radiobox is selected.
function boleto() {
if(document.getElementById('tipodepagamento').checked==true){
document.getElementById('pagamento').value = 'MercadoPago';
document.getElementById('pagamento').disabled = true;
document.getElementById('parcelas').value = '1';
document.getElementById('parcelas').disabled = true;
}
else{
document.getElementById('pagamento').disabled = false;
document.getElementById('parcelas').disabled = false;
}
}
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked onClick="boleto();">Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">Boleto
</label>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();" name="pagamento" id="pagamento">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas">
<option value="1">1x</option>
<option value="2">2x</option>
</select>
Fiddle = http://kodeweave.sourceforge.net/editor/#d692f9461c022ee386cb2c5329f453c4
I see a few problems with your code.
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto" onClick="boleto();">
<select class="form-control" onClick="fpagamento();validador();" onKeyUp="fpagamento();"
First off you shouldn't use onClick for a radio button, or a select element. use onChange instead which means you won't need to call onKeyUp="fpagamento();"
BTW: your code is very WET. In addition it's bad practice to add a onClick attribute in your html (same goes for other events). Put your javascript in a .js file and edit it there.
var tipodeconta = $('input[name=tipodeconta]'),
cartao = document.querySelector('#tipodepagamento2'),
pagamento = $('#pagamento'),
checkThis = $('.form-control');
tipodeconta.on('change', function() {
if (cartao.checked) {
pagamento.val('MercadoPago');
}
(cartao.checked) ? checkThis.prop('disabled', true) : checkThis.removeAttr('disabled');
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento2" value="Cartão" checked="">
Cartão de Crédito
</label>
</div>
<div class="col-md-6">
<label class="radio-inline">
<input type="radio" name="tipodeconta" id="tipodepagamento" value="Boleto">
Boleto
</label>
</div>
</div>
</div>
<label>Plataforma de Pagamento</label>
<select class="form-control" name="pagamento" id="pagamento" disabled="">
<option value="Selecione">Selecione</option>
<option value="Paypal">Paypal</option>
<option value="MercadoPago">Mercado Pago</option>
</select>
<label>Número de Parcelas</label>
<select class="form-control" id="parcelas" name="parcelas" disabled="">
<option value="1">1x</option>
<option value="2">2x</option>
</select>

Categories