jQuery Forum

Hello,  as usual I think I am way over-thinking this, so any help pointing me in the right direction is greatly appreciated.  Ultimately I am trying to calculate the number of days between two dates and then multiply that number times another number (cost of a permit).

I am using the whatsock.com aria datepicker and have two date fields; start date and end date.

Here is where my jquery skills need serious improvement.

Each time a start and or end date field is clicked or entered, is when I need the calculations to take place.

Of my many problems is figuring out whether to use an onclick or keyup function or can I combine the two?

Below is the html

The following jquery has not worked.

The jquery below does work for a basic calculation.  I was hoping to expand this, work the number of days calculation into it but have so far, failed.

As I mentioned, any help is appreciated even if to let me know, "hey idiot, you forgot this!"

Peter T

When I update either of these fields, the updated data is also copied into the same url_title field...in every browser except Microsoft Edge.

I am using jquery.min.1.11.3.js

Peter T

I apologize for the confusing title.

In the code below, my goal is to, when an option is selected in the drop down menu, the options class needs to check the matching class in the checkbox array in the next div.  So if the first option is selected in the drop down menu (Academic accommodation request), both  the first and second checkboxes (Test 1a and Test 1b) need to be checked.

I have had success grabbing the title attribute in select options but have not had much luck grabbing selected option classes.

Any chance I am on the right track?  If not, if anyone can point me in the right directions, I would be super grateful! Thanks!

Peter T

js:

I have the following accordions, below, on my page, however, I am looking for code that will work regardless how many accordions there are on the page.

My goal is to have links on the same page that open either of the accordions.  I have yet to find javascript or jquery that will account for dynamically generated accordion id's.

Any help in pointing me in the right direction would be greatly appreciated. Thank you!

Peter T

Is there any way using jquery to format the number in this fifth textfield with commas?

The first four fields are formatted fine using the code below. Of course this is not work on my jsfiddle.  I hate it when that happens but am not worries about that.

