I am writing a client-side rendering web application using react and react-router for routing. I have implemented a search with an input inside a form with react-bootstrap.

executeSearch(){
    ...
    window.location.href = '/#/search/' + formattedURL
}

let formSettings = {
  onSubmit:this.executeSearch.bind(this),
  id:"xnavbar-form"
}

const searchButton =
<Button
  onClick={this.executeSearch.bind(this)}>
  <Glyphicon glyph="search" />
</Button>

const searchInput =
<form>
  <Input
    type="text"
    ref="searchInput"
    buttonAfter={searchButton}
    placeholder="search"/>
</form>

... Jumping to the render function

<Navbar.Form
    {...formSettings}>
    {searchInput}
</Navbar.Form>

Executing a search in Mozilla Firefox works as expected: Hitting the enter key and clicking on the searchButton route me to a client-side rendered page .../#/search/....

Executing the search in Google Chrome behave like this: Clicking the searchButton works like above (client side render), but hitting the enter key cause a server redirect .../?#/search....

I figured out it is caused by the form's submit attribute, how can I modify it to render on the client?

I was thinking about listening to a keyboard ascii code (enter) for executing the search, but it seems a bit messy.

I am writing a client-side rendering web application using react and react-router for routing. I have implemented a search with an input inside a form with react-bootstrap.

executeSearch(){
    ...
    window.location.href = '/#/search/' + formattedURL
}

let formSettings = {
  onSubmit:this.executeSearch.bind(this),
  id:"xnavbar-form"
}

const searchButton =
<Button
  onClick={this.executeSearch.bind(this)}>
  <Glyphicon glyph="search" />
</Button>

const searchInput =
<form>
  <Input
    type="text"
    ref="searchInput"
    buttonAfter={searchButton}
    placeholder="search"/>
</form>

... Jumping to the render function

<Navbar.Form
    {...formSettings}>
    {searchInput}
</Navbar.Form>

Executing a search in Mozilla Firefox works as expected: Hitting the enter key and clicking on the searchButton route me to a client-side rendered page .../#/search/....

Executing the search in Google Chrome behave like this: Clicking the searchButton works like above (client side render), but hitting the enter key cause a server redirect .../?#/search....

I figured out it is caused by the form's submit attribute, how can I modify it to render on the client?

I was thinking about listening to a keyboard ascii code (enter) for executing the search, but it seems a bit messy.

• javascript
• html
• forms
• reactjs
• react-router

Share Improve this question Follow asked Jan 30, 2016 at 17:59 itaieditaied 7,1071313 gold badges5959 silver badges9494 bronze badges 5

• If you are only switching the hash (and not the page location and hash) try just changing location.hash instead the href – Patrick Evans Commented Jan 30, 2016 at 18:07
• api.jquery./jquery.ajax – Daan Commented Jan 30, 2016 at 18:10
• I do need to change the route, since I'm using react-router as my "ponents loader", it's not just changing the hash. And what is it to do with ajax? I don't want to send a request to the server... – itaied Commented Jan 30, 2016 at 18:13
• Have you ever heard about AJAX or Google? And more duplicated answers bellow... – felipsmartins Commented Jan 30, 2016 at 18:35
• Have you ever heard about client side rendering? AJAX has nothing to do with it. – itaied Commented Jan 30, 2016 at 18:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Stop the default behaviour of a form submit by using event.preventDefault().

This will prevent the browser from submitting your form and instead leave the "routing" logic to you to do what you want it to.

Just accept the event in your executeSearch function.

executeSearch(event){
    ...
    event.preventDefault();
    window.location.href = '/#/search/' + formattedURL;
}