Technology Blog Freebies Web Development SEO CSS HTML5 Javascript Internet things and more

Simple React Use State Example

import { useState } from "react";

function Post(){

const [inval, setInVal] = useState('');


function changeTextHandler(e){

    setInVal(e.target.value);
}

    return (
        <>
        <form>
            <textarea onChange={changeTextHandler}/>
            <div>{inval}</div>
        </form>
        </>
    )
};

export default Post;

Boostrap 5 keep last opened tab ID after page reload using Local Storage

Max length input validation inline with javascript

<input type="text" class="form-control" id="txtProjectCreateProjectCode"

placeholder="Project Code" required oninput="if (this.value.length > 50) this.value = this.value.slice(0, 50);" name="CreateProject.Code" value="">

Bootstrap 5 Logout confirmation for .net core

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Logout Confirmation</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to sign out?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form id="logoutForm" asp-action="logoff" asp-controller="Auth" class="navbar-right">
                        <a class="btn btn-primary"
                      @*   onclick="return alert('Are you sure do you want to sign out?')" *@
                        href="javascript:document.getElementById('logoutForm').submit()"><i class="mdi mdi-logout me-1"></i><span>Logout</span></a>
                    </form>
                </div>
            </div>
        </div>
    </div>

 <a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal">
     <i class="mdi mdi-logout me-1"></i> Logout
 </a>

OTP Countdown JavaScript Version 2 - Initial Page load countdown

 <button id="resendOtp" class="btn  mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border:0px solid  #1f3d88;
background:transparent;
color:#1f3d88;">
                        <i class="fa-solid fa-rotate-right"></i> &nbsp;
                        Resend OTP
                    </button>

                    <div id="countdown" style="display: block; text-align: center;
    font-size: 12px;
    color: #fdb827;">
                        Resend OTP in <span id="timer">120</span> seconds
                    </div>

                    <script>

                        function startCountdown() {

                            const resendButtonInit = document.getElementById("resendOtp");
                            resendButtonInit.disabled = true;
                            let seconds = 120;

                            // Function to update the countdown timer
                            function updateTimer() {
                                const timer = document.getElementById("timer");
                                timer.textContent = seconds;
                                seconds--;

                                if (seconds < 0) {
                                    // Hide the countdown when the timer reaches 0
                                    const countdownDiv = document.getElementById("countdown");
                                    countdownDiv.style.display = "none";
                                    resendButtonInit.disabled = false;
                                } else {
                                    // Continue updating the timer
                                    setTimeout(updateTimer, 1000);
                                }
                            }

                            // Start the countdown
                            updateTimer();
                        }

                        // Call startCountdown function when the page loads
                        window.onload = startCountdown;

                        var resendOtpBtn = document.getElementById("resendOtp");

                        resendOtpBtn.addEventListener('click',function(){
                            resendOtp();
                        });

                        function resendOtp() {
                            // Get the value of the textPhoneNumber input field
                            const phoneNumber = document.getElementById("textPhoneNumber").value;

                            // Disable the "Resend OTP" button
                            const resendButton = document.getElementById("resendOtp");
                            resendButton.disabled = true;

                            // Show the countdown timer
                            const countdownDiv = document.getElementById("countdown");
                            countdownDiv.style.display = "block";

                            let seconds = 120;

                            // Function to update the countdown timer
                            function updateTimer() {
                                const timer = document.getElementById("timer");
                                timer.textContent = seconds;
                                seconds--;

                                if (seconds < 0) {
                                    // Re-enable the button and hide the countdown when the timer reaches 0
                                    resendButton.disabled = false;
                                    countdownDiv.style.display = "none";
                                } else {
                                    // Continue updating the timer
                                    setTimeout(updateTimer, 1000);
                                }
                            }

                            // Start the countdown
                            updateTimer();

                            // Create a JSON object with the MobileNo property
                            const data = {
                                MobileNo: phoneNumber
                            };

                            // Send a POST request to the API endpoint
                            fetch("https://localhost:7146/api/security/resend-otp", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                body: JSON.stringify(data)
                            })
                                .then(response => {
                                    if (response.ok) {
                                        // Handle success
                                       //alert("OTP resend request successful");

                                    } else {
                                        // Handle errors
                                        alert("OTP resend request failed");

                                    }
                                })
                                .catch(error => {
                                    console.error("An error occurred:", error);

                                });
                        }
                    </script>

OTP Countdown Script Javascript

<button id="resendOtp" class="btn mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border: 0px solid #1f3d88; background: transparent; color: #1f3d88;">Resend OTP</button>



<input class="form-control valid" id="textPhoneNumber" readonly="" type="text" data-val="true" data-val-regex="Not a valid phone number." data-val-regex-pattern="^(?:7|0)[0-9]{9,9}$" data-val-required="Phone number is Required." name="PhoneNumber" value="0717194022" aria-describedby="textPhoneNumber-error" aria-invalid="false">



