Блог

Я новичок в JavasScript, поэтому то, что у меня есть, вероятно, не самый лучший способ, так что, надеюсь, кто-нибудь сможет меня поправить! У меня есть форма, которая отправляет данные в express через вызов ajax.

 
<Form  name="FlightForm" id="FlightForm"  action="/search" onSubmit={this.onSubmit}  >



      <div >
 <label>FROM</label>
 <input required  type='text' name='originOne' id="originOne"  onChange={this.setState.originOne}  className="form-control" placeholder="Departing from"/>
        </div>


<div>
  Departure Date 
 <DatePicker className="form-control" required minDate={new Date()} name='date' selected={this.state.startDate} onChange={this.handleChange}/>

</div>



    <p><button type="submit" name="search" id="search" value="true" onSubmit={this.loading()} className="w3-button w3-dark-grey">Search for destinations</button></p>


</Form>

  

 
export class Home extends React.Component {

  constructor(props) {
    super(props);

   this.state = { originOne: '', originTwo: '', redirectToResult: false, startDate: new Date(), route:'', loader:false};


      this.onSubmit= this.onSubmit.bind(this);
      this.handleChange= this.handleChange.bind(this);
      this.setMulti=this.setMulti.bind(this);
      this.loading=this.loading.bind(this);

    }


onChange = (e) => {
    this.setState({
       originOne: e.target.value, originTwo: e.target.value, 
       route:e.target.value});
    };


 setMulti  = event => {
         this.setState(
             {route: event.target.value});
     };

 onSubmit = (e) => {

     e.preventDefault();
     const { originOne, originTwo , route} = this.state;
    this.setState({ loading : true});
     {this.loading()}
};

 handleChange(date){
     this.setState({
         startDate:date
     });
 }
  

На данный момент у меня есть вызов ajax для отправки данных на сервер, на который ссылается index.html страница.

 $(document).ready(function(){
        // click on button submit
        $("#search").on('click', function(){
            // send ajax
            console.log($("#FlightForm").serialize()) ;
            $.ajax({
                url: '/', // url where to submit the request
                type : "POST", // type of action POST || GET
                dataType : 'json', // data type
                data : $("#FlightForm").serialize(), // post data || get data
                success : function(data, status, xhr ) {


                   window.location.replace("http://localhost:3000/searching");

                },
                error: function(xhr, resp, text) {
                    console.log("Error happening");
                    window.location.replace("http://localhost:3000/error");
                }
            })
        });
    });
  

Я структурировал ее для перенаправления на страницу поиска с помощью загрузочного счетчика после отправки, однако это переопределяет обязательные поля для проверки формы.

Каков наилучший способ отправки формы после проверки формы и перенаправления на следующую страницу? Любая помощь будет принята с благодарностью, спасибо!