Jump to content
  • 0

[FYI] How to normalize inputs before submission


Wikiwi
 Share

Question

This is solution can be used for a specific use case where the users inputs character with diacritical marks in them and you would like to remove or "normalize" those characters. This solution can be useful to have more user-friendly search criteria.

What you would need to do is to put a header & footer on your submission page and put the following code in the footer. Don't forget to disable the HTML editor on the Advanced tab before pasting the code below.

Script:

<script>
document.getElementsByName('Submit')[0].unsafe = function(){

//first_name
var str = document.getElementById('InsertRecordFIELD_NAME').value;
document.getElementById('InsertRecordFirst_Name').value = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
//last_name

var str = document.getElementById('InsertRecordFIELD_NAME').value;
document.getElementById('InsertRecordLast_Name').value = str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
</script>

The code will run when the user hovers their mouse on the submit button. See the screenshots below for reference.

Before hovering the mouse: https://aucdn.caspio.com/D4B16000/Screenshot/Screenshot_1_9.png
After: https://aucdn.caspio.com/D4B16000/Screenshot/Screenshot_2_10.png

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form className="testform">
        <input type="text" placeholder="First name" name="firstName" />
        <input type="text" placeholder="Last name" name="lastName" />
        <input type="tel" placeholder="Telephone" name="phone" />
        <input type="reset" value="Reset" />
      </form>
      <h2>Form Submitted Data</h2>
      <pre>
        <code>{JSON.stringify(form)}</code>
      </pre>
    </div>
  );
}
export default App;
 

Project

Now we can add some action to these input fields.

  1. Import useState.
  2. Add an initialState.
  3. Add a form state. This allows us to update the state with new values that are typed in the form.
  4. Add a way to reset the form.
  5. Add a way to "set" the values in the form.
import React, { useState } from "react";
import "./App.css";

function App() {
  const initialState = {
    firstName: "",
    lastName: "",
    phone: "",
  };
  const [form, setForm] = useState(initialState);

  const reset = (event) => {
    event.preventDefault();
    setForm({ ...form, ...initialState });
  };

  return (
    <div className="App">
      <h1>Input Mask Example</h1>
      <h2>Form Example</h2>
      <form onReset={reset} className="testform">
        <input
          type="text"
          placeholder="First name"
          name="firstName"
          value={form.firstName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, firstName: value });
          }}
        />
        <input
          type="text"
          placeholder="Last name"
          name="lastName"
          value={form.lastName}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, lastName: value });
          }}
        />
        <input
          type="tel"
          placeholder="Telephone"
          name="phone"
          value={form.phone}
          onChange={(event) => {
            const { value } = event.target;
            setForm({ ...form, phone: value });
          }}
        />
        <input type="reset" value="Reset" />
      </form>
    </div>
  );
}
export default App;
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...