input texbox value not working in textbox javascript

Question

I would like to know how to allow max value based on min entered in textbox and should allow only numbers and no special characters and alphabets,

I have two text box, min and max, min can allow only numbers both positive and negative but no special characters and alphabets

max value should be greater than min value and not allow special characters and alphabets

Here is my code, max not working proper.

class Sample extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      min: "",
      max: ""
    }
 }
hanldeMin = (e) => {
    if (e.target.value !== "") {
      this.setState({
        min: e.target.value
      })
    }
  }

 handleMax = (e) => {
    if (e.target.value !== "") {
      if (parseInt(e.target.value) < parseInt(this.state.min)) {
        e.target.value = "";
      }
      this.setState({
        max: e.target.value
      })
    }
  }
render(){
return (
 <React.Fragment>
   <div className="row">

       <div className="col-lg-5 col-sm-5 noPadding noMargin">
                <input
                  type="text"
                  placeholder="min"
                  className="form-control"
                  id="minavlitems"
                  value={this.state.min}
                  onChange={(event) => {
                    if (isNaN(Number(event.target.value))) {
                      return;
                    } else {
                      this.hanldeMin(event);
                    }
                  }}
                />
              </div>
              <div className="col-lg-1 col-sm-1 alignCenter noPadding noMargin">
                <b>-</b>
              </div>
              <div className="col-lg-6 col-sm-6 noPadding noMargin">
                <input
                  type="text"
                  min={this.state.min}
                  className="form-control"
                  placeholder="max"
                  id="maxavlitems"
                  value={this.state.max}
                  onChange={(event) => {
                    if (isNaN(Number(event.target.value))) {
                      return;
                    } else {
                       this.hanldeMax(event);
                    }
                  }}                 
                />
              </div>
             </div>
   </div>
 </React.Fragment>

)

}

}

why are you setting e=""?

Vaibhav
– Vaibhav

2020-06-01 06:55:04 +00:00
Commented Jun 1, 2020 at 6:55 — Vaibhav
– Vaibhav, Commented Jun 1, 2020 at 6:55

Khabir · Accepted Answer · 2020-06-01 09:35:38Z

1

Please check the example where I used regular expression to input only positive/negative number.

Here is the Code Sand Box

Here is the example:

import React from "react";

export default class Sample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            min: "",
            max: ""
        }
    }

    isValid = (e) => {
        let regEx = /^-?\d*\.?\d{0,6}$/;
        let text = e.target.value;
        return (text.match(regEx) !== null);
    };

    handleMin = (e) => {
        if (this.isValid(e)) {
            this.setState({
                min: e.target.value
            })
        }
    };

    handleMax = (e) => {
        console.log(e.target.value, 'onblur');
        if (this.isValid(e)) {
            if (parseInt(e.target.value) <= parseInt(this.state.min)) {
                e.target.value = "";
            }
            this.setState({
                max: e.target.value
            })
        }
    };

    handleChange = (e) => {
        this.setState({
            max: e.target.value
        })
    };

    render() {
        return (
            <React.Fragment>
                <div className="row">
                    <div className="col-lg-5 col-sm-5 noPadding noMargin">
                        <input
                            type="text"
                            placeholder="min"
                            className="form-control"
                            id="minavlitems"
                            value={this.state.min}
                            onChange={this.handleMin}
                        />
                    </div>
                    <div className="col-lg-1 col-sm-1 alignCenter noPadding noMargin">
                        <b>-</b>
                    </div>
                    <div className="col-lg-6 col-sm-6 noPadding noMargin">
                        <input
                            type="text"
                            min={this.state.min}
                            className="form-control"
                            placeholder="max"
                            id="maxavlitems"
                            value={this.state.max}
                            onChange={this.handleChange}
                            onBlur={this.handleMax}
                        />
                    </div>
                    <button onClick={() => {
                        console.log(this.state, 'state')
                    }}>Show mix and max value in console
                    </button>
                </div>
            </React.Fragment>
        )
    }
}

edited Jun 1, 2020 at 9:35

answered Jun 1, 2020 at 8:02

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sen Over a year ago

thanks a lot, but when i enter min 10, max cannot enter value

Khabir Over a year ago

Hi, I have updated my answer. now it is working. please check

Sen Over a year ago

same issue,cannot enter value in max

Khabir Over a year ago

Please use code sand box link. It is perfectly working. also I added a picture for showing that I can enter value.

Sen Over a year ago

@kabir, but when i enter min 10, max should allow only > 10, but it allows

|

Vaibhav · Accepted Answer · 2020-06-01 07:17:33Z

0

You are setting the state even your max input is less than min in state.

Change your if condition as follows

handleMax = (e) => {
    if (e.target.value !== "") {
      if (parseInt(e.target.value) > parseInt(this.state.min))
         this.setState({
           max: e.target.value
         })
     }
  }

answered Jun 1, 2020 at 7:17

Vaibhav

1,4981 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

input texbox value not working in textbox javascript

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related