Search jQuery

jQuery Forum

Screen name:
Linn Fountain

Linn Fountain's Profile

47 Posts

106 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Smooth scroll working AND not working
[0Replies]
- 20-Mar-2021 09:12 PM
- Forum: Using jQuery
I have a page with two identical on-page links... one at the top of the page and one at the bottom of the page. Smooth scrolling works with the top link, but not the bottom link. Any ideas what I'm missing? Here's the fiddle link: http://jsfiddle.net/Codewalker/6or8pwjx/62/

And the code:
2. <section class="section" id="head">
3. <div class="container">
4. <h2>CTA</h2>
5. <div>
6. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
7. </div>
8. <div class="cta-btn">
9. <a href="#ckav">Check your guitar</a>
10. </div>
11. </div>
12. </section>
14. <section class="section" id="ckav">
15. <div class="container test">
16. <div class="row">
17. <div class="col-sm-12">
18. <div class="placeholder-above"></div>
19. <div class="guitar-service-address">
20. <span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
21. <input id="input" type="text" /> 
22. </div>
23. <p class="help-block">What is this?</p>
25. </div>
26. </div>
27. </div>
28. </section>
30. <section class="section" id="cta">
31. <div class="container">
32. <h2>CTA</h2>
33. <div>
34. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
35. </div>
36. <div class="cta-btn">
37. <a href="#ckav">Check your guitar</a>
38. </div>
39. </div>
40. </section>
43. $('#input').on("focus", function(){
44. $(".guitar-service-address>span.placeholder-location").hide();
45. });
47. $(function() {
48. $("span.placeholder-location + input").keyup(function() {
49. if($(this).val().length) {
50. $(this).prev('span.placeholder-location').hide();
51. } else {
52. $(this).prev('span.placeholder-location').show();
53. }
54. });
55. $("span.placeholder-location").click(function() {
56. $(this).next().focus();
57. });
58. });
60. if ($(window).width() < 768) {
61. $(".placeholder-above").append( $(".placeholder-float").text() );
62. }
64. const links = document.querySelectorAll(".cta-btn a");
66. for (const link of links) {
67. link.addEventListener("click", clickHandler);
68. }
70. function clickHandler(e) {
71. e.preventDefault();
72. const href = this.getAttribute("href");
73. const offsetTop = document.querySelector(href).offsetTop;
74. $("input[id$='input']").focus();
75. $(".guitar-service-address>span.placeholder-location").hide();
76. scroll({
77. top: offsetTop,
78. behavior: "smooth"
79. });
80. }
83. .container {
84. max-width: 990px;
85. }
87. .tab-placeholder {
88. display: none;
89. }
91. input[id="input"] {
92. width: 500px;
93. }
95. .guitar-service-address>span.placeholder-location {
96. position: absolute;
97. margin: 6px 8px;
98. color: #686e74;
99. cursor: auto;
100. font: Helvetica 15px/20px bold;
101. font-weight: bold;
102. z-index: 1;
103. }
105. .guitar-service-address>.placeholder-location>.font-alt {
106. color: #686e74;
107. font-weight: normal;
108. }
110. input {
111. padding: 5px;
112. font-size: 11pt;
113. color: black;
114. border: 1px solid #979797;
115. border-bottom: 4px solid #000;
116. }
118. .help-block {
119. font-size: 90%;
120. }
122. .test {
123. padding: 20px;
124. }
126. .section {
127. padding: 100px 20px;
128. }
130. #head {
131. background-color: #ddd;
132. padding: 10px 20px;
133. }
135. #ckav {
136. background-color: #d4d4d4;
137. }
139. #cta {
140. background-color: #fdfd4d;
141. }
143. @media (max-width: 768px) {
144. input[id="input"] {
145. width: 300px;
146. }
147. span > .placeholder-float {
148. display: none;
149. }
150. .tab-placeholder {
151. display: block;
152. }
153. }

