Preview:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Example</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="button" onclick="handleFormSubmit()">Submit</button>
  </form>

  <script src="script.js"></script>
</body>
</html>



// the JS
// Function to get the value from the input field
function getValue(callback) {
  // Get the input field
  const nameInput = document.getElementById('name');
  // Get the value from the input field
  const nameValue = nameInput.value;
  // Pass the value to the callback function
  callback(nameValue);
}

// Callback function to process the value
function processValue(value) {
  console.log('Processing value...');
  console.log(`Value received: ${value}`);
  // You can add more logic here to process the value further
}

// Function to handle form submission
function handleFormSubmit() {
  getValue(processValue);
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter