The Hindu

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> <title>The Hindu</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&display=swap"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="./assets/css/front-page.css?service=123465"> <script> (function(src) { var a = document.createElement("script"); a.type = "text/javascript"; a.async = true; a.src = src; var b = document.getElementsByTagName("script")[0]; b.parentNode.insertBefore(a, b) })("https://experience.tinypass.com/xbuilder/experience/load?aid=DC3REpZYpu"); var dataLayer = window.dataLayer = window.dataLayer || []; /* Google tag manager */ (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', "GTM-PM7GK3NX"); </script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> </head> <body> <header class="header"> <div class="container"> <div class="logo"> <a href="https://www.thehindu.com/"><img src="https://www.thehindu.com/theme/images/th-online/thehindu-logo.svg" class="" alt="The Hindu Logo" title="The Hindu Logo"></a> </div> </div> </header> <section id="front-page" style="display: block;"> <div class="front-page"> <div class="slider"> <div class="owl-carousel owl-theme">  <div class="item"> <div class="picture"> <img src="./assets/images/picture2.png" alt=""> </div> </a> </div> <div class="item"> <div class="picture"> <img src="./assets/images/picture3.png" alt=""> </div> </a> </div> <div class="item"> <div class="picture"> <img src="./assets/images/picture4.png" alt=""> </div> </a> </div> <div class="item"> <div class="picture"> <img src="./assets/images/picture5.png" alt=""> </div> </a> </div> </div> </div> <div class="content-body"> <div class="content"> <h1 class="main-title">Priceless gift for <br>your loved ones</h1> <p>A framed collectible of The Hindu's front page on your chosen date</p> <form class="form-content" id="select-frame"> <div class="form-group" id="bootstrap-datepicker"> <label>Select a date*</label> <input type="text" class="form-control date-btn" placeholder="Choose a date" id="date" tabindex="1" data-provide="datepicker" readonly value=""> <span class="error-msg">Please choose date</span> </div> <div class="form-group"> <label>Choose your frame preference</label> <div class="form-control select-label" data-is-selected="" id="frame">Select a frame</div> <div class="drop-list"> </div> </div> <div class="pay-btn"> <p class="note">The image will be printed in high-resolution on card paper with these dimensions - 43 cm x 29 cm</p> <p>Please note it's a reprint of the front page not the original newspaper.</p> <div class="form-group"> <button type="button" class="basic-btn" abindex="7" disabled>Next</button> </div> </div> </form> </div> </div> </div> </section> <section id="checkout-page" style="display: none;"> <div class="front-page"> <div class="selected-frame "> <div class="frame"> <div class="picture"> <img id="dynamic-image" src="./assets/images/loader.png" alt=""> </div> </div> </div> <div class="content-body checkout"> <div class="content "> <h1 class="main-title">Checkout</h1> <button id="backButton">Change Date</button> <p>Your Selected options</p> <h3 id="output"><span class="output-date"></span> Frontpage with <div id="framename"></div> </h3> <form class="form-content" id="checkout-form"> <div class="form-group"> <label>Name*</label> <input type="text" class="form-control" placeholder="Full Name" required id="name" tabindex="1"> <span class="error-msg">Please enter your name</span> </div> <div class="form-group"> <label>Mobile Number*</label> <input type="number" class="form-control" placeholder="" required id="number" tabindex="2" pattern="[1-9]{1}[0-9]{9}" maxlength="10" style="padding-left: 60px" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"> <span class="prefix-number">+91</span> <span class="bar" > | </span> <span class="error-msg">Please enter a valid mobile number</span> </div> <div class="form-group"> <label>Pincode*</label> <input type="number" class="form-control" onkeyup="return getStateByPincode(this.value)" placeholder="6 digits PIN code" required id="pincode" tabindex="3" maxlength="6" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"> <span class="error-msg">Please enter pin code</span> </div> <div class="form-group"> <label>Address with Landmark*</label> <textarea rows="4" required class="form-control" id="addr" placeholder="Flat, House no., Building, Company, Apartment,Area, Street, Sector, Village, State, Town, City"></textarea> <span class="error-msg">Please enter an address</span> </div> <div class="flex-box"> <div class="form-group" id="statelist"> <label>Choose your State</label> <div class="form-control select-label" data-is-selected="" data-short-code="" id="state">Select state</div> <span class="error-msg">Please select state</span> <div class="drop-list" id="gst-drop-list" style="display: none;"> </div> </div> <div class="form-group"> <label>GST Number (add if applicable)</label> <input type="text" class="form-control" placeholder="GST number" id="gst" tabindex="6" pattern="[A-Za-z0-9]+"> <span class="error-msg">Please enter GST number</span> </div> </div> <div class="form-group"> <button type="submit" class="payment basic-btn" tabindex="7"><s id="strikeAmount" class="strike"></s> <span id="buyNowText"></span></button> </div> <p class="note">Includes GST & Tax. The discounted price is an introductory offer.</p> </form> </div> </div> </div> </section> <footer> <div class="footer"> <div class="container"> <div class="link-list"> <a href="https://www.thehindugroup.com/termsofuse.html">Terms of use</a> <a href="https://www.thehindugroup.com/privacy.html">Privacy policy</a> </div> <p class="copyrights"> Copyright© 2024, THG PUBLISHING PVT LTD. or its affiliated companies. All rights reserved. </p> </div> </div> </footer> </body> <style> @media screen and (max-width: 570px) { #framename { text-align: center; font-size: 20px; } .selected-frame .frame { width: 100%; padding: 20px; max-width: 300px; background: #fff; } } </style> <script> const photoFrameBaseUrl = 'https://fpapi.thehindu.com'; const SECRET_KEY = "dmsfbJBsdfb45@$!djfJKHd"; const paymentDomain = 'https://pay.thehindu.com'; const fetchImageUrl = 'https://timemachine.thehindu.co.in/api/frontpage/get-preview?date='; tp = window["tp"] || []; let validCoupon = false; let states = []; const ccode = getQueryParam('cc'); $(document).ready(function () { // Check for query parameters and take action accordingly const frameId = getQueryParam('frameId'); const date = getQueryParam('date'); if (frameId !== null) { fetchPhotoFrames() .then(() => autoSelectFrame(frameId)) .catch((error) => console.error('Error fetching frames:', error)); } if(ccode != null && (frameId || getSessionValue('frameID'))){ const frameid = frameId || getSessionValue('frameID'); fetchPhotoFrames() .then(() => validateCoupon(ccode,frameid)) .catch((error) => console.error('Error fetching frames:', error)); } if (date !== null) { setDatepickerValue(date); } // Toggle dropdown lists on clicks $('#frame').click(function (event) { event.stopPropagation(); $('.drop-list').toggle(); }); $('#state').click(function (event) { event.stopPropagation(); $('#gst-drop-list').toggle(); }); // Initialize date picker $('#bootstrap-datepicker input').datepicker({ format: "D, dd MM, yyyy", autoclose: true, todayHighlight: true, startDate: new Date(1881, 0, 1), endDate: new Date(), orientation: "bottom" }).on('changeDate', function () { const selectedDate = $('#bootstrap-datepicker input').val(); setSessionValue('selectedDate', selectedDate); enableNextButton(); }); $(".owl-carousel").owlCarousel({ margin: 10, loop: true, autoplay: true, nav: false, dots: true, stagePadding: 220, center: true, items:1, slideBy:1, responsive:{ 0:{ stagePadding: 80, }, 600:{ stagePadding: 200, }, 1000:{ stagePadding: 300, }, 1200:{ stagePadding: 120, }, 1400:{ stagePadding: 220, } } }); initializePage(); // Handle button clicks $('#front-page [type="button"]').on('click', handleNextButtonClick); $('#backButton').on('click', handleBackButtonClick); }); // Form submission logic with validation document.getElementById("checkout-form").addEventListener("submit", function (event) { event.preventDefault(); const name = document.getElementById("name").value.trim(); const number = document.getElementById("number").value.trim(); const pincode = document.getElementById("pincode").value.trim(); const address = document.getElementById("addr").value.trim(); const state = document.getElementById("state").dataset.shortCode.trim(); const gst = document.getElementById("gst").value.trim(); let isValid = true; // Clear previous error messages document.querySelectorAll(".error-msg").forEach((msg) => (msg.style.display = "none")); // Validate form fields if (!name) { showError("name", "Please enter your name"); isValid = false; } if (!/^\d{10}$/.test(number)) { showError("number", "Please enter a valid 10-digit mobile number"); isValid = false; } if (!/^\d{6}$/.test(pincode)) { showError("pincode", "Please enter a valid 6-digit pin code"); isValid = false; } if (!address) { showError("addr", "Please enter an address"); isValid = false; } if (!state || state === '') { showError("state", "Please select a state"); isValid = false; } if (isValid) { const formData = { name, number, pincode, address, state, gst }; setSessionStorageJson("checkoutFormData", formData); tp.push(["init", function () { if (tp.user.isUserValid()) { submitFormData(formData); } else { tp.pianoId.show({ loggedIn: function (data) { location.reload(); } }); } }]); } }); const SESSION_PREFIX = "app_"; function setSessionValue(key, value) { sessionStorage.setItem(`${SESSION_PREFIX}${key}`, value); } function getSessionValue(key) { return sessionStorage.getItem(`${SESSION_PREFIX}${key}`); } function clearSessionValue(key) { sessionStorage.removeItem(`${SESSION_PREFIX}${key}`); } function showError(elementId, message) { const errorSpan = document.querySelector(`#${elementId} ~ .error-msg`); if (errorSpan) { errorSpan.textContent = message; errorSpan.style.display = "block"; } } if(getSessionValue('selectedframePrice') && getSessionStorageJson('selectedFrame') && getSessionValue('selectedframePrice') != getSessionStorageJson('selectedFrame').activePrice) { setSessionValue('selectedframePrice', parseFloat(getSessionStorageJson('selectedFrame').activePrice)); } async function initializePage() { try { await fetchPhotoFrames(); const storedDate = getSessionValue('selectedDate'); const frameId = getSessionValue('frameID'); if (storedDate && frameId) { navigateToCheckout(); } await fetchStateList(); populateFormFromSession(); } catch (error) { console.error('Error during page initialization:', error); showError('pageError', 'Failed to initialize the page. Please try again later.'); } } function handleNextButtonClick() { const selectedDate = getSessionValue('selectedDate'); const frameId = getSessionValue('frameID'); enableNextButton(); if (selectedDate && frameId) { navigateToCheckout(); } else { alert('Please select both a frame and date before proceeding.'); } } function enableNextButton() { const selectedDate = getSessionValue('selectedDate'); const frameId = getSessionValue('frameID'); const nextButton = document.querySelector("#select-frame button"); nextButton.disabled = !(selectedDate && frameId); } function handleBackButtonClick() { const storedDate = getSessionValue('selectedDate'); const storedFrameName = getSessionValue('selectedframeName'); enableNextButton(); if (storedDate) { $('#bootstrap-datepicker input').datepicker('setDate', storedDate); } if (storedFrameName) { $('#frame').text(storedFrameName); } $('#checkout-page').hide(); $('#front-page').show(); } function navigateToCheckout() { const selectedDate = getSessionValue('selectedDate'); const selectedFrameName = getSessionValue('selectedframeName'); const selectedFramePrice = getSessionValue('selectedframePrice'); const strikeAmount = getSessionValue('strikeamount'); $('.output-date').text(formatDate(selectedDate)); $('#framename').text(selectedFrameName); $('#strikeAmount').text(`₹ ${strikeAmount}`); $('#buyNowText').text(`₹ ${selectedFramePrice}`); $('#front-page').hide(); $('#checkout-page').show(); showPreviewEdition(selectedDate); } async function fetchPhotoFrames() { try { const response = await fetch(`${photoFrameBaseUrl}/photoFrames/all`, { headers: { "x-secret-key": SECRET_KEY } }); if (!response.ok) { if (response.status === 404) { clearFrameSelection(); } throw new Error('Failed to fetch frames'); } const frames = await response.json(); populateDropdown(frames.filter(frame => frame.isSealed === 1)); } catch (error) { console.error('Error fetching frames:', error); showError('frameError', 'Unable to fetch frames. Please try again later.'); } } function populateDropdown(frames) { const dropList = document.querySelector('.drop-list'); dropList.innerHTML = ''; frames.forEach(frame => { const optionElement = createFrameOption(frame); dropList.appendChild(optionElement); }); } function createFrameOption(frame) { const optionElement = document.createElement('div'); optionElement.className = 'option'; optionElement.dataset.frame = frame.frameName; optionElement.dataset.frameid = frame.frameId; optionElement.textContent = frame.displayName; optionElement.addEventListener('click', () => handleFrameSelection(frame, optionElement)); return optionElement; } function handleFrameSelection(frame, selectedOption) { document.querySelectorAll('.drop-list .option').forEach(option => option.classList.remove('selected')); selectedOption.classList.add('selected'); updateFrameSelection(frame); $('#frame').text(frame.displayName).data('isSelected', "yes"); updateSliderClass(formatFrameName(frame.displayName)); enableNextButton(); $('.drop-list').hide(); } function updateFrameSelection(frame) { setSessionStorageJson("selectedFrame", frame); setSessionValue("frameID", frame.frameId); setSessionValue("selectedframeName", frame.displayName); setSessionValue("selectedframePrice", parseFloat(frame.activePrice)); setSessionValue("strikeamount", parseFloat(frame.frameAmount)); if(ccode && frame.frameId) { validateCoupon(ccode, frame.frameId) } } function clearFrameSelection() { clearSessionValue('frameID'); clearSessionValue('selectedframeName'); clearSessionValue('selectedframePrice'); clearSessionValue('selectedDate'); clearSessionValue('previewImageURL'); clearSessionValue('strikeamount'); clearSessionStorageJson('selectedFrame') } function formatFrameName(frameName) { return frameName.toLowerCase().replace(/\s+/g, '-'); } function updateSliderClass(formattedText) { const sliderDiv = document.querySelector('.slider'); sliderDiv.className = 'slider'; sliderDiv.classList.add(formattedText); } function autoSelectFrame(frameId) { const correspondingOption = document.querySelector(`.option[data-frameid="${frameId}"]`); if (correspondingOption) { correspondingOption.click(); } else { console.error('Frame ID not found:', frameId); } } function setDatepickerValue(date) { const dateInput = $('#bootstrap-datepicker input'); if (dateInput.length) { const datePattern = /^\d{4}-\d{2}-\d{2}$/; if (!datePattern.test(date)) { console.error('Invalid date format. Expected YYYY-MM-DD'); return; } const [year, month, day] = date.split('-'); const parsedDate = new Date(year, month - 1, day); if (isNaN(parsedDate)) { console.error('Invalid date value'); return; } dateInput.datepicker('setDate', parsedDate); setSessionValue('selectedDate', dateInput.val()); } else { console.error('Datepicker input not found'); } } function formatDate(dateString) { const date = new Date(dateString); const options = { year: 'numeric', month: 'long', day: 'numeric' }; return date.toLocaleDateString('en-GB', options); } async function showPreviewEdition(datestring) { const date = formatDateToYYYYMMDD(new Date(datestring)); const previewImageUrl = getSessionValue('previewImageURL'); if (!date) { alert('No date selected. Please select a date to view the preview edition.'); return; } if (previewImageUrl && previewImageUrl === fetchImageUrl + date) { document.getElementById('dynamic-image').src = previewImageUrl; } else { try { const response = await fetch(fetchImageUrl + date); if (!response.ok) { if (response.status === 404) { alert('Sorry! No edition available for the selected date. Please select another date.'); document.querySelector('.payment.basic-btn').disabled = true; document.getElementById('dynamic-image').src = './assets/images/frame-bg.png'; } throw new Error('Image not found'); } document.querySelector('.payment.basic-btn').disabled = false; const imageUrl = fetchImageUrl + date; document.getElementById('dynamic-image').src = imageUrl; setSessionValue("previewImageURL", imageUrl); } catch (error) { console.error('Error fetching image:', error); } } } function getQueryParam(param) { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(param); } function formatDateToYYYYMMDD(dateObject) { const year = dateObject.getFullYear(); const month = String(dateObject.getMonth() + 1).padStart(2, '0'); const day = String(dateObject.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } async function fetchStateList() { try { const response = await fetch("gstjson.json"); states = await response.json(); states.sort((a, b) => a.state_name.localeCompare(b.state_name)); populateStateDropdown(states); } catch (error) { console.error("Error fetching state list:", error); showError('stateError', 'Unable to fetch states. Please try again later.'); } } function populateStateDropdown(states) { const stateDropdown = document.getElementById("state"); const dropList = document.getElementById("gst-drop-list"); dropList.innerHTML = states .map(state => `<div class="option" data-code="${state.short_code}">${state.state_name}</div>`) .join(""); dropList.addEventListener("click", event => { if (event.target.classList.contains("option")) { stateDropdown.textContent = event.target.textContent; stateDropdown.dataset.shortCode = event.target.dataset.code; dropList.style.display = "none"; } }); } function setSessionStorageJson(key, value) { sessionStorage.setItem(`${SESSION_PREFIX}${key}`, JSON.stringify(value)); } function getSessionStorageJson(key) { const data = sessionStorage.getItem(`${SESSION_PREFIX}${key}`); return data ? JSON.parse(data) : null; } function clearSessionStorageJson() { Object.keys(sessionStorage).forEach(key => { if (key.startsWith(SESSION_PREFIX)) { sessionStorage.removeItem(key); } }); } // Submit Form Data async function submitFormData(formData) { const { name, number, pincode, address, state, gst } = formData; const frameId = getSessionValue('frameID'); const frameName = getSessionValue('selectedframeName'); const framePrice = getSessionValue('selectedframePrice'); const editionDate = formatDateToYYYYMMDD(new Date(getSessionValue('selectedDate'))); const userId = tp.pianoId.getUser()?.uid; const userEmail = tp.pianoId.getUser()?.email; const retryUrl = window.location.href; const redirectUrl = window.location.href; // Data Layer for Analytics window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'checkout_initiated', 'data': { 'date': editionDate, 'frame': frameName, 'pincode': pincode, 'name': name, 'mobile': number, 'email': userEmail, 'price': framePrice, 'UID': userId, } }); const headers = new Headers({ "Content-Type": "application/json" }); // Append Piano Token if available const pianoToken = tp.pianoId.getToken(); if (pianoToken) headers.append("x-piano-token", pianoToken); document.querySelector('.payment.basic-btn').disabled = true; const payload = { userId, name, mobileNumber: number, email: userEmail, pincode, address, frameId, editionDate, stateShortCode: state, gstNumber: gst }; if(ccode && validCoupon && ccode != null) { payload.promoCode = ccode; } try { const response = await fetch(`${photoFrameBaseUrl}/users/adduser`, { method: "POST", headers, body: JSON.stringify(payload), }); const result = await response.json(); if (result.paymentId) { console.log("Payment successfully initiated:", result.paymentId); await submitPaymentSuccess(result.paymentId, retryUrl, redirectUrl); } else { document.querySelector('.payment.basic-btn').disabled = false; console.error("Error: Payment ID is undefined.", result); alert('Something went wrong. Please try again later.'); } } catch (error) { alert('Something went wrong. Please try again later.'); console.error("Error submitting form data:", error); } } async function validateCoupon(code,frameId) { const headers = new Headers({ "Content-Type": "application/json" }); // Append Piano Token if available const pianoToken = tp.pianoId?.getToken(); if (pianoToken) headers.append("x-piano-token", pianoToken); const payload = { promoCode: code, frameId: frameId, }; if(tp.pianoId?.getUser()?.uid) { payload.userId = tp.pianoId?.getUser()?.uid; } try { const response = await fetch(`${photoFrameBaseUrl}/promocode/validate`, { method: "POST", headers, body: JSON.stringify(payload), }); const result = await response.json(); if (result?.finalAmount) { console.log("Coupon Apply Success"); setSessionValue("selectedframePrice", parseFloat(result.finalAmount)); $('#buyNowText').text(`₹ ${result.finalAmount}`); validCoupon = true; } else { validCoupon = false; console.error("Error: Coupon Apply Failed.", result); } } catch (error) { validCoupon = false; console.error("Error applying coupon:", error); } } function submitPaymentSuccess(paymentId, retryUrl, redirectUrl) { const form = document.createElement('form'); form.action = `${paymentDomain}/frontpage/order`; form.method = "POST"; form.appendChild(createHiddenInput('user_payment_id', paymentId)); form.appendChild(createHiddenInput('retry_url', retryUrl)); form.appendChild(createHiddenInput('redirect_url', redirectUrl)); document.body.appendChild(form); clearSessionStorageJson(); form.submit(); } function createHiddenInput(name, value) { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; return input; } // Populate Form from Session function populateFormFromSession() { const formData = getSessionStorageJson("checkoutFormData"); if (formData) { document.getElementById("name").value = formData.name || ""; document.getElementById("number").value = formData.number || ""; document.getElementById("pincode").value = formData.pincode || ""; document.getElementById("addr").value = formData.address || ""; fetchStateList().then(() => { populateStateDropdown(states); const stateSelector = `#gst-drop-list .option[data-code="${formData.state}"]`; const stateCorrespondingOption = document.querySelector(stateSelector); if (stateCorrespondingOption) { stateCorrespondingOption.click(); } else { console.error('State not found:', formData.state); } }); document.getElementById("gst").value = formData.gst || ""; } } // Error Handling Utilities function displayError(fieldId, message) { const fieldGroup = document.getElementById(fieldId)?.closest(".form-group"); if (fieldGroup) { const errorSpan = fieldGroup.querySelector(".error-msg"); errorSpan.textContent = message; errorSpan.style.display = "block"; } } function clearError(fieldId) { const fieldGroup = document.getElementById(fieldId)?.closest(".form-group"); if (fieldGroup) { const errorSpan = fieldGroup.querySelector(".error-msg"); errorSpan.textContent = ""; errorSpan.style.display = "none"; } } // State by Pincode function getStateByPincode(pincode) { const pin = parseInt(pincode.toString().slice(0, 3)); if (isNaN(pin) || pincode.length !== 6) { displayError("pincode", "Invalid Pincode. Please enter a 6-digit number."); return; } const matchedState = states.find( state => pin >= state.range[0] && pin <= state.range[1] ); if (matchedState) { const stateElement = $('#state'); stateElement.text(matchedState.state_name); stateElement.attr('data-is-selected', 'yes'); stateElement.attr('data-short-code', matchedState.short_code); clearError("pincode"); } else { displayError("pincode", "Pincode not found in any state range."); } } </script> </html>

CINXE.COM

The Hindu