Hiding text input placeholder that has two styles when input field is entered
[0Replies]
- 01-Mar-2021 09:01 PM
- Forum: Using jQuery
I have a form with a placeholder that contains two styles. On keyup, the placeholder text will disappear, but how can I make it disappear when the user enters the text input field, either by tabbing into the field or by clicking into the field? Here's what I have. I included a Fiddle as well:
2. <div class="container test">
3. <div class="row">
4. <div class="col-sm-12">
5. <div class="placeholder-above"></div>
6. <div class="guitar-service-address">
7. <span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
8. <input id="input" type="text" /> 
9. </div>
10. <p class="help-block">What is this?</p>
12. </div>
13. </div>
14. </div>
17. $(function() {
18. $("span.placeholder-location + input").keyup(function() {
19. if($(this).val().length) {
20. $(this).prev('span.placeholder-location').hide();
21. } else {
22. $(this).prev('span.placeholder-location').show();
23. }
24. });
25. $("span.placeholder-location").click(function() {
26. $(this).next().focus();
27. });
28. });
30. if ($(window).width() < 768) {
31. $(".placeholder-above").append( $(".placeholder-float").text() );
32. }
36. .container {
37. max-width: 990px;
38. }
40. .tab-placeholder {
41. display: none;
42. }
44. input[id="input"] {
45. width: 500px;
46. }
48. .guitar-service-address>span.placeholder-location {
49. position: absolute;
50. margin: 6px 8px;
51. color: #686e74;
52. cursor: auto;
53. font: Helvetica 15px/20px bold;
54. font-weight: bold;
55. z-index: 1;
56. }
58. .guitar-service-address>.placeholder-location>.font-alt {
59. color: #686e74;
60. font-weight: normal;
61. }
63. input {
64. padding: 5px;
65. font-size: 11pt;
66. color: black;
67. border: 1px solid #979797;
68. border-bottom: 4px solid #000;
69. }
71. .help-block {
72. font-size: 90%;
73. }
75. .test {
76. padding: 20px;
77. }
79. @media (max-width: 768px) {
80. input[id="input"] {
81. width: 300px;
82. }
83. span > .placeholder-float {
84. display: none;
85. }
86. .tab-placeholder {
87. display: block;
88. }
89. }
http://jsfiddle.net/Codewalker/6or8pwjx/46/

How to populate an input text field attribute
[2Replies]
- 16-Sep-2020 04:25 PM
- Forum: Using jQuery
We have a form that includes the following checkbox:
1. <input type="checkbox" name="status" id="fee" data-subscription="">
I'm trying to write a script that inserts a value into data-subscription. Here's what I have so far, but it's not populating the data-subscription value.
2. if (globally == true) {
3. $('input[name="status"]').attr("data-subscription","false")
4. } else {
5. $('input[name="status"]').attr("data-subscription","true")
6. }

Concatenating two input fields into one hidden field and passing on form submit
[19Replies]
- 06-Jul-2020 11:11 AM
- Forum: Using jQuery
I got a request to send full-name when a form is submitted. The form gathers first-name and last-name and I just need to concatenate them and submit it in a hidden form field. Here's what I have so far for something that should be simple, but I'm missing something here:
2. <input name="firstName" id="firstName" type="text">
3. <input name="lastName" id="lastName" type="text">
4. <input name="fullName" id="fullName" value="" type="hidden">
6. $("#new-user").submit(function(event){
7. var fName = firstName.val();
8. var lName = lastName.val();
9. $('#fullName').val(fName + ' ' + lName);
10. });

Do something different based on multiple different URL parameters
[9Replies]
- 12-May-2020 03:22 PM
- Forum: Using jQuery
I have the following script started and need to trigger certain modals to open on page load, based on the URL string. For example, if 'src' is equal to '123', then modalBuyer needs to appear. If 'src' is equal to '234', then modalSeller needs to appear. Here's what I have so far. This was created back when there was only one modal that ever needed to be shown on page load.
2. if (window.location.href.indexOf('src=') > 0) {
3. $(window).on('load',function(){
4. $('#cModal').modal('show');
5. });
6. }
I was considering doing something like this, but was curious if there might be a better way:
2. var src= (new URL(location)).searchParams.get('src')
4. var SRC_LOOKUP = {
5. 123: "modalBuyer",
6. 234: "modalSeller",
7. }

