I am using Carmen gem for country DropDown. I am using carmen at two places. I want to set these dropdowns equal with selected value by clicking on checkbox. Html code for drop down:-
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected>India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN">India</option>
<option value="US" selected="selected">United States</option
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
My code is here:
$('#SameAsCurrentAddress').on('click', function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('select#permanent_address').val($('select#contact_attributes').val());
});
But i am unable to set the value eqaul. How to set equal? Please help me.
You have a bunch of syntax errors. Please use a good IDE like Eclipse to catch these errors for you. This works:
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected">India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="US" selected="selected">United States</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
$('#SameAsCurrentAddress').click(function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('#permanent_address').val($('#contact_attributes').val());
}
});
Related
I'm trying to validate a login script, pretty much everything else is done but I don't know how to do a drop-down menu. How would I validate it, to ensure an option other than the default is selected, through JavaScript?
All of the other validation is done via a separate .js sheet, so I'm not sure if document.getElementById works or I'm just making silly mistakes?
HTML (Form ID is "registration_form"):
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>
if ( document.getElementsByName('location')[0].value == 'false' ){
alert('Select something !');
}
This might suffice.
Yes, you can use getElementById
function validate(){
var val = document.getElementById("location").value
console.log(val);
}
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>
<input type="submit" onClick="return validate();">
I have two drop down list "optionone" and "optiontwo" and I want to change the default selected value from "option value=3>3" to option value=3 selected>3 when 2 is selected from my first dropdown list ("optionone")
<script>
function myFunction() {
var mylist = document.getElementById("optionone");
var myvalue = mylist.options[mylist.selectedIndex].value
if (myvalue == 2) {
//do stuff
document.getElementById("optiontwo")
//Change <option value=3>3 to <option value=3 selected>3
}
}
</script>
My drop down list
<select name="optionone" onchange="myFunction()">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
<select name="optiontwo">
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
Which I want to change to the following when 2 is select from my first drop down list (optionone)
<select name="optiontwo">
<option value=1>1
<option value=2>2
<option value=3 selected>3
<option value=4>4
<option value=5>5
<option value=6>6
</select>
I'm a bit stuck
You have a invalid markup, <option> must be closed
There is no id attribute for second select input
You can set the value attribute instead of finding the option value using index.
value should be wrapped in quote
Instead of playing with selected attribute, setting the value will make option selected.
Instead of inline-event-binding, use addEventListener
/*
function myFunction(elem) {
document.getElementById("optiontwo").value = elem.value;
}
*/
document.getElementById('optionone').addEventListener('change', function() {
document.getElementById("optiontwo").value = this.value;
});
<select name="optionone" id="optionone" onchange="myFunction(this)">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
Thanks to the above I adapted Rayon's script to update as I wanted, as follows
<script>
document.getElementById('optionone').addEventListener('change', function() {
if (this.value == 2){
document.getElementById("optiontwo").value = 3;
}
});
</script>
remove onChange="" from html
And update you code or markup like this ..
<select name="optionone" id="optionone">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
and then add this javascript code
document.getElementById('optionone').addEventListener('change',
function() {
if(this.value == 2){
document.getElementById("optiontwo").value = 3;
}
});
and your problem will solve
i have read a tutorial on the internet which said that this way i can make a site load contect with no reload but it does not seem to work
heres my code:
I would want it to display the query.php file results under the 'send' button when date selected from dropdown and clicked.
<form method="post" action="query.php">
<select id="textarea" name="textarea" style="height: 42px;margin-top: 2px;">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<button type="submit" name="inputuno" value="Submit" class="btn btn-theme">Check!</button>
</form>
<script type="text/javascript">
function recp(id) {
$('#myStyle').load('query.php');
}
</script>
<div id='myStyle'>
</div>
$('#textarea').onchange(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
if I correctly understood what you are looking for. It will automatically reload when option will be changed. If you want to reload when button is clicked just add id property on it, for example "relbutton" and change type to "button".
$('#relbutton').click(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
Also you need to get rid of those tags, they are completely unecessary here.
Who is calling that recp(id) function? I'd say nobody. If nobody is calling it, it won't run. If it won't run, it won't conduct the page load.
You need to call that function from somewhere.
Also, so far this seems to be more of a JavaScript/jQuery issue than a PHP one.
If you'd like the form to be sent, you'll need to add an onsubmit handler. I'd suggest taking a look here and here.
I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>
you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle
You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.