React JS Form button calling-CodePudding

I am try trying to submit the form once the button is clicked, but the function is not triggering in React.

The only enquiry is on the submit button onclick=submitform.

So I can get the value and update it to the json arry

import React, { Component } from "react";

class Createcomponent extends Component {

  constructor() {
    super()
    this.state={
      firstname:"",
      lastname:"",
      phonenumber:""
    }

    this.ontextchange=this.ontextchange.bind(this)
    this.submitform=this.submitform.bind(this)

  }


  componentDidMount() {
    console.log("Component Mounted");
  }

  ontextchange(event) {
    if(event.target.id==='fname') {
      this.setState({firstname: event.target.value}) 
    }

  }

  submitform() {
    alert("trigger");
    //console.log(this.state)
  }


  render(){ 
    return (

      <div>

        <label for="fname">First name:</label>
        <input type="text" id="fname" onChange={this.ontextchange} value={this.state.firstname} name="fname"/><br/>

        <label for="lname">Last name:</label>
        <input type="text" id="lname" onChange={this.ontextchange} value={this.state.lastname} name="lname"/><br/>

        <label for="lname">PhoneNumber:</label>
        <input type="text" id="phone" onChange={this.ontextchange} value={this.state.phonenumber} name="lname"/><br/>

        <input type="submit"  value="Submit"/>
        <button onClick={this.submitform}>Submit</button>

      </div>
    );
  }
}

export default Createcomponent

CodePudding user response：

You have two "Submit" buttons. Clicking the right "Submit" button triggers the alert correctly using your code as it is.

The left "Submit" button, which is setup as a form submit by setting type = submit, doesn't do anything because there actually is no <form> in use. Setting up a form as I've added it to your code below, the left "Submit" button works too. I've also created this CodeSandbox for demonstration.

import React, { Component } from "react";

class Createcomponent extends Component {
  constructor() {
    super();
    this.state = {
      firstname: "",
      lastname: "",
      phonenumber: ""
    };

    this.ontextchange = this.ontextchange.bind(this);
    this.submitform = this.submitFormButton.bind(this);
  }

  componentDidMount() {
    console.log("Component Mounted");
  }

  ontextchange(event) {
    if (event.target.id === "fname") {
      this.setState({ firstname: event.target.value });
    }
  }

  submitFormButton() {
    alert("trigger");
    //console.log(this.state)
  }

  submitFormOnSubmit(e) {
    e.preventDefault();
    alert("trigger");
  }

  render() {
    return (
      <form onSubmit={this.submitFormOnSubmit}>
        <label for="fname">First name:</label>
        <input
          type="text"
          id="fname"
          onChange={this.ontextchange}
          value={this.state.firstname}
          name="fname"
        />
        <br />

        <label for="lname">Last name:</label>
        <input
          type="text"
          id="lname"
          onChange={this.ontextchange}
          value={this.state.lastname}
          name="lname"
        />
        <br />

        <label for="lname">PhoneNumber:</label>
        <input
          type="text"
          id="phone"
          onChange={this.ontextchange}
          value={this.state.phonenumber}
          name="lname"
        />
        <br />

        <input type="submit" value="Submit" />
        <button onClick={this.submitFormButton}>Submit</button>
      </form>
    );
  }
}

export default Createcomponent;

CodePudding user response：

Make sure to use htmlFor instead of for in React on your label element.