Question about required checkbox
[1Reply]
- 04-Mar-2020 11:53 AM
- Forum: Using jQuery
What do I have wrong here? I'm trying to create two scenarios. One checkbox will always be displayed no matter what's included in the URL string. If that's the only checkbox that's visible on the page, it must be checked before submitting the form.
However, If 'ref' is present in the URL string (foo.com?ref=201), a second checkbox will appear and one of the two checkboxes needs to be checked. The problem is that when 'ref' is not present in the URL, it's still in the form with 'checked', so the form thinks something is checked.
1. <input type="checkbox" id="refSource" name="refSource" value="on" class="check custom-class" checked>
When a visitor arrives without 'ref' in the URL, even though it's hidden, the form still thinks something is checked and allows a form submission. We need to require that the one checkbox that is displayed is checked in order to submit the form.
const checkedBoxCount = checkboxes.filter(isChecked).length;
if ((!checkedBoxCount) || (url.indexOf('ref') !== -1 && checkedBoxCount < 1)) {
$("#checkboxAlert").show();
window.scrollTo(0, 0);
event.preventDefault();
Another way to approach this would be to add 'checked' to the checkbox only if 'ref' is present in the URL, but I thought I'd try the above approach first.

Checking URL for one of three values
[3Replies]
- 26-Feb-2020 02:18 PM
- Forum: Using jQuery
What's the best way to write an if statement to check if test is either equal to 200, 300 or 400?

if (window.location.href.indexOf('?test=') = 200)
if (window.location.href.indexOf('?test=') = 300)
if (window.location.href.indexOf('?test=') = 400)

How to pass browser info to hidden fields
[7Replies]
- 06-Dec-2019 08:13 AM
- Forum: Using jQuery
How can I identify the browser type and OS and pass that information to hidden fields that will pass into our system when the form on the page is submitted? I found some info from over a year ago, but there seems to be a lot of different opinions about the best way to do this.

How to validate that at least one of two unrelated checkboxes is checked

[16Replies]

25-Nov-2019 02:46 PM
Forum: Using jQuery

I have a form with two unrelated checkboxes. How can I validate so that at least one of the checkboxes is checked? I have the HTML5 'required' for both checkboxes, but I think when I click submit, it sees those first and does nothing else.

So I tried this after removing 'required', but it's not seeing the second checkbox.

if($("#unsubscribe input[type=checkbox]").prop('checked') == false){
   $('#checkboxAlert').show();
   evt.preventDefault();
}

<form id="unsubscribe">
<input type="checkbox" id="group0001" name="group0001" value="on" class="check custom-class" required oninvalid="this.setCustomValidity('Please select at least one option to proceed')"><label for="subscription">Email Group 1 Communication</label>
<input type="checkbox" id="groupsAll" name="groupsAll" value="on" class="check custom-class" required><label for="subscription">All Communication</label>

Change custom error message
[0Replies]
- 24-Nov-2019 03:41 PM
- Forum: Using jQuery
I have a form with two unrelated checkboxes and am trying to configure it so that it requires one checkbox to be checked. I accomplished that with the code below, but now need to change the error message so that it doesn't point to the first checkbox and read, "Please check this box if you want to proceed". I'm trying to figure out how to...

a. Change the invalid message to "Please select at least one option to proceed".
b. Possibly not have it point to the first checkbox.

Here's what I have so far:
2. $( document ).ready(function() {
3. $('#nurture_topic_insights').on('submit', submitFrm);
5. var $checkbox = $('.custom-class')
7. $checkbox.on('change', function(){
8. var checked = false;
10. $checkbox.each(function(){
11. checked = checked || $(this).is(':checked')
12. })
14. $checkbox.prop('required', !checked)
15. $this.setCustomValidity('Please select at least one option to proceed')
17. })
19. function submitFrm(e) {
20. e.preventDefault(); // Prevnts default form submit.
21. }
22. });

Pre-selecting radio button based on database
[5Replies]
- 26-Aug-2019 10:13 AM
- Forum: Using jQuery
I'm trying to find the code to pre-select a radio button based on the contact record. For example, we have a list of Major League Baseball playoff contenders and want to display a radio button list of National League playoff contenders:

Los Angeles Dodgers
St. Louis Cardinals
Atlanta Braves

I've mapped a variable to the database, called natLeagueFave. How can I set it up so that it selects the radio button?
1. var natLeagueFave = <span class=dbrecord >Favorite Team</span>
Form
1. <input type="radio" class="custom-control-input" id="Dodgers" name="natLeagueFave " value="Dodgers">
2. <input type="radio" class="custom-control-input" id="Cardinals" name="natLeagueFave " value="Cardinals">
3. <input type="radio" class="custom-control-input" id="Braves" name="natLeagueFave " value="Braves">

Changing hidden field based on select box selection
[1Reply]
- 23-Jul-2019 12:21 PM
- Forum: Using jQuery
We have the following:
- Select field called "favePet"
- Hidden field called "petRefCode"
Because we have no control over the server, we have to do this on the front end. We need to send a certain "petRefCode" based on the favorite pet selection:
1. favePet is Dog, then petRefCode is 'domestic01'
2. favePet is Cat, then petRefCode is 'domestic01'
3. favePet is Hamster, then petRefCode is 'domestic02'
4. favePet is Parrot, then petRefCode is 'domestic02'
5. favePet is Spider, then petRefCode is 'domestic03'
6. favePet is Goldfish, then petRefCode is 'domestic03'
2. <input type="hidden" name="petRefCode " id="petRefCode " value="">
4. <label for="favePet">Choose your favorite pet:</label>
5. <select id="favePet" name="favePet">
6. <option value="">--Please choose an option--</option>
7. <option value="dog">Dog</option>
8. <option value="cat">Cat</option>
9. <option value="hamster">Hamster</option>
10. <option value="parrot">Parrot</option>
11. <option value="spider">Spider</option>
12. <option value="goldfish">Goldfish</option>
13. </select>
How can I submit a hidden field based on the selection? I was experimenting with this:
2. var refCode={
3. dog : "domestic01",
4. cat : "domestic01",
5. hamster : "domestic02",
6. parrot : "domestic02",
7. spider : "domestic03",
8. goldfish : "domestic03"
9. }
12. $("#favePet").change(function(e) {
13. var [ petRefCode] = e.target.value;
14. if ( e.target.value ) {
15. $('#petRefCode').val(refCode[petRefCode]);
16. } else {
17. $('#petRefCode').val('');
18. }
19. })

IE11 ignoring script
[4Replies]
- 25-Apr-2019 10:56 AM
- Forum: Using jQuery
I have the following submitHandler that's being ignored by IE only... IE11 in my case. The form data is passing through to our database, but the modal doesn't hide and the window/tab to the downloads page doesn't open. Any ideas?
2. submitHandler: function(form) {
3. HTMLFormElement.prototype.submit.call(form);
4. $('#modalForm').modal('hide');
5. window.open("http://www.foo.com/downloads");
6. }

Changing hidden field if any checkbox is checked
[17Replies]
- 12-Apr-2019 03:49 PM
- Forum: Using jQuery
I've obviously got something wrong here. How do I pass a "interestsYes" or "interestsNo" to a hidden field based on whether any of eight checkboxes are checked? Here's what I have, which basically says, "If any checkbox is checked, set the hidden field "interestAny" to "Yes". If no checkboxes are checked, set the hidden field "interestAny" to "No".
2. $(document).ready(function() {
3. if ($("#clientForm input:clientInterest:checked").length > 0)
4. {
5. $('#interestAny').val($(this).val('Yes'));
6. } else {
7. $('#interestAny').val($(this).val('No'));
8. }
9. });
11. In the form we have this hidden field:
13. <input type="hidden" name="interestAny" value="">

Keeping Bootstrap modal open after form submission
[3Replies]
- 12-Apr-2019 10:07 AM
- Forum: Using jQuery
I have a form in a Bootstrap 4 modal and am trying to replace this modal form with a thank you message within the same modal, but the modal keeps closing after the submit button is clicked. I tried the following, but it's not working.
1. <button type="submit" class="btn btn-primary" onclick="$('#formModal').modal({'backdrop': 'static'});" >Submit</button>
The goal is to submit the data to our db when the submit button is clicked and then hide the form and display a thank you within the same modal. Here's the basics of the code for the modal:
2. <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
3. <div class="modal-dialog" role="document">
4. <div class="modal-content">
5. <div class="modal-header">
6. <h5 class="modal-title" id="formModalLabel">Client Add Form</h5>
7. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8. <span aria-hidden="true">×</span>
9. </button>
10. </div>
11. <div class="modal-body showform" id="formBody">
12. <iframe name="formSubmitFrame" id="formSubmitFrame" style="display:none;" width="0" height="0"></iframe>
13. <form action="xxxxxxxxxxxxxxxx" method="post" target="formSubmitFrame" class="needs-validation" role="form" id="form">
14. <fieldset>
15. ...form fields...
16. <div class="form-group">
17. <button type="submit" class="btn btn-primary" onclick="$('#formModal').modal({'backdrop': 'static'});" >Submit</button>
18. </div>
19. </fieldset>
20. </form>
21. </div>
22. <div class="modal-body showThankYou" id="showThankYou" style="display:none">
23. <p>Thank you. Your cliuent has been added.</p>
24. </div>
25. <div class="modal-footer">
26. </div>
27. </div>
28. </div>
29. </div>

Validating form for company email address pattern
[4Replies]
- 09-Apr-2019 05:12 PM
- Forum: Using jQuery
How can we validate an email field using jQuery so that it matches the pattern of our company's email address convention, which is four letters followed by either five numbers or four numbers and a letter? All that would be followed by the domain, which is seven letters followed by dot com.

Examples:

abcd12345@acmecor.com
abcd1234z@acmecor.com

Doing something with jQuery after form successfully submitted
[10Replies]
- 23-Mar-2019 12:48 PM
- Forum: Using jQuery
I have a form modal on a Bootstrap 4 page and want to display a success message in the modal after the form is successfully submitted, but my function is firing before validation is completed. Is it possible to plug in my post-validation jQuery in here somewhere?
2. (function() {
3. 'use strict';
4. window.addEventListener('load', function() {
5. var forms = document.getElementsByClassName('needs-validation');
6. var validation = Array.prototype.filter.call(forms, function(form) {
7. form.addEventListener('submit', function(event) {
8. if (form.checkValidity() === false) {
9. event.preventDefault();
10. event.stopPropagation();
11. }
12. form.classList.add('was-validated');
13. }, false);
14. });
15. }, false);
16. })();

How to pass URL string into JSFiddle for jQuery testing
[10Replies]
- 11-Feb-2019 11:41 AM
- Forum: Using jQuery
What's the best way to pass a URL string into JSFiddle so I can test a new jQuery script?

Dynamic divs not working in IE11
[1Reply]
- 08-Feb-2019 05:13 PM
- Forum: Using jQuery
We're displaying data based on parameters in the URL string and it's working fine in Chrome and Firefox, but not in IE11. Here's what we have.
1. CSS
2. .welcomeNew{
3. display:none;
4. }
5. .welcomeBack{
6. display:none;
7. }
9. iQuery
10. $(document).ready(function() {
11. var visitor = new URL(location);
12. var newvisitor = visitor.searchParams.get("v")
13. if (newvisitor == '0') {
14. $('.welcomeNew').show();
15. $('.welcomeBack').hide();
16. }
17. else {
18. $('.welcomeBack').show();
19. $('.welcomeNew').hide();
20. }
21. });
23. HTML
24. <h1 class="welcomeBack">Welcome back</h1>
25. <h1 class="welcomeNew">Welcome here</h1>

If input pattern matches, copy to another field
[6Replies]
- 04-Jan-2019 10:15 AM
- Forum: Using jQuery
All employees of our company have EIDs that are also associated with our work email addresses. For example, our employee ID might be abc123, so our email address is abc123@acme.com.

For one of our online forms asking for EID and email, it would be helpful if, when the input matches the pattern of the EID, to populate the EID field as well.

For example, let's say an employee enters the following for email:
john.doe@gmail.com

Nothing would populate into the EID field.

Now, let's say the employee uses his work email and enters the following:
jmd123@acme.com

The EID field would now autopopulate with the following EID:
jmd123

I'm curious how one would code this in jQuery. I have the following for the pattern, but if I use "pattern", it will validate against it. So I need something to check the input once the user leaves the email field, evaluate it, and copy it to the EID field if there's a match:
1. ```
[a-zA-Z][a-zA-Z][a-zA-Z][0-9][0-9][0-9]{6}
```

Using jQuery Validation Plugin to validate then hide email field without submitting form yet
[1Reply]
- 20-Dec-2018 09:22 AM
- Forum: Using jQuery
For a two-part form, where the first div shows just the email address and the second div, initially hidden, shows the rest of the fields, is it wise to use the jQuery Validation Plugin validator.element() https://jqueryvalidation.org/Validator.element/ to validate for the email address before hiding that and showing the remaining form fields?

For example, can this be done without a form submitHandler following?
2. $("#emailDisplay").validate({
3. rules: {
4. emailAddress: {
5. required: true,
6. email: true
7. }
8. }
Then afterwards, there would be logic to hide the #emailDisplay and show the #fieldsDisplay.

jQuery alternative for slice call argument
[7Replies]
- 24-Oct-2018 01:00 PM
- Forum: Using jQuery
Is there a cleaner way to do this using jQuery? I had a solution worked out to display the dynamic phone number, which is based on the URL string, using the id, but then realized the phone number could possibly appear in multiple places on the page.
2. $(document).ready(function(){
3. var tfn = QueryString.tfn;
4. if(tfn == '1111')
5. phoneVar = '800.555.1111'
6. else if(tfn == '2222')
7. phoneVar = '800.555.2222'
8. else if(tfn == '3333')
9. phoneVar = '800.555.3333'
10. else
11. phoneVar = '800.555.0000'
13. document.getElementById('phNumber').innerHTML = phoneVar;
15. var phClass = document.getElementById( 'phNumber' ),
16. phDivs = document.getElementsByClassName( 'phNumberC' );
18. [].slice.call( phDivs ).forEach(function ( div ) {
19. div.innerHTML = phClass.innerHTML;
20. });
22. phoneLink = "tel:" + phoneVar
23. $('a.phLink').attr('href', phoneLink);
24. });
26. <a class="phLink" href=""><span id="phNumber"></span></a>
27. <a class="phLink" href=""><span class="phNumberC"></span></a>

Locating nearest section id if it exists
[11Replies]
- 22-Oct-2018 11:01 AM
- Forum: Using jQuery
I need to pass the id of the nearest "section" if it exists. If a section doesn't exist, I need to pass the "formPlace" hidden field. If that doesn't exist, I need to pass the URL of the page. How can I do that with jQuery?
1. <section id="contactForm">
2. <form...
3. <input type="hidden" name="formPlace" id="formPlace" value="contact1234">
4. ...
5. </form>
6. </section>

Form submit tracking
[1Reply]
- 03-Oct-2018 02:20 PM
- Forum: Using jQuery
I have this for link click tracking...
1. $(document).ready(function() {
2. $('a').click(function (event) {
3. var id = $(this).attr("id");
What would be the equivalent for track form submissions? We use jQuery Validate and would trigger the form click tracking function with the submitHandler.
1. submitHandler: function(form) {
2. formClickTracking();
3. }
;

Passing URL parameters through hidden fields
[8Replies]
- 21-Sep-2018 01:32 PM
- Forum: Using jQuery
How can I grab a couple of URL parameters and pass them through hidden fields in a form submission? The strings are structured like this:

https://alert17.com?sid=TESTSID&wid=TESTWID

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend