I'm using ReactJS. I have a form, and "onSubmit" of that form I want to get the contents of the form and then redirect to another page. This sort of works except this changes my url which I don't want. What I want it to redirect to is:

localhost:3000/somewebsite

but instead it bees:

localhost:3000/somewebsite?input-form1=hello&input-form2=hi

This is what my code looks like:

<form onSubmit={this.urlSubmit} action="/somewebsite">
  <input name="input-form1" placeholder="Enter URL" />
  <Form.Control name="input-form2" as="select" placeholder="Select language">
    <option value="XX">Select Language</option>
  </Form.Control>
  <button className="submit" type="submit">Submit</button>
</form>

I'm using ReactJS. I have a form, and "onSubmit" of that form I want to get the contents of the form and then redirect to another page. This sort of works except this changes my url which I don't want. What I want it to redirect to is:

localhost:3000/somewebsite

but instead it bees:

localhost:3000/somewebsite?input-form1=hello&input-form2=hi

This is what my code looks like:

<form onSubmit={this.urlSubmit} action="/somewebsite">
  <input name="input-form1" placeholder="Enter URL" />
  <Form.Control name="input-form2" as="select" placeholder="Select language">
    <option value="XX">Select Language</option>
  </Form.Control>
  <button className="submit" type="submit">Submit</button>
</form>

• javascript
• html
• reactjs

1 Answer 1

Please add event as param of urlSubmit method and add event.preventDefault(); as part of that method to avoid refresh/URL change effect on form submit.

& You don't need action="/somewebsite" as part of form

urlSubmit = (event) => {
    event.preventDefault();
    // rest of your code goes here...
}

Hope this helps.