CODEWITHSUNDEEP
reactjs
Chen
Chen

Reputation: 291

input type="number" not working as it allows me to write letters

I've tried to put a type="number" into my input so that it allows me to write only numbers, but it is not working as it allows me to write letters and numbers no matter what I try to put. It is in the lines of BMI and weight.

import React, {useState} from 'react'
import FileBase64 from 'react-file-base64';
import axios from 'axios'
import { useHistory } from "react-router-dom";
import InputNumber from 'react-input-number';


function AddClient() {

    let history = useHistory();

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [weight, setWeight] = useState('')
    const [BMI, setBMI] = useState('')
    const [image, setImage] = useState('')

    const selectedFile = (e) => {
        setImage(e.target.files[0])
    }
    console.log(image)

    const submitForm = (e) => {
        e.preventDefault()

        const formData = new FormData()

        formData.append("image", image)
        formData.append("firstName", firstName)
        formData.append("lastName", lastName)
        formData.append("weight", weight)
        formData.append("BMI", BMI)

          axios.post('http://localhost:4000/clients/add', formData)
          .then(res => console.log(res))
    }

    const returnPage = () => {
        history.push("/Clients");
    }

    console.log(firstName)

    return (
        <div>
<form class="w-full max-w-lg" encType="multipart/form-data">
  <div class="flex flex-wrap -mx-3 mb-6">
  <input type="file" filename="image" name="image" onChange={selectedFile}/>
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        First Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setFirstName(e.target.value)} placeholder="First Name" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Last Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setLastName(e.target.value)} placeholder="Last Name" />
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        Weight
      </label>
      <input inputmode="numeric" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Body Mass Index (BMI)
      </label>
      <input type="number" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />
    </div>
    <button onClick={submitForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Client</button>
    <button onClick={returnPage} class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Return</button>
  </div>
</form>

        </div>
    )
}

export default AddClient

Upvotes: 0

Views: 408

Answers (1)

iunfixit
iunfixit

Reputation: 994

Your inputs have also a text type set

<input ... type="text" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />

<input type="number" ... id="grid-last-name" type="text" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />

Make sure it only has one type property with the one you want:

<input type="number" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />

<input type="number" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />

Replacing class with className, as class is reserved in JSX, also in the end to make it clear to see:

<input type="number" id="grid-first-name" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" />

<input type="number" id="grid-last-name" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" />

Upvotes: 2

Related Questions