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.
Related
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.
I am currently developing a web application that requires me to register users according to their category. I have a combo-box in which the user can choose which type of user they are.
I want to do is show a relevant form according to the user's selected value. I'm am using PHP for all the functionality, but I'm a newbie to jQuery. Can anyone show how to implement this or else demonstrate a different way of doing this without reloading the page?
You can try using a category dropdown list as shown.
HTML Code
Dropdown
<select id="category">
<option value="#form1">Category 1</option>
<option value="#form2">Category 2</option>
<option value="#form3">Category 3</option>
</select>
Forms
<form id="form1">
</form>
<form id="form2">
</form>
<form id="form3">
</form>
jQuery Code
$(function(){
var forms = $('form'); //cache all Forms
forms.hide(); //hide initial
$('#category').on('change', function(){
forms.hide(); //on change hide all forms
var formId = $(this).val(); //get form id to show
$(formId).show(); //find form by its id in cached forms and show.
});
});
You can use jQuery show() and hide() functions:
Example:
$('#form1').hide();
$('#form2').hide();
$('#form3').show();
In this example you have forms defined as follows:
<form id="form1">...</form>
<form id="form2">...</form>
<form id="form3">...</form>
You can also get fancy with it and use fadeIn() and fadeOut() if you want some effects.
You can use jQuery toggle() function:
$('#your_form').toggle();
From the docs:
The matched elements will be revealed or hidden immediately, with no
animation, by changing the CSS display property. If the element is
initially displayed, it will be hidden; if hidden, it will be shown.
The display property is saved and restored as needed. If an element
has a display value of inline, then is hidden and shown, it will once
again be displayed inline.
I am having some trouble with the following scenario:
What I need is a way to hide a form if a option is selected in a drop down menu. The goal is to have the user select how they want to pay, either by credit card or thru PayPal. If they select Credit Card, then the Credit Card form is displayed (which is the default method of payment). If they select PayPal, then the PayPal form will show and the Credit Card from will be hidden. Here is my HTML so far: (it would be nice if this could be done with jQuery)
<select id="payment_type" name="payment_type">
<option value="Credit">Credit/Debit Card</option>
<option value="PayPal">PayPal Account</option>
</select>
<div id="credit_card_payment">
<h2>Enter Credit/Debit Card Details:</h2>
....
<form id="paypal_payment" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="clearfix">
....
You need something like this (jQuery):
$('#payment_type').change(function(){
if($(this).val() == "PayPal") {
$('#credit_card_payment').hide();
$('#paypal_payment').show();
} else {
$('#credit_card_payment').show();
$('#paypal_payment').hide();
}
});
Here's a working example: http://jsfiddle.net/CYzsY/
You want your forms hidden before a value is selected. The way to do this would be to set the CSS on your forms to display: none by default. This will hide the forms and take up no screen space. In the example above, we do this with: .hidden { display: none }.
To show a form when a particular value is selected, you simply need to show/hide depending on the input selection.
I would also suggest a stylistic change to your HTML/CSS. Instead of underscores, you should consider using dashes. So id="payment_type" would be id="payment-type". This has the benefit of being easier to type, and shares similar syntax with CSS properties such as border-width.
$("#payment_type").change(function (){
//add an if else on $(this).val(), use $("#...").hide() or show()
})
I have two dropdowns with different values in each and have an submit button in last..
Now what i want to do is that, when i select an option form first dropdown and then another option from the second dropdown. Now when i click on submit button it would show there related value popup window having close button in it.
Code is as follows :
Calling from :
<select>
<option>America</option>
<option>India</option>
</select>
Calling To :
<select>
<option>England</option>
<option>France</option>
</select>
<input type="submit" name="" value="" />
These four countries have four different rates..
When i select calling from America to England than it ll show a popup window of its rates.
And when i select calling from America to France than it ll show a pop window of its own rates ..
Thanks in advance if u can help me .. :)
Guessing you just want the selected values or something?
First give the dropdowns a name and/or id.
lets make it simple and just make it a button instead of a submit.
<select id="list1">
<option>USA</option>
<option>India</option>
</select>
<select id="list2">
<option>UK</option>
<option>Fr</option>
</select>
<input type="button" value="Click here" onClick="showAlert();">
<script language="javascript" type="text/javascript">
function showAlert() {
alert('Just get the values in here by ID.selectedItem.text I believe it is');
}
</script>
I believe that is basicly what you are after.
P.s.What exactly do you mean with rates?
In that case take what Mithin Sasidharan wrote and instead of the links he used just use a page you made and then put the info on that page that you have.
You can also just make a link and style it with CSS to make it look like a button.
If you did that you can simply use
This will make the link open a new window with the page you pointed towards.
check this out.
http://jsfiddle.net/NFq2f/2/
I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.
use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">