callback functions explained version 2 Form and value

PHOTO

Sun Jun 23 2024 04:31:38 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #callback #functions #forms

<!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);
}

COPY

Save snippets that work from anywhere online with our extensions

Comments

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#python #dates #functions #python3.8

How to parse a String into Datetime in Python

from datetime import datetime

datetime_object = datetime.strptime('Jun 1 2005  1:33PM', '%b %d %Y %I:%M%p')

#callback

callbacks

const getSelectValue = (callback) => {
  const options = getElement("#city-select");

  options.addEventListener("change", function (e) {
    const value = e.target.value;
    // pass the value into the callback function we can use later
    callback(value); // this value needs to be passed into the function where we are using the getSelectValue function ie  getSelectValue(value)
  });
};




// app function
const init = () => {
  // populate the DOM with the cities data on load
  const selectDOM = getElement("#city-select");
  populateDOM(cities, selectDOM);

  let selectedCity = ""; // this gets updated with the function below

  // need to run the callback here
  // get the value and assign it to a variable outside the function
  getSelectValue((value) => {
    selectedCity = value; // Assign the value to selectedCity
    //  // Log the selected city
    if (selectedCity !== "") {
      const container = getElement(".container h3");
      container.textContent = selectedCity;
    }
  });
};

window.addEventListener("DOMContentLoaded", init);

#callback #functions

callback functions explained version 1

(function () {
  'use strict';

  function fetchData(callback) { // create the first (outer) function
    const data = 'get data from an API';
    setTimeout(() => {
      callback(data); // use the callback param as a function and pass in the data value
    }, 1000);
  }

  function displayData(data) { // create the inner function that takes in the callback as a param
    console.log('processing data');
    console.log(data);
  }

  fetchData(displayData); // finally call the outer function with the inner function as a value
})();

#callback #functions #forms

callback functions explained version 2 Form and value

<!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);
}

#callback #higher #order #function

function as a callback inside a higher order function

  const transactions = [200, 450, -400, 3000, -650, -130, 70, 1300];
  function myFunc(item, date = '2nd Feb') {
    // adding in date default here but assume its from somewhere else
    
    return { amount: item, date }; // creating an object with both item and date
  }

  // forEach
  const test1 = transactions.map(item => myFunc(item, date));
  console.log(test1);

#css #design #forms

[CSS] Hiding arrows in Numeric Form Input

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
    background-color: peachpuff;

#html #forms

A form containing a slider that has a maximum value of 100, a minimum of 0 and moves in steps of 10

<form action="/processing.html" method="GET">
  <label for="mystery">What gets rendered?</label>
  <input type="range" id="mystery" name="mystery" min="0" max="100" step="10">
</form>

#html #forms

why will the information from the first <input> element NOT be sent to /processing.html when the form is submitted?

<!--código mal-->
<form action="/processing.html" method="GET">
  <input type="text" id="username">
  <input type="submit" value="submit"> 
</form>

#html #forms

Ensure the remaining content doesn't hide behind the #navbar

/* #navbar is the topmost element and <main> contains all other content */

#navbar {
  /* CSS property ensuring #navbar always stays in the same place even if the page is scrolled: */
  position: fixed;
}

main {
  /* Ensure the remaining content doesn't hide behind the #navbar: */
  position: absolute;
  z-index: 1;
  top: 100px;
}

#django #internationalization #localization #formview #forms #genericviews

FormView get success url according to current language

// views.py
class SomeFormView(FormView):

    def get_success_url(self):
        if 'ka' in self.request.get_full_path():
            success_url = '/ka/message-sent/'
        elif 'en' in self.request.get_full_path():
            success_url = '/en/message-sent/'
        else:
            success_url = '/message-sent/'
        return success_url

// template.html
<form action="{% url 'app_name:message-sent' %}">
  	{% csrf_token %}
	{{ form }}  
</form>

#php #secure #input #forms

Filter and Secure Input Forms - PHP Function

function secure_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

#forms #recaptcha #captcha

Disable Submit until reCAPTCHA is clicked

<script is:inline>
    document.getElementById('wf-form-Digital-Wings-Contact-Page-Form').addEventListener('submit', function (event) {
      if (window.grecaptcha.getResponse().length > 0) { return; }
      event.preventDefault();
    });
</script>

#css #forms #custom #radio

custom radio buttons

/* single checkbox */

body.snapform .form-group .snap-field .check-box-label{
    padding-left: 40px!important;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:before{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent;
    border-color: var(--QLD-color-light-designAccent);
    background-image: none !important;
}

body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:after{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:before{
	width: 32px!important;
    height: 32px!important;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent!important;
    border-color: var(--QLD-color-light-designAccent)!important;
    background-image: none !important;

}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--QLD-color-light-text)' d='M25.6,11.4c0.2-0.2,0.2-0.5,0-0.7l-2.3-2.3c-0.2-0.2-0.5-0.2-0.7,0L14,17l-3.6-3.6c-0.2-0.2-0.5-0.2-0.7,0l-2.3,2.3 c-0.2,0.2-0.2,0.5,0,0.7l6.3,6.3c0.2,0.2,0.5,0.2,0.7,0L25.6,11.4L25.6,11.4z'/%3E%3C/svg%3E");
    background-size: 30px!important;
    background-position: -2px -2px!important;
    font-size: 20px !important;
    left: 0px!important;

}

#python #python #iterator #functions

Using an iterator function to build a list

#In computer programming, an iterator is an object that enables a programmer to traverse a container, particularly lists.
# define function:
1.def unfold(fn, seed):
  2.def fn_generator(val):
    3.while True: 
      4.val = fn(val[1])
     5.-5 if val == False: break
      6.yield val[0]
  7.return [i for i in fn_generator([None, seed])]
EXAMPLES
f = lambda n: False if n > 50 else [-n, n + 10]
unfold(f, 10) # [-10, -20, -30, -40,

callback functions explained version 2 Form and value

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

callback functions explained version 2 Form and value

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Embed code snippet