My main question is, is there a way to use jquery to format a textfield with numbers using commas, where the number is dynamically generated (i.e. isn't typed in)?

Thanks!

Peter T

I think I'm missing something obvious.

In my jsfiddle, when Radio Option 1 is clicked , the two drop down menu fields are required.

When Radio Option 2 is clicked, the two drop down menus are hidden and their values, if any were selected, are removed.

This works fine.

My problem occurs when I edit a record.  If I had clicked Radio Option 1 and then two options from the select menus; if I go back and edit the record and choose Radio Option 2, while the select options are removed in the form, they are not deleted in the database.

Any ideas what I am missing?

I thought the code below removed the value from a select menu but it only saves the removed value from textfields.

2. $('#21').val("");//state_2

I also tried the code blow but it did not work either.

Any help is appreciated, even if to let me know I'm missing something super obvious!

Thanks

Peter T

We are using Collegenet's online calendar service and in order to get their "spud code" which is actually an iframe, to appear in IE and Firefox, we needed the following code in our template:

The code appears fine in Chrome.  I am attempting to use similar code on another template but am not have any success.

Below is the jquery code I am using along with the html.

jquery:

html:  The red code is where my issue is.  When the Events tab li is clicked, the iframe only appeas

Any help is appreciated even if it's to let me know that I'm being an idiot and missing something obvious.

Thanks

Peter T

My original question was here (thanks for the huge help jakecigar), however instead of having the divs hidden initially, I have decided to change it up and have the checkboxes disabled in the beginning.

Once the person selects a major from the drop down menu, the checkboxes (A,B,C,D,E) become intactive.  This is working fine.  However, once a gender radio button is clicked and then a citizen radio button is clicked, any or all of the checkboxes are supposed to become active/enabled.  Unfortunately this isn't working.

When using a .filter is it not possible to switch from .prop("disabled", true) to .prop("disabled", false) or am I just missing some code?  I know it's probably the latter so if you can point me in the right direction I would be super appreciative!  Thanks and thank you to all who have helped me in the past.

Peter T  

I'm not a newbie but let's just say I am advancing slowly. Thank you to all who have helped me up until this point. 

Here's my issue.

While the code in my jsfiddle below works, I still get the following error:

Uncaught ReferenceError: startFilter is not defined

Of course, because of this error, I can't get any additional jquery to work.

The purpose of the drop down menu is so that depending on what is selected, then the proper div or divs appear.  the correct divs are appearing but until I figure out how to define startFilter, I'm up the creek.

Any help pointing me in the right direction is greatly appreciated!  Even if it's "get you head out of your ..."

I have a feeling I am missing something super obvious.  I hate that!

This time I don't have a problem as my code is working.  I am only asking if there is a more efficient way (i.e. less code) to accomplish my goal of utilizing a show hide based on a radio button clicked.

See jsfiddle

In the jsfiddle above, if you click the Other button, a required textfield appears.  If you click any other radio button, the textfield disappears and is no longer required.

It's the hide part of the code, below, that I figure there is a more efficient way to write.

2. 
   
3. $("#semester_1, #semester_2, #semester_3, #semester_4").change(function() {
4. var checked =this.checked
5. if(checked){
6. $('.semester').hide();
7. $('#short_field_003').removeClass("required error");
8. $('#short_field_003').val("");
9. }
10. }).change();

I tried the following but it didn't work.

2. 
   
3. $("#semester_5").change(function() {
4. var checked =this.checked
5. if(checked){
6. $('.semester').show();
7. $('#short_field_003').addClass("required error");
8. }
10. if(!checked){
12. $('.semester').hide();
13. $('#short_field_003').removeClass("required error");
14. $('#short_field_003').val("");
}

Thanks again.  Any help in pointing me in the right direction will be greatly appreciated!

What I need to do:

I have a checkbox array.  If any of the checkboxes (freeform_ch_cla_course_preferences_courses_001_1 -  freeform_ch_cla_course_preferences_courses_001_5) are checked, I would like to addClass to a textarea (id="101").

Unfortunately, the code I have below, only works to toggle the validation.

Thank you for any help in advance.

Peter T

2. 
   
3. $("#freeform_ch_cla_course_preferences_courses_001_1, #freeform_ch_cla_course_preferences_courses_001_2, #freeform_ch_cla_course_preferences_courses_001_3, #freeform_ch_cla_course_preferences_courses_001_4, #freeform_ch_cla_course_preferences_courses_001_5").change(function() {
4. var checked =this.checked
5. $("#101").addClass("required error", checked);//large_field_007
6. $("#student-activities").show();
7. if(!checked){
8. $("#101").removeClass("required error", checked);//large_field_007
9. $("#101").val("");//large_field_007
10. $("#student-activities").hide();
11. }
12. }).change();

Hello,  the code below has worked for me but unfortunately I am not an advanced enough coder to enhance the code the way I need it to be.

What I need is the value of each options, to add |~|value_name.

For example, if the first option is selected Cohort A, I need the value to be  Cohort A|~| Cohort A.

Any tips to point me in the right direction would be greatly appreciated.  I know I need to improve my coding skills!

Oh I forgot to mention, the purpose of the drop down menu is that I have 5 of them.  When one is selected, that item disappears from the remaining drop down menus.  So by the time selections are made in the first 4 select menus, the 5th select menu has only one item remaining.

Peter T

2. //dependent drop down list
3. $(document).ready(function() {
4. var txtCoh = 'Select Cohort';
5. var cohorts = ['Cohort A','Cohort B','Cohort C','Cohort D','Cohort E'];
6. var used = [];
7. $(function() {
8. $("select.cohorts").each(function() {
9. $this = $(this);
10. $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
11. $.each(cohorts,function(c,v) {
12. $('<option/>').text( v ).val( v ).appendTo( $this );
13. });
14. });
15. $("select.cohorts").on('change',function() {
16. used = $.map( $("select.cohorts").filter(function() { return $(this).val() !== txtCoh; }), function(v,c) { return v.value; });
17. $("select.cohorts").each(function(c,v) {
18. var $this = $(this);
19. var val = $this.val();
20. $this.html('');
21. $('<option/>').text( txtCoh ).val( txtCoh ).appendTo( $this );
22. $.each(cohorts,function(c,v) {
23. ($.inArray(v, used) > -1 && (v !== val) ) || $('<option/>').text( v ).val( v ).appendTo( $this );
24. });
25. $this.val( val );
26. });
27. });
29.                   });
30.        });

I'm using ExpressionEngine with Solspace's Freeform Pro and do not want to use jquery's datepicker plugin because it is not ada compliant.

Any help is appreciated.

Thanks!

Peter T

Here's my predicament.  

I am using ExpressionEngine and Solspace's Freeform Pro.  I have my form set up so that the user fills in the information and then clicks the submit button, which is labelled "Continue" which then takes them to a page where they can review and edit the date they just filled in.  Basically this is the same form but the user has the ability to edit their information and then click the submit button.

Here's where I'm failing.  On this edit form, I have added one checkbox field that needs to be required,  therefore checked, before the form gets submitted.  If this checkbox is not checked, then the form should not submit.

The problem is that for this type of field, a single checkbox, Freeform Pro automatically gives this field a value (n).  So what I would like to do is, after the initial form is submitted and while this edit form loads, use jquery to remove this value and make the field required.  The code I have used below has not worked.  

2. $(function(){ 
3. var valChk = $('input:checkbox[name=yes_1]').val()
4. if(valChk == 'n') {
5. $("#iAgree").prop( "checked", false );
6. $("#iAgree").addClass("required error");
7. }
8. }); 

If anyone could let me know if I'm on the right track, I would greatly appreciate it.

Thanks 

Peter T

I have a form that contains a drop down menu and depending on the selection, a text field in a div appears or remains hidden.  This form is working fine.  Once the user clicks continue, they are taken to another form where they can review their data and then submit.  On this form is where I am having trouble with the show hide.  

The show hide on this edit form is not working at all.  I thought I had everything covered: one id, classes (club_or_organization or other ) but no luck.  The field that should be hidden remains visible on the edit form regardless of the selection.

I am using Freeform Pro (ExpressionEngine cms) and in the edit form, Freeform uses numbers instead of the actual id name.  

working code:

2. 
   
3. // Show / Hide dropdown
4. $(document).ready(function(){
5. $("#box").hide();
6. $("#dd_heard_learn_about_004").change(function() {
7. $("#box").hide();
8. $(".short_field_001" + $(this).val()).show();
9. });
10. });
11. // change function - drop down menu select - addClass
12. $(document).ready(function(){
13. $("#dd_heard_learn_about_004").change(function () {
14.    $("input[name^=dd_heard_learn_about_004]").removeClass('required error');
15. if ($(this).val() == "club_or_organization") {
16. $("#short_field_001").addClass('required error');
17. }
18. if ($(this).val() == "other") {
19. $("#short_field_001").removeClass('required error');
20. $("#short_field_001").val("");
21. }
22. if ($(this).val() != "club_or_organization"){
23. $("#short_field_001").removeClass('required error');
24. $("#short_field_001").val("");
25. }
26. if ($(this).val() != "other"){
27. $("#short_field_001").removeClass('required error');
28. $("#short_field_001").val("");
29. }
30. });
31. });

NOT working code:

2. // Show / Hide dropdown
3. $(document).ready(function(){
4. $("#box").hide();
5. $("#530").change(function() {//dd_heard_learn_about_004
6. $("#box").hide();
7. //$(".72" + $(this).val()).show();//short_field_001
8. $(".club_or_organization").show();//short_field_001
9. $(".other").show();//short_field_001
10. });
11. });
12. // change function - drop down menu select - addClass
13. $(document).ready(function(){
14. $("#530").change(function () {//dd_heard_learn_about_004
15.    $("input[name^=dd_heard_learn_about_004]").removeClass('required error');
16. if ($(this).val() == "club_or_organization") {
17. $("#72").addClass("required error");//short_field_001
18. }
19. if ($(this).val() == "other") {
20. $("#72").addClass("required error");
21. }
23. if ($(this).val() != "club_or_organization"){
24. $("#72").removeClass("required error");
25. $("#72").val("");
26. }
27. if ($(this).val() != "other"){
28. $("#72").removeClass("required error");
29. $("#72").val("");
30. }
31. });
32. });
33. 
    
34. 
    
35. the html code is :
38.     <div style="padding:15px 0 20px 0;">
39.         <p><label for="dd_heard_learn_about_004">How did you hear about this opportunity?<span class="required">* </span></label><br />
40. {freeform:field:dd_heard_learn_about_004
41.                     attr:id="530"
42.                     attr:class="form-control"}</p> 
44. <div class="club_or_organization other" id="box">
45.                     <div style="padding:15px 0 15px 25px;">
46.                             <p>If other club/organzation or other, please specify:</p>
47.                                    {freeform:field:short_field_001
48.                                         attr:id="72"
49.                                         attr:class="form-control"}
50.                     </div>
51. </div>
52. </div>

Any help pointing me in the right direction and letting me know I'm missing something right in front of me is appreciated.

Peter T

I thought I had this working but not any more.

I have a form with a checkbox array.  If the "Other" checkbox is checked, then a textfield appears (in div #fieldOther).  If "Other" is unchecked, then the textfield as well as the value in it disappears.  That is all working fine.

However, the action on this form takes the user to a page where they can review/edit their form data.  The code below, used to work, so that on this review page, if "Other" was checked, both the textfield (#72) and value in it would appear.  However, now, the value is in their, as I can see by inspecting the element.  But the value unfortunately is not visible.  Weird, I know!

Any help would be appreciated.  I think I'm just missing something simple, as in yes, I know I am the error.

What I'm wondering, is the code below, causing the value 

html code is below:  As I mentioned, the value is in the code, but the textfield appears blank on  the page.  Thus of course, when I click submit, the value is removed and the field becomes required again.

Thanks

Peter T

Thanks to all who have previously helped me.  

I have a weird situation.  I'm using a text field for the date in a form but not using datepicker because I have not been able to get it to work with a screen reader.  This script I'm using below, works in jsfiddle but on my page allows 5 digits for the year instead of only 4.

Any ideas pointing me in the right direction are appreciated.

Thanks

Peter T

If I have a radio button field with Yes/No selections.  If either is selected, a fieldset appears with a textfield.

If No is clicked, then the user types in a value in the textfield.

Is there jquery I can use, so that if the user clicks Yes, a value is entered into the textfield?

Thanks in advance.  I've seen this done before except with span tags.  I haven't seen this inside a textfield.

Peter T

In my form is a checkbox group, that when one value is checked, a set of required radio buttons appears.

The jquery show hide is working.

When this particular value is unchecked, the set of radio buttons becomes not required and if a radio button was clicked, the value is removed.

This is working great too

When the form is submitted, the person is taken to another page to review their form.  

While the value is still in the database, the jquery code I am using has removed the radio button value.  If a radio button has been clicked on the initial form, I need that clicked on this review page.  Unfortunately the jquery code I'm using removes the value.

Any help would be appreciated.  Below is my jquery code:

What I am hoping for is that there is a way for jquery to determine on my review page, that if freeform_ch_ethnic_7 is checked, the value (freeform_ch_ethnic_radio_1 or whichever  radio value) has been clicked, remains.

Is there a way, if I have two textfields (firstname and lastname)...

can I combine those values into a 3rd hidden text field (firstname-lastname)?

The reason is, i need this for my url title db column.

I found this jfiddle link but haven't been able to modify it.

Here's my modification that failed, obviously, I know

Maybe I need to store the vals in a php var and insert it that way?

Thanks for all previous help and in advance!

Peter T

The code below gives you a selectable date range in the datePicker from December 16 - December 20, 2013.

I have a form with two textfields (short_field_002 and xshort_field_002) and two checkboxes (part of an array ch_r1 and ch_s1).

When ch_r1 and ch_s1 are checked, then short_field_002 and xshort_field_002 become required.  

I have this working fine using toggleClass.

My problem is, if both ch_r1 and ch_s1 are checked, and then the person unchecks ch_s1, then short_field_002 and xshort_field_002 are no longer required, because of the toggleClass.

How can I avoid this, so that regardless how many times ch_r1 or ch_s1 is unchecked, as long as one of them remains checked, then short_field_002 and xshort_field_002 remain required?  

My code is below:

That way I could use addClass and removeClass?

What I would like to do is add an if statement inside both similar too:

Thank you in advance and don't hesitate to let me know if I'm way off base!

Thanks

Peter T

Thank you everyone who has helped me along the way.

I have two radio button elements (xshort_field_001_0 and xshort_field_001_1) in a form.  When either is clicked, a different div appears.  One div has a text field and the other has a textarea.

This is working fine.  However, what I would like to do, is when xshort_field_001_0 is clicked, remove the value of the textarea which is inside the xshort_field_001_1 div.  

I have three separate blocks of code, one for show/hide, one for add/removeClass and one for clearing the content from the textarea.  Adding the third block to clear the content has always disabled the show/hide.

I figure I need to combine the .click and .bind functions.  But I have not figured out how.

I'm guessing that I should probably combine all the code.  I'll take any ideas or pointers.

Here's my code:

Thank you in advance for any help!

Peter T

I have a show/hide radio button field (yes_no_001_0 = Yes, yes_no_001_1 = No), where if Yes is clicked, two textfields and a radio button field appear in a div.  

When No is clicked, those fields disappear.  That is working fine.

If I type values in the two textfields, but then realize I meant to click No, when I click No, I have the jQuery working so that the values in those textfields are removed, making them blank.

Unfortunately I have not been able to switch the radio button field value in the show/hide field to either No (yes_no_002_1 = No) or blank. 

Any chance I'm close and just missing something simple? 

Thanks in advance for any help.

My code is below: