jQuery Find and Replace String without HTML ID

May 23, 2012 | Blog, Javascript, jQuery, Web Design

I’m going to begin posting more day to day pieces of projects I’m working on, in particular solutions to problems I come across along the way.

I’ve been updating an e-commerce checkout page for a client, but since the store uses a hosted solution I often come across parts of pages I have no control over the HTML or content strings. For example, this specific hosted solution allows gift wrapping with a gift message input field, but my client only wishes to provide a gift message, no wrapping. Unfortunately the h4 element always says ‘Gift Wrap’ regardless if wrapping is turned off and messaging turned on. Therefore I used a combination of the jQuery contains selector with the jQuery replaceWith function to replace ‘Gift Wrap’ with ‘Gift Message’. Like so:

$(document).ready(function() { $("h4:contains('Wrap')").replaceWith("<h4>Gift Message</h4>"); });

I could have also used JavaScript find and replace by element ID, but the string I was looking to replace did not have a unique element ID that I could access. The jQuery solution above works around not using an HTML ID and instead focuses on the specific text.

Kennedy Center Website Updates

Lots of exciting website updates were launched last week with the Washington National Opera and Kennedy Center affiliation on July 1st… which were also the primary reason why my blog has taken a back seat for the past month.

Two primary updates (among many) in which I focused on their design and implementation were the new contribute pages for Kennedy Center, WNO, and NSO; and the new event pages. Both gave me the opportunity to further my jQuery and JavaScript knowledge as well as get more familiar with ColdFusion.

Continue reading “Kennedy Center Website Updates” »

JavaScript – Scrolling Sidebar & Offset

Jun 9, 2011 | Blog, Javascript, jQuery, Web Design

Learning JavaScript little by little, thought I’d start posting on my discoveries.

Early this week I was working on a secondary side navigation similar to this example. The accompany code tutorial works great, but the main problem I ran into was that the page content was separated via jQuery tabs. Also, the scrolling side navigation was located in an initially hidden tab via display=none (see diagrams below).

Continue reading “JavaScript – Scrolling Sidebar & Offset” »

Custom PayPal Form with Required Fields

May 18, 2011 | Blog, Javascript, PHP, Tutorial, Web Design

Built a custom PayPal form for a client today, and had trouble find resources regarding validating required form fields. In the end, I added some Javascript in the header to check required fields were not left blank as well as check one field was a certain length of characters. In the form code below I used a fake email, be sure to replace it with the receiving PayPal account email.

Javascript (in header):

function validateForm() { var x=document.forms["myPayPal"]["os0"].value if (x==null || x=="") { alert("Please enter a patient account number"); return false; } if (!(x.length == 6)) { alert("Please enter a six digit account number"); return false; } var y=document.forms["myPayPal"]["os1"].value if (y==null || y=="") { alert("Please enter a patient name"); return false; } var z=document.forms["myPayPal"]["amount"].value if (z==null || z=="") { alert("Please enter a payment amount"); return false; } }

Form (in body):

<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm"> <input type="hidden" name="item_name" value="Fake PayPal Form"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="business" value="email@fakeemail.com"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="return" value="http://www.fake-web-address.com/success.html"> <input type="hidden" name="on0" value="Patient Account Number">Patient Account Number: <input type="text" name="os0" maxlength="60"> <input type="hidden" name="on1" value="Patient Full Name">Patient Full Name: <input type="text" name="os1" maxlength="60"> Amount:<input name="amount" type="text" id="amount" size="45"> <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" value="Submit"> </form>

References
http://freelanceswitch.com/money/making-a-paypal-form-tutorial/
http://www.webcheatsheet.com/javascript/form_validation.php
http://www.w3schools.com/js/js_form_validation.asp

If you’ve had success with any other validation methods, or checking for other requirements, please leave a comment!