Develop Reference

symfony event listener on change

My form contains a select field that contains two options: show and hide option:
I want when I select the show option, a text field should be appear in the form and if I select hide option, the text field should be disappear (hidden).
I ask which method should be used, any one has an example how doing this?

You certainly need Javascript to achieve this. Very simple working example using jQuery :
$(function() {
$('#type').change(function() {
if ($('#type').val() == 'show') {
$('#hidden_text').show();
} else {
$('#hidden_text').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option name="Show" value="show">Show</option>
<option name="Hide" value="hide">Hide</option>
</select>
<div class="row" id="hidden_text">
Hidden text
</div>
You may want to adapt this example to the ids used in your view so that the onChange event is triggered on your select field.

Select all text in textbox when label is clicked

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

Drop down box selection mutes/disables a text area?

I'm using Bootstrap 3 and HTML5 to create a web form. There's a section of the form where the user can select his "Method of delivery" via a drop-down box. The values are: Shop Pick-Up, FedEx, and Null. If the user selects FedEx, he shall then enter in his mailing address in the textarea titled "Shipping Address". However, since we do not need his mailing address if he selects "Shop Pick-Up" or "Null", is there a way to mute or grey-out the text box and only have it be writable if he selects "FedEx"?
Looking for ideas on how to approach this scenario.
My HTML:
<div class="col-xs-3">
<div class="form-group">
<label for="delivery">Method of delivery</label>
<select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
<option value="options" selected disabled>-Select-</option>
<option value="Shop Pick-Up">Shop Pick-Up</option>
<option value="FedEx">FedEx</option>
<option value="null">Null</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="shippingAddress">Shipping Address</label>
<textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>

You have a few options for dealing with non-required fields. The simplest option would be to add the attribute disabled to the textarea if they choose fedEx.
http://jsfiddle.net/dy4r3/
Your other option is to hide the non-required fields using $.fn.hide() and $.fn.show()
http://jsfiddle.net/ANKXA/
You can obviously expand on these solutions to make them a bit more elegant, but this should get you in the right direction.

You can use the change event and update the text box based on the selected value.
$('#delivery').on('change', function(e){
if($(this).val() == 'FedEx')
$('#shippingAddress').prop('disabled', false);
else
$('#shippingAddress').prop('disabled', true);
});

Give the shippingAddress element an id (it should have one for the label for)
Then you can set the disabled attribute when the select box changes
$('#delivery').change(function(){
$('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});

The disabled property of textarea can help you here.
Fiddle Demo
But showing and hiding would be better.
But there showing and hiding will make your form shake so apply some animation to avoid that or go with this approch but this approch also has some flaws as the user is nt directly clear when he will be allowed to enter the address.
I prefer going by show and hide as it is easy and informative.
Here is demo with show and hide

creating quiz jquery, function load options store quiz

code: http://jsfiddle.net/HB8h9/7/
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a true or false question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
//different file below used as main page
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});
trying to create a quiz using div elements from different file containing select option tags. Need to create a function which will load all the "appropriate div tags" according to the selected option and display the dropdown options again after each option has been selected. I'm not sure when to implement submit button either after each question type is loaded or somewhere between 5 - 10 questions. the submit button will "store" the questions selected into a quiz which will later be used for another user to answer.
I hope this makes sense, I'm not too familiar with jquery and any help would be highly appreciated.
Any other techniques which would be better suited are also welcomed.
thanks.

You must set an id to select element and hadle onChange event over this.
Somehting like:
$(document).ready(function(){
$('#selectionId').onChange(function(){
/*load new options into select element*/
$(this).append('option data-tab="tab-6">New option text</option>');
/*displaying desired div. Using HTML5 data attributes as in the fiddle*/
var selected=$(this).attr('data-tab');
if (selected==='tab-1'){
/*load or display tab-1 class div*/
}else...
});
});
You can have various html files with only the corresponding tab to load or in the same file you are defined the select element you can have the tab class divs with visibility attribute set to 'none' and show the targeted div after user selects an option.
Personally, I preferred the last one option.

I hope this fixes your problem
http://jsfiddle.net/r9sv8/
Use the .change() to listen to the options selected and display the div respect to it.
$('.tabs').change(function(){
$('.tabQues').hide('500'); // Hides all the divs
var changeVal = $(this).val(); //Takes the value of the <option>
if(changeVal=="selectOne"){
$('.'+changeVal).show('500'); //show the div you want
}else if(changeVal=="multiple"){
$('.'+changeVal).show('500');
}else if(changeVal=="trueFalse"){
$('.'+changeVal).show('500');
}else if(changeVal=="short"){
$('.'+changeVal).show('500');
}else if(changeVal=="program"){
$('.'+changeVal).show('500');
}else{
$('.tabQues').hide();
}

Show Additional Content Based on Selection

Is this also the Risk Address:
<select name="InsuredSALicense2" id="InsuredSALicense2">
<option>Please Select</option>
<option>Yes</option>
<option>No</option>
</select>
If the answer here is "No" then a hidden drop down must be created.
If No, Please give details:
<textarea name="InsuredOther License2"
id="InsuredOther License2"
cols="30" rows="4"></textarea>
<form id="form4" name="form4" method="post" action="">
Say that on the form I want to create a drop down (example: "Do you...", please select yes/no): if the answer is "Yes" then drop down a section if no then don't drop down section.
This form was done in dreamweaver cs4.

You could do this relatively easy. Using the javascript framework jQuery, you could do something like the following:
/* Attach an event to your dropdown menu containing Yes/No */
$("#InsuredSALicense2").change(function(){
/* Check Value After Change */
if (this.val() == "Yes") {
/* Show the dropdown field */
$("#hiddenDIV").show();
} else {
/* Hide the dropdown field */
$("#hiddenDIV").hide();
}
});
This example assumes your "hidden" dropdown is within a called "hiddenDIV":
<div id="hiddenDIV">
<p>Hidden drop down stuff here</p>
</div>
To use this code-sample, you need to reference the jQuery library from your tag.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>

are you wrokin in ASP.net??
If you are workin in ASP.net..you can create a hidden dropdown list on the event of Dropdownlist text change...first you can check what is the value of selected dropdown list...
let me know if you have any questions

I think the a good solution would be doing it client-side: so generate both the textarea and the dropdown menu. Hide the one that is not the default (style="visibility: hidden" for example). Then create an onchange event on the InsuredSALicense2 listbox, which hides the not important field and shows the important one.