<div id="countdown" style="display: block;">Resend OTP in <span id="timer">120</span> seconds</div>



<script>

function startCountdown() {

  let seconds = 120;



  // Function to update the countdown timer

  function updateTimer() {

    const timer = document.getElementById("timer");

    timer.textContent = seconds;

    seconds--;



    if (seconds < 0) {

      // Hide the countdown when the timer reaches 0

      const countdownDiv = document.getElementById("countdown");

      countdownDiv.style.display = "none";

    } else {

      // Continue updating the timer

      setTimeout(updateTimer, 1000);

    }

  }



  // Start the countdown

  updateTimer();

}



// Call startCountdown function when the page loads

window.onload = startCountdown;



function resendOtp() {

  // Get the value of the textPhoneNumber input field

  const phoneNumber = document.getElementById("textPhoneNumber").value;



  // Disable the "Resend OTP" button

  const resendButton = document.getElementById("resendOtp");

  resendButton.disabled = true;



  // Show the countdown timer

  const countdownDiv = document.getElementById("countdown");

  countdownDiv.style.display = "block";



  let seconds = 120;



  // Function to update the countdown timer

  function updateTimer() {

    const timer = document.getElementById("timer");

    timer.textContent = seconds;

    seconds--;



    if (seconds < 0) {

      // Re-enable the button and hide the countdown when the timer reaches 0

      resendButton.disabled = false;

      countdownDiv.style.display = "none";

    } else {

      // Continue updating the timer

      setTimeout(updateTimer, 1000);

    }

  }



  // Start the countdown

  updateTimer();



  // Create a JSON object with the MobileNo property

  const data = {

    MobileNo: phoneNumber

  };



  // Send a POST request to the API endpoint

  fetch("https://localhost:7146/api/security/resend-otp", {

    method: "POST",

    headers: {

      "Content-Type": "application/json"

    },

    body: JSON.stringify(data)

  })

    .then(response => {

      if (response.ok) {

        // Handle success

        console.log("OTP resend request successful");

        // You can add further code here for a successful response

      } else {

        // Handle errors

        console.error("OTP resend request failed");

        // You can add error handling code here

      }

    })

    .catch(error => {

      console.error("An error occurred:", error);

      // Handle network errors here

    });

}

</script>

Boostrap 5 Common code to place on layout page, then any boostrap modal on close, form data inside the modal will be cleared

<pre>
    <script>
        document.addEventListener('hidden.bs.modal', function (e) {
            var modal = e.target; // The modal that triggered the event

            // Check if the modal contains a form
            var form = modal.querySelector('form');

            if (form) {
                form.reset(); // Reset the form if a form is found
            }
        });
    </script>
    </pre>

Sample Google Maps Dashboard Application for Stock Count

No comments:

Call api Data and show in a Bootstrap table : Javascript

