Reputation: 970
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} />}
{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
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
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