Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
Related
I'm gonna try to keep this one as simple as possible, sorry if it's messy..
I've built (don't ask why) a custom validation for a form on a wordpress site with jQuery/JS.
The generall idea is I have an array with ID's of input fields that it should check. So the list goes:
toValidate=new Array();
toValidate[0]="#name";
toValidate[1]="#location";
toValidate[2]="#method";
and it loops them with $.each(toValidate) and then if they're empty gives a popup and does some other stuff like add red borders to the fields. Now all of this works fine. But I have another problem. I have a couple of fields that are always required, but I also have a checkbox, when they check it, a TR is supposed to be removed, that TR has a couple of fields in it that are required IF visible.
Now the problem is that even if I click the checkbox, hence remove the TR, I can't get it to work so that the required fields of that remove TR are no longer required. I've tried multiple ways but keep getting different problems depending on what solution I try.
What I've tried for an example is to change the array so that if they check the box, it removes a couple of the array objects (those that are in the row that is removed). But it doesn't work, it just acts as if they're still there.
Sorry for making this long but what I'm trying to ask is what would be best practice to do here? What would YOU do? I don't want code, just a general idea of how I should plan it this as I'm stuck..
Edit: I forgot to mention, my way with the array may be a worthless idea too, so any ideas on how to improve it and make it work are appreciated.
Rather than adding/removing visibility in javascript, do it in css. It'll simplify your selectors when validating.
css:
table tr.ignore {
visibility: hidden;
}
javascript:
$('input.hide_thing').click(function() {
$('tr.whatever_tr').toggleClass('ignore', !$(this).checked)
});
validator:
$('tr:not(.ignore)').validate();
You could preface your validation by checking if the element is visible.
$.each(toValidate, function(index, element) {
if (!$(element).is(':visible')) return;
// ... proceed to validate
});
long-time lurker here asking my first public questions because I am truly stuck.
I'm working on a hosted shopping cart platform so I only have access to add code in certain designated divs. I have a javascript code that I'm calling externally (because inline is bad unless you have to, right?)
So my issue is, There is a <select> dropdown that I do NOT have direct access to change HTML and the silly shopping cart platform didn't give it an id, only the name attribute is set.
I need to clear the <div id="result_div"> when the <select name="ShippingSpeedChoice"> drop-down is clicked so I have:
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
It fires once, but that's it. My question is, how do I make it fire EVERY TIME the <select name="ShippingSpeedChoice"> is clicked?
Here's all the relevant javascript (in case it's preventing #result_div from clearing somewhere):
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
$("#btn_calc").click(function(e) { /// onclick on Calculate Delivery Date button
Thanks in advance, any help is appreciated!
If you want something to happen every time the element is clicked, use .click() rather than .change(). The latter only fires if they select a different value from the menu than it had before.
$("[name=ShippingSpeedChoice]").click(function(e) { $("#result_div").empty(); });
First of all, I'd probably try and setup the shopping cart select to have an id.
$("[name=ShippingSpeedChoice]").id = 'shopping_cart_select';
then try binding the "change" function to the element via it's id.
$('#shopping_cart_select').bind('change', function(){
//rest of code goes here
}
I still wasn't able to use the name attribute to call the function, so I found a way around it by using the id of the td the ShippingSpeedChoice dropdown was in:
$("#DisplayShippingSpeedChoicesTD").change(function(e) {
$("#result_div").empty();
And it fires every time now. Thank you so much for all your feedback & assistance - I still wish I could figure out how to use the name attribute rather than the id, but that will be a puzzle for another day!
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.
I'm putting together this basic script for a site: http://jsfiddle.net/mcgarriers/rVPnu/2/
It works great when I select the various numbers (it shows the relevant divs) but when I go back to click "Select" it still displays the <div>s. I'd like it if the user clicks "Select" that mySpecialElements is hidden again.
Can someone show me how to achieve this?
Many thanks for any pointers.
Fixed your script here: http://jsfiddle.net/rVPnu/6/.
if(!value) hideAll(elementsContainer);
You need to check that value is not empty in the doSelect method and hideAll if it is.
Just interchange hideAll(elementsContainer); and if (!targetDiv) { return;} in your doSelect function.
I have saved this in: http://jsfiddle.net/rVPnu/9/
Call hideAll(elementsContainer); before returning from doSelect method.
// do magic..
hideAll(elementsContainer);
if (!targetDiv) { return;} // didn't find the element, bail
Demo