CODEWITHSUNDEEP
javascriptformsreactjs
andy wilson
andy wilson

Reputation: 970

ReactJs Form Submit on Enter Key press

I want to submit my form when the enter key is pressed but if i use onSubmit={() => this.onSearchClick(this)} which is my function i need to run all it does it put the form into the url which i dont want to happen all i need to do is make it run that function which will do an api call.

my code is this

<form>
      <h1>Search</h1>
      <hr />
      <TextField floatingLabelText="Case ID" name="caseid" onChange={this.handleChange} />
      <br />
      <TextField floatingLabelText="Title" name="title" value={this.state.title} onChange={this.handleChange} />
      <br />
      <TextField floatingLabelText="Forename" name="forename" value={this.state.forename} onChange={this.handleChange} />
      <br />
      <TextField floatingLabelText="Surname" name="surname" value={this.state.surname} onChange={this.handleChange} />
      <br />
      <TextField floatingLabelText="Postcode" name="postcode" value={this.state.postcode} onChange={this.handleChangePost} />
      <br />
      <TextField floatingLabelText="Telephone Number" name="telephone" onChange={this.handleChange} />
      <br />
      <TextField floatingLabelText="Email Address" name="email" value={this.state.email} onChange={this.handleChange} />
      <br />
      {this.state.isLoggedIn ? <RaisedButton label="Search" onClick={() => this.onSearchClick(this)} primary={true} /> : <RaisedButton label="Search Disabled" primary={true} />}
       &nbsp;&nbsp;
       {this.state.isLoggedIn ? <RaisedButton label="New Entry" onClick={() => this.gotoNew()} primary={true} /> : <RaisedButton label="New Entry" primary={true} />}
</form>

onSearchClick = (value) => {
    this.setState({
        loading: true,
        searchQuery: value,
        showCourtesy: false,
    }, function () {
        this.doSearch();
    });
}

which calls this

doSearch() {
    this.setState({
        loading: true,
        showCourtesy: false
    }, function () {

    });
    var search_url = "http://10.0.2.31/testwebapi/api/data?"
        + "forename=" + this.state.forename
        + "&surname=" + this.state.surname
        + "&caseid=" + this.state.caseid
        + "&postcode=" + this.state.postcode
        + "&telephone=" + this.state.telephone
        + "&email=" + this.state.email
        + "&title=" + this.state.title

    var _this = this;
    this.serverRequest =
        axios
            .get(search_url
            )
            .then(function (res) {
                _this.state.searchResults = res.data;
                _this.setState({
                    loading: false,
                })
                console.log(res)
            })
            .catch(function (error) {
                console.log(error);
                window.alert("Unauthorized To Access This Please Contact IT If You Believe You Should Be")
            })
}

Upvotes: 0

Views: 4641

Answers (2)

pawel
pawel

Reputation: 37005

To stop the form submit event from redirecting you need to call event.preventDefault method.

You can add it in-line, like this:

<form onSubmit={ e => { this.onSearchClick(this); e.preventDefault(); }}></form>

Keep in mind the above, just like your original code, passes a reference to the component to onSearchClick method, but from your code it looks like the method expects a string. But this is outside of the scope of this question.

You can also refactor your onSearchClick method to accept an event as the first argument:

onSearchClick = ( event, value ) => {
   this.setState({
    loading: true,
    searchQuery: value,
    showCourtesy: false,
    }, function () {
        this.doSearch();
    });
    event.preventDefault();
}

<form onSubmit={ this.onSearchClick.bind( this ) }></form>

Again, the value will not be passed. I would recommend to use refs to keep a reference to the query input field, so value would be this.refs.query.value.

Upvotes: 2

Michael Sharp
Michael Sharp

Reputation: 59

<form onSubmit={() => this.onSearchClick(this)}>  ....

onSearchClick(event) { 
    event.preventDefault() 
    /* do stuff here */ 
}

The event.preventDefault() function will prevent the form from interacting with the browser and allow you to make internal API calls, etc.

Upvotes: 1

Related Questions