var itmLogOpen = document.querySelectorAll('.itmLogOpen'); for(var x=0; x<itmLogOpen.length; x++){ itmLogOpen[x].addEventListener('click',function(){ var Serialitmno = this.getAttribute('data-itmno'); displayLblog(Serialitmno); }) } function displayLblog(Serialitmno) { const hostname = window.location.host; const url = `https://${hostname}/api/log/print/details/label?division=11&serialNo=${Serialitmno}`; fetch(url) .then(response => { if (!response.ok) { throw new Error(`No Information available. Please re-check the Serial Number again.`); } return response.json(); }) .then(data => { if (!data.data || data.data.length === 0) { alert("No data available, Please check the serial number"); // Reset the displayed values //resetDisplayedValues(); } else { //alert(JSON.stringify(data)); const datalogTable = document.querySelector("#datalogTable tbody") datalogTable.innerHTML = ""; data.data.forEach(item=>{ const trow = document.createElement("tr"); trow.innerHTML=` <td>${item.printedBy}</td> <td>${item.formattedDate}</td> `; datalogTable.appendChild(trow); }); var logViewer = new bootstrap.Modal(document.getElementById('logViewer')); logViewer.show(); } }) .catch(error => { alert(error.message); console.error(error); // Reset the displayed values // resetDisplayedValues(); }); }

No comments:

Get data from a Button and display on popup

var openFrame = document.querySelectorAll('.openFrame'); for(var i=0; i< openFrame.length; i++){ openFrame[i].addEventListener('click',function(){ var ImgPath = this.getAttribute('data-path'); //alert(ImgPath); var viewImgeFrame = document.getElementById('viewImgeFrame'); viewImgeFrame.src = ImgPath; viewImgeFrame.classList.add("img-fluid"); var lableViewer = new bootstrap.Modal(document.getElementById('lableViewer')); lableViewer.show(); }) }

No comments:

Javascript Call API can Fetch Data - Get Method

// disable QR search button on empty and page load const btnSerialS = document.getElementById('btnSerialS'); btnSerialS.disabled = true; function validateEmpty(){ const serialNumberD = document.getElementById("serialNum").value; if (serialNumberD.length > 5) { btnSerialS.disabled = false; } else { btnSerialS.disabled = true; } } /// function getWdata() { const hostName = window.location.host; const serialNumber = document.getElementById("serialNum").value; const url = `https://${hostName}/Api/get-check-warranty-activetion-by-serial-number?serialNumber=${serialNumber}`; fetch(url) .then(response => { if (!response.ok) { throw new Error(`No Information available. Please re-check the Serial Number again.`); } return response.json(); }) .then(data => { if (!data.data || data.data.length === 0) { alert("No data available, Please check the serial number"); // Reset the displayed values resetDisplayedValues(); } else { const firstData = data.data[0]; document.getElementById("serialNumber").textContent = firstData.serialNumber; document.getElementById("productName").textContent = firstData.productName; document.getElementById("productCode").textContent = firstData.productCode; document.getElementById("consumerName").textContent = firstData.consumerName; document.getElementById("consumerAddress").textContent = firstData.consumerAddress; document.getElementById("consumerContactNo").textContent = firstData.consumerNumber; document.getElementById("warrantyActivatedDate").textContent = firstData.warrantyActivatedDate; document.getElementById("warrantyExpiryDate").textContent = firstData.warrantyExpiryDate; document.getElementById("status").textContent = firstData.warrantyStatus; var myModal = new bootstrap.Modal(document.getElementById('warrantyModal'), { keyboard: false }); myModal.show(); } }) .catch(error => { alert(error.message); console.error(error); // Reset the displayed values resetDisplayedValues(); }); } function resetDisplayedValues() { document.getElementById("serialNumber").textContent = ""; document.getElementById("productName").textContent = ""; document.getElementById("productCode").textContent = ""; document.getElementById("consumerName").textContent = ""; document.getElementById("consumerAddress").textContent = ""; document.getElementById("consumerContactNo").textContent = ""; document.getElementById("warrantyActivatedDate").textContent = ""; document.getElementById("warrantyExpiryDate").textContent = ""; document.getElementById("status").textContent = ""; } function getNumdata() { //const hostName = window.location.hostname; const hostName = window.location.host; const phoneNum = document.getElementById("phoneNum").value; const url = `https://${hostName}/Api/get-consumer-active-warranty-serial-number-by-phone-number?phoneNumber=${phoneNum}`; //alert(phoneNum); //alert(url); fetch(url) .then(response => { if (!response.ok) { //throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`No Information available. Please re-check the Serial Number again.`); } return response.json(); }) .then(data => { if (!data) { document.getElementById("errorText").innerHTML = "<p>Please recheck the serial number.</p>" alert("No data available"); } else { //alert(JSON.stringify(data.data)); const deviceList = document.getElementById("deviceList"); deviceList.innerHTML = ""; const headertxtbym = document.getElementById("headertxtbym"); headertxtbym.innerHTML = ' <li class="list-group-item active" aria-current="true">Registered Devices</li>'; data.data.forEach(serialNumber => { const listitem = document.createElement("li"); listitem.classList.add("list-group-item"); listitem.setAttribute("data-seno", serialNumber); const link = document.createElement("a"); link.href = "#site"; link.classList.add("snoClick"); link.textContent = serialNumber; link.setAttribute("data-seno", serialNumber); listitem.appendChild(link); deviceList.appendChild(listitem); }); //////////////////////////////////////////////////////////////////////// //// pass SN from link auto to serial number form var listItems = document.querySelectorAll('.snoClick'); // Add a click event listener to each list item listItems.forEach(function(item) { item.addEventListener('click', function(e) { e.preventDefault(); // Get the value of the "data-seno" attribute var dataSeno = item.getAttribute('data-seno'); const dataSenoValue = this.getAttribute("data-seno"); const serialNumTextbox = document.getElementById("serialNum"); serialNumTextbox.value = dataSenoValue; btnSerialS.disabled = false; if (btnSerialS) { btnSerialS.click(); // Trigger click event on btnSerialS if it exists } }); }); } }) .catch(error => { alert(error.message); console.error(error); }); } // JavaScript code

No comments:

Pass Data Attr Value from Link to BS popup go display data

<button title="View Label" type="button" class="btn btn-primary btn-sm m-1 openFrame" data-path="@item.ImagePath"> <i data-feather="image"></i> </button>

<script> // open label viwer var openFrame = document.querySelectorAll('.openFrame'); for(var i=0; i< openFrame.length; i++){ openFrame[i].addEventListener('click',function(){ var ImgPath = this.getAttribute('data-path'); //alert(ImgPath); var viewImgeFrame = document.getElementById('viewImgeFrame'); viewImgeFrame.src = ImgPath; viewImgeFrame.classList.add("img-fluid"); var lableViewer = new bootstrap.Modal(document.getElementById('lableViewer')); lableViewer.show(); }) } // open item log </script> }

No comments:

Call API on click functions to update data

var roleUpdate = document.querySelectorAll('.roleUpdate');

for (var i = 0; i < roleUpdate.length; i++) {
roleUpdate[i].addEventListener('click', function () {

var permissionUserId = this.getAttribute('data-user-id');
var permissionCodeId = this.getAttribute('data-role-code');

const requestData = {
UserId: permissionUserId,
RoleId: permissionCodeId
};

//alert(JSON.stringify(requestData));

fetch(`${window.location.origin}/api/users/updaterole`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error(`Error: ${response.status}`);
}
})
.then((data) => {
toastr.success('Update User Roles Success');
// alert(data.msg);
})
.catch((error) => {
// alert(error.message);
toastr.error('Update Failed');
});

});
}

// User Active Inactive status update

var userStatus = document.getElementById("userStatus");

userStatus.addEventListener('click', function () {

var puserStatusId = this.getAttribute('data-user-id');

alert(puserStatusId);

const requestData = {
UserId: puserStatusId,
};

//alert(JSON.stringify(requestData));

fetch(`${window.location.origin}/api/users/updaterole`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error(`Error: ${response.status}`);
}
})
.then((data) => {
toastr.success('Update User Status Success');
// alert(data.msg);
})
.catch((error) => {
// alert(error.message);
toastr.error('Update Failed');
});

});

No comments:

Labels: Javascript

This blog has moved to htmlmoney.com

HTML Lean and Earn Money

Web Developer Blog | Thilanka De Silva

In this blog you can learn html 5 css 3 vanilla javascript jquery or using useful jqury based plugins php and my favourite subject search engine optimization in very simple ways.

I am a front end web developer in Sri Lanka. I have been working with the internet programming and design stuff for the last five years. im a member of British computer society UK.
My special interests are usability, serch engine optimization (SEO) and internet marketing and photography. I publish and share some useful code snippets of PHP HTML CSS Java Script Jquery and some how to tutorials also some freebies which i found in day to day work life.

Event Designs (4) Freebies (6) Graphic Design (10) HTML 5 CSS 3 (65) Jquery (43) News Paper (1) Opencart (2) PHP (6) Print Design (5) Web Sites (17)

Blog Archive

December 2024 (1)

November 2023 (1)

October 2023 (2)

September 2023 (3)

July 2023 (5)

June 2023 (5)

February 2022 (1)

March 2020 (5)

February 2020 (1)

July 2019 (1)

May 2019 (2)

April 2019 (1)

November 2018 (1)

September 2018 (1)

August 2018 (1)

July 2018 (2)

May 2018 (1)

March 2018 (1)

February 2018 (3)

January 2018 (4)

March 2017 (1)

February 2017 (1)

January 2017 (1)

December 2016 (3)

November 2016 (1)

October 2016 (1)

July 2016 (2)

June 2016 (1)

April 2016 (1)

March 2016 (2)

February 2016 (5)

November 2015 (3)

October 2015 (2)

July 2015 (1)

April 2015 (1)

March 2015 (1)

January 2015 (1)

October 2014 (3)

September 2014 (1)

August 2014 (1)

July 2014 (6)

May 2014 (3)

March 2014 (6)

January 2014 (1)

December 2013 (2)

November 2013 (12)

September 2013 (1)

August 2013 (2)

July 2013 (2)

June 2013 (1)

May 2013 (4)

April 2013 (3)

March 2013 (1)

February 2013 (2)

January 2013 (2)

December 2012 (3)

October 2011 (25)

.

Name

Email *

Message *

Technology Blog Freebies Web Development SEO CSS HTML5 Javascript Internet things and more

Pages

Simple React Use State Example

Boostrap 5 keep last opened tab ID after page reload using Local Storage

Max length input validation inline with javascript

Bootstrap 5 Logout confirmation for .net core

OTP Countdown JavaScript Version 2 - Initial Page load countdown

OTP Countdown Script Javascript

Boostrap 5 Common code to place on layout page, then any boostrap modal on close, form data inside the modal will be cleared

Sample Google Maps Dashboard Application for Stock Count

Call api Data and show in a Bootstrap table : Javascript

Get data from a Button and display on popup

Javascript Call API can Fetch Data - Get Method

Pass Data Attr Value from Link to BS popup go display data

Call API on click functions to update data

Search This Blog