Use value of an Input in a function

I'm a bit ashamed to write this topic because even if I got a HTML formation (4 years ago) I can't resolve my problem :

I can't use the value of an input type text in a function, this is my code:

import React from 'react'
//import db from '../../constants/FirebaseConfig'

class Account extends React.Component {

    state = {
        name: '',
        content: ''
    }

    _formSubmit(e) {
        e.preventDefault()
        var name = document.getElementsByName('name')
        console.log(name)
        
    }

    render(){
        return(
            <div className="container">
                <br></br>
                <h3 className="title">Account</h3>
                <form id="form">
                    <br></br>
                    <label>Titre</label>
                    <input type="text" name="name" placeholder="Ici le nom de l'Article"/>
                    <br></br><br></br>
                    <label>Contenue</label>
                    <input type="text" name="content" placeholder="Ici le contenue de l'article"/>
                    <br></br><br></br>
                    <input type="button" value="suivant" onClick={(e) =>this._formSubmit(e)}/>
                    <br></br>
                </form>
            </div>
        )
    }
}

export default Account

Without suggesting any workaround but trying to make exactly what you posted work the way you're expecting it to, Here's what I figured out you were trying to do:

Your Problem:

_formSubmit(e) {
    e.preventDefault()
    var name = document.getElementsByName('name') //Get's a list of Elements with the given name
    console.log(name) // This prints the list contained in name variable

}

The Solution:

_formSubmit(e) {
    e.preventDefault()

   // Assuming you're trying to print the values of all inputs
   // First - Get all elements whose values you want to log, as per your initial code
    var name = document.getElementsByName('name'); // returns ListNode<HTMLElement> 

   // Now loop through each input and print it's value to console
   name.forEach(
     function(input){
      console.log(input.value); //Print the value of each input listed
     }
   );    
}

Pass a javascript variable value into input type hidden value, You can simply use the value property of the DOM input element to get the < title>Get Text Input Field Value in JavaScript</title> function getInputValue(){ The INPUT function returns the value produced when a SAS expression is converted using a specified informat. You must use an assignment statement to store that value in a variable. The INPUT statement uses an informat to read a data value. Storing that value in a variable is optional.

Two things:

getElementsByName is plural -- note the 's' in 'Elements'. So it doesn't just return one element, it returns a list, even if there's just one.

Since you are using React, you don't need to pull the value of the input that way at all. Instead, on the input itself, just add a value and onChange property, and then track the value being typed in there as state.

You already have a spot for them in your state, so just go ahead and use that. You'll track it live as they type, not just at form submission.

class Account extends React.Component {

    state = {
        name: '',
        content: ''
    }

    _formSubmit(e) {
        //just process your form _submission_ here           
    }

    onChangeName = (e) => {
        this.setState({
           name: e.target.value
        });
    }

    render(){
        return(
            <div className="container">
                <br></br>
                <h3 className="title">Account</h3>
                <form id="form">
                    <br></br>
                    <label>Titre</label>
                    <input type="text" name="name" placeholder="Ici le nom de l'Article" value={this.state.name} onChange={this.onChangeName} />

How to Get the Value of Text Input Field Using JavaScript, Learn all about using CSS selector here. 6 min read. 1 examples � Guide on PHP Form Validation: How, Why and What Functions to Use. Evaluating a function using a graph also requires finding the corresponding output value for a given input value, only in this case, we find the output value by looking at the graph. Solving a function equation using a graph requires finding all instances of the given output value on the graph and observing the corresponding input value(s).

On HandleChange function, it will automatically check the name where you have changed, and it will update the value

import React, { Component } from "react";

export default class App extends Component {
  state = {
    name: "",
    content: "",
    datas: []
  };
  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const data = {
      name: this.state.name,
      content: this.state.name
    };
    this.setState({
      datas: [...this.state.datas, data],
      name: "",
      content: ""
    });
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
            placeholder="Ici le nom de l'Article"
          />
          <input
            type="text"
            name="content"
            value={this.state.content}
            onChange={this.handleChange}
            placeholder="Ici le nom de l'Article"
          />
          <button>Submit</button>
        </form>
        <div>
          {this.state.datas.map(item => {
            return (
              <div key={Math.random()}>
                <h6>{Math.random()}</h6>
                <h4>Name:{item.name}</h4>
                <h4>Content:{item.content}</h4>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

Guide on JavaScript Input: JavaScript Get Input Value Explained, We can get the value of text input field using various methods in script. There is a text Also we can use jquery val() method inside script to get or set the value of text input field. Using text function myFunction() {. var x =. Step for using the VALUE Function Select the Formulas tab. Choose Text to open the Function drop-down list. Select VALUE in the list to bring up the function’s dialog box

How to get the value of text input field using JavaScript , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Sometimes we need to set a default value of the <input> element, This example explains methods to do so. Text Value Property This property set/return the value of value attribute of a text field. The value property contains the default value, the value a user types or a value set by a script. Syntax: Return the value property: textObject.value

HTML DOM Input Text value Property, The .val() method is primarily used to get the values of form elements such as input , select and Use the function argument to modify the value of an input box . There is a text value property which can set and return the value of the value attribute of a text field. Also we can use jquery val() method inside script to get or set the value of text input field. Using text value property: Syntax: Get value : textObject.value Set value : textObject.value = text

.val(), Sal finds the input value for which f(t)=13, given that f(t)=-2t+5. Find all the inputs that Duration: 1:40 Posted: Jun 25, 2015 Example. Use the prompt parameter to write a message before the input:

Comments
  • Apart from the answers i would like to give you an advice. Before working with frameworks you should learn javaScript ( medium level at least ). It's absolutely necessary and will help you a lot in the future.