CRM 및 데이터 플랫폼

오늘 날짜와 JavaScript 또는 JQuery로 양식 필드를 미리 채우는 방법

많은 솔루션이 각 양식 항목에 날짜를 저장할 수 있는 기회를 제공하지만 옵션이 아닌 경우도 있습니다. 우리는 고객이 사이트에 숨겨진 필드를 추가하고 이 정보를 항목과 함께 전달하여 양식 항목이 입력되는 시기를 추적할 수 있도록 권장합니다. JavaScript를 사용하면 쉽습니다.

오늘 날짜와 JavaScript로 양식 필드를 미리 채우는 방법

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with JavaScript</title>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Function to get today's date in the desired format
        function getFormattedDate() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            return formattedDate;
        }

        // Use JavaScript to set the value of the hidden field to today's date
        document.getElementById('hiddenDateField').value = getFormattedDate();
    </script>
</body>
</html>

제공된 HTML 및 JavaScript 코드를 단계별로 분석해 보겠습니다.

  1. <!DOCTYPE html><html>: 이는 HTML5 문서임을 지정하는 표준 HTML 문서 선언입니다.
  2. <head>: 이 섹션은 일반적으로 웹페이지 제목과 같은 문서에 대한 메타데이터를 포함하는 데 사용됩니다. <title> 요소입니다.
  3. <title>: 웹페이지 제목을 "JavaScript로 날짜 미리 채우기"로 설정합니다.
  4. <body>: 표시되는 콘텐츠와 사용자 인터페이스 요소를 배치하는 웹페이지의 기본 콘텐츠 영역입니다.
  5. <form>: 입력 필드를 포함할 수 있는 양식 요소입니다. 이 경우 오늘 날짜로 채워질 숨겨진 입력 필드를 포함하는 데 사용됩니다.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: 숨겨진 입력 필드입니다. 페이지에는 나타나지 않지만 데이터를 저장할 수 있습니다. JavaScript에서 식별하고 사용하기 위해 "hiddenDateField"라는 ID와 "hiddenDateField"라는 이름이 부여됩니다.
  7. <script>: JavaScript 코드를 작성할 수 있는 JavaScript 스크립트 블록의 여는 태그입니다.
  8. function getFormattedDate() { ... }: 이는 다음과 같은 JavaScript 함수를 정의합니다. getFormattedDate(). 이 함수 내부:
    • 그것은 새로운 것을 창조한다 Date 현재 날짜와 시간을 나타내는 객체 const today = new Date();.
    • 다음을 사용하여 날짜를 원하는 형식(mm/dd/yyyy)의 문자열로 형식화합니다. today.toLocaleDateString(). 그만큼 'en-US' 인수는 서식 지정을 위한 로케일(미국 영어)을 지정하고 개체는 year, monthday 속성은 날짜 형식을 정의합니다.
  9. return formattedDate;: 이 줄은 형식이 지정된 날짜를 문자열로 반환합니다.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: 다음 코드 줄은 다음과 같습니다.
    • 사용 document.getElementById('hiddenDateField') ID가 "hiddenDateField"인 숨겨진 입력 필드를 선택합니다.
    • 설정 value 선택한 입력 필드의 속성을 getFormattedDate() 기능. 그러면 숨겨진 필드가 지정된 형식의 오늘 날짜로 채워집니다.

최종 결과는 페이지가 로드될 때 ID가 "hiddenDateField"인 숨겨진 입력 필드가 다음에 지정된 대로 선행 XNUMX 없이 mm/dd/yyyy 형식의 오늘 날짜로 채워지는 것입니다. getFormattedDate() 기능.

오늘 날짜와 jQuery로 양식 필드를 미리 채우는 방법

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with jQuery and JavaScript Date Object</title>
    <!-- Include jQuery from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Use jQuery to set the value of the hidden field to today's date
        $(document).ready(function() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            $('#hiddenDateField').val(formattedDate);
        });
    </script>
</body>
</html>

이 HTML 및 JavaScript 코드는 jQuery를 사용하여 선행 XNUMX 없이 mm/dd/yyyy 형식의 오늘 날짜로 숨겨진 입력 필드를 미리 채우는 방법을 보여줍니다. 단계별로 분석해 보겠습니다.

  1. <!DOCTYPE html><html>: 이는 HTML5 문서임을 나타내는 표준 HTML 문서 선언입니다.
  2. <head>: 이 섹션은 웹페이지에 대한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
  3. <title>: 웹페이지 제목을 "jQuery 및 JavaScript 날짜 개체로 날짜 미리 채우기"로 설정합니다.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: 이 줄에는 CDN(콘텐츠 전송 네트워크)의 소스를 지정하여 jQuery 라이브러리가 포함되어 있습니다. 웹페이지에서 jQuery 라이브러리를 사용할 수 있는지 확인합니다.
  5. <body>: 표시되는 콘텐츠와 사용자 인터페이스 요소를 배치하는 웹페이지의 기본 콘텐츠 영역입니다.
  6. <form>: 입력 필드를 포함하는 데 사용되는 HTML 양식 요소입니다. 이 경우 숨겨진 입력 필드를 캡슐화하는 데 사용됩니다.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: 웹페이지에 표시되지 않는 숨겨진 입력 필드입니다. ID는 "hiddenDateField"이고 이름은 "hiddenDateField"입니다.
  8. <script>: JavaScript 코드를 작성할 수 있는 JavaScript 스크립트 블록의 여는 태그입니다.
  9. $(document).ready(function() { ... });: jQuery 코드 블록입니다. 그것은 $(document).ready() 페이지가 완전히 로드된 후 포함된 코드가 실행되도록 하는 함수입니다. 이 함수 내부:
    • const today = new Date(); 새로운 창조 Date 현재 날짜와 시간을 나타내는 객체입니다.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); 날짜를 원하는 형식(mm/dd/yyyy)의 문자열로 형식화합니다. toLocaleDateString 방법.
  10. $('#hiddenDateField').val(formattedDate); jQuery를 사용하여 ID가 ​​"hiddenDateField"인 숨겨진 입력 필드를 선택하고 해당 필드를 설정합니다. value 형식화된 날짜로. 이렇게 하면 숨겨진 필드가 지정된 형식의 오늘 날짜로 효과적으로 미리 채워집니다.

jQuery 코드는 순수 JavaScript에 비해 숨겨진 입력 필드를 선택하고 수정하는 프로세스를 단순화합니다. 페이지가 로드되면 숨겨진 입력 필드는 mm/dd/yyyy 형식의 오늘 날짜로 채워지며 앞에 지정된 XNUMX은 없습니다. formattedDate 변하기 쉬운.

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.