I am having trouble getting the Billing Address to copy over the Shipping Address using jQuery. I have successfully done this using a plain-jane form with no custom jQuery elements. But when I add the custom UI to the checkbox, it seems to break the code. I have tried several code changes but none of them are working.
When a user clicks on "My billing address is the same as my shipping address", nothing is happening. Here is my jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$('#check-address').click(function(){
if($('#check-address').attr('checked')){
$('#address-field1').val($('#address-field').val());
$('#city-field1').val($('#city-field').val());
$('#zip-field1').val($('#zip-field').val());
var state = $('#state-field option:selected').val();
$('#state-field1 option[value=' + state + ']').attr('selected','selected');
} else {
//Clear on uncheck
$('#address-field1').val("");
$('#city-field1').val("");
$('#zip-field1').val("");
$('#state-field1 option[value=Nothing]').attr('selected','selected');
};
});
});
</script>
Any help is greatly appreciated!
Demo of options
$('#check-address').attr('checked')
should could be
$('#check-address').is(':checked')
As pointed out in comments, there are many ways to skin this cat. http://jsfiddle.net/sRt6G/1/
this.checked seems to be the simplest.
You are using jquery 1.7 . You should use prop instead of attr
$('#check-address').prop('checked')
$(elem).attr('checked') // returned true (Boolean) prior to 1.6
$(elem).attr('checked') // now returns "checked" (string) versions after 1.6
$(elem).prop('checked') // now returns true (Boolean) versions after 1.6
The plugin you're using to prettify your checkbox (or whatever it does), is replacing the <input type="checkbox"/> with a div, and simulating events on the checkbox.
It doesn't propagate a click event, but it does propagate a change, so you should listen for that instead;
$('#check-address').change(/* function */);
To improve your code you might want to substitute the check for attr('checked') with prop('checked'), but your code will still work regardless. Reasons for this are outlined on the jQuery documentation for prop(); http://api.jquery.com/prop
It could be that you're trying to go on a click event of a checkbox. Have you tried:
$('#check-address').on('change', function (e) {...
and
if ($('#check-address').is(":checked")....
This might help too.
$('input[name=city\\[' + this.value + '\\]]').val($('input[name=city\\[1\\]]').val());
Demo
Fill out the form on top, then use the check boxes to copy the values of the fields.
It works with dynamically created fields. If the form is hard-coded, replace this.value with the index of the field.
you might wanna try the following code:
$("input.billingAddress").on("change",function(){
var val1 = $("input.street").val();
var val2 = $("input.suitNumber").val();
var val3 = $("input.city").val();
if(this.checked)
{
$("input.streetb").val(val1);
$("input.suitNumberb").val(val2);
$("input.cityb").val(val3);
}
else
{
$("input.streetb").val("");
$("input.suitNumberb").val("");
$("input.cityb").val("");
}
});
Related
I have a website. There you can either go manually to a specific site, or go there by using a dropdown menu (select2).
If I go there manually (link), I want to change the value in the dropdown to the sites one.
Here is my select2 code:
$(function () {
$("#siteSelect").select2().on("select2:select", function (e) {
$("#siteSelect").val(-1).trigger("change");
var id = $(this).val();
var url = siteRoot + "/site/site?siteID=" + id ;
$("#Container").load(url);
});
});
Can you give me some hints how to do that?
I tried to set the value by:
$("#siteSelect").val(siteName);
Every help is appreciated!
$("#siteSelect").select2().select2('val','your value');
The select2 objects are not able to detect changes and the require you to do that manually as of now. The way to do that is as follows.
$("#siteSelect").val('<your value>');
$("#siteSelect").trigger('change');
The .trigger() call on an object lets select2 know of any changes it needs to be aware of. Unfortunately this is the only solution for v4.0.0 unless a newer version fixes this issue.
I am trying to come up with some code that I can execute onclick that will check a specific checkbox on a page. The checkbox does not have a unique name and does not have an ID. The only usable identifier is the value.
I am limited to jQuery 1.4.2.
Nothing I have tried will work. Any ideas?
Thanks.
This is obviously something you want to avoid doing but if the value is all you got, you'll have to traverse through the DOM for that input field where type=checkbox and where value is the value that you are looking for. What you can do is write a jQuery select for $('input[type=checkbox]') and there loop through all the checkboxes that have the value that you are looking for.
$checkbox = $('input[type=checkbox]')
$checkbox.each( function(k,v){
if( $(v).attr('val') == somevalue ){ //using attr() instead of .val() since it's a checkbox
$(v).attr('checked',true)
}
}
So I checked out if you can just directly select it in jquery 1.4 using plunkr.
$("input:checkbox[value='someVal']").attr("checked", "checked")
And this works fine. Here's the plunk url to check out http://plnkr.co/edit/2sSjONghE5IfGlAvN2kk?p=preview
This should work in earlier versions of jQuery:
$("input:checkbox[value='someVal']").attr("checked", "checked")
Here is a fiddle.
You can try:
$("input[type=checkbox][value=myvalue]").click(function() {
alert('clicked');
});
You can refer it it by it's index id or by value
Situation: multiple forms on page, multiple sets of checkboxes in each form. Checkboxes look like:
<input type="checkbox" class="styled" id="$opt" name="$ID.$opt[]" value="$opt" >
I cant change or add to the class or id because of unrelated but interfering factors. I found some other pieces to this puzzle, but wasnt sure how to use them, esp given that I want to validate multiple groups of checkboxes per form.
I tried this
jQuery.validator.addMethod('validate-checkbox-oneormore', function (value) {
return jQuery('.require-one:checked').size() != 0; }, 'need a value');
I put it under the actual plugin script, just after it in the file. I'm going to use this functionality most of the time i am validating, so it might as well be part of the plugin.
How can I run this validation using data attributes?
Do you mean this:
return jQuery('[data-foo=bar]:checked').size() != 0;
See FIDDLE
UPDATE:
You also need a rule that says that the "checkone" method should be run on some form field:
$(function() {
$("#form1").validate();
$("#form1 input[data-foo=bar]").rules("add", {
checkone: true
});
});
See my update of your fiddle
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.
I'm using the jQuery Autocomplete plugin. I have two input fields on a form, inputfield1 and inputfield2.
I attached autocomplete to the first field. When the that field loses focus, I want to check if a value was entered and if so, then make an AJAX call to retrieve some "\n"-separated strings and use them to drive autocomplete on the second field.
Below is the code I'm using to do that:
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").blur(function(){
// Attach autocomplete if inputfield1 field is not empty
if($("#inputfield1").val() != ""){
var url = "<url2>?q="+$("#inputfield1").val();
$.get(url,function(data){
result=data.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});
But a strange thing is happening: I am able to attach autocomplete to the first field successfully, but I have to give focus twice to the second field in order to use autocomplete on it. Is there any way to fix this problem?
Try this simplified test. If this works check if your result really contains what you think (alert it or write it to console). There could be other characters after splitting (namely whitespace (leading spaces, \t or \r) try trimming every value of the result array.
var data1 = ["a123", "b123", "c123", "d123", "e123", "f123", "g123", "h123", "i123", "j123", "k123", "l123", "m123", "n123", "o123", "p123", "q123", "r123", "s123", "t123", "u123", "v123", "w123", "x123", "y123", "z123"];
var data2 = 'a123\nb123\nc123\nd123\ne123\nf123\ng123\nh123\ni123\nj123\nk123\nl123\nm123\nn123\no123\np123\nq123\nr123\ns123\nt123\nu123\nv123\nw123\nx123\ny123\nz123';
$("#inputfield1").autocomplete(data1);
$("#inputfield1").blur(function(){
if($("#inputfield1").val() != ""){
var result=data2.split("\n");
$("#inputfield2").autocomplete(result);
}
});
I found this code in the current version of the autocomplete plugin:
.click(function(event) {
$(target(event)).addClass(CLASSES.ACTIVE);
select();
// TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
input.focus();
return false;
It seems to put focus back on itself after a click. This might be messing you up.
Instead of handling the blur() event, maybe you'll have better luck if you handle the autocomplete plugin's result() event.
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").result(function(event, data, formatted){
// Attach autocomplete if inputfield1 field is not empty
if(data){
var url = "<url2>?q="+data;
$.get(url,function(data1){
result=data1.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});
Make sure you're using the latest version of the Autocomplete plugin. There was a bug in versions prior to 1.1 where if you enabled autocomplete on a field after that field had focus (as would happen in your example if you tabbed from the first input field directly into the second) it wouldn't work properly until focus was lost and then restored again...
Here's a quick demo that shows this construct working with the latest Autocomplete version.
You say you need to select #inputfield2 twice so the autocomplete event binds to it, right?
I'm just thinking.. can it be possible that you are using your tab key on your keyboard to select #inputfield2 and when that doesn't work you select #inputfield2 with your mouse? If so, isn't it possible that the #inputfield1 blur event doesn't kick in until you "unselect" it with your mouse (maybe some kind of bug)?
I haven't tried this, it's just a thought.