How to get the value in an input text box

When we need to retrieve values from input text boxes, it is typically within web development environments. The implementation varies depending on the technology used. Below are several common scenarios and solutions:

1. HTML + JavaScript

In traditional HTML and JavaScript, we can retrieve the value from the input box using the DOM API. For example:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Example</title>
</head>
<body>
    <input type="text" id="myInput" value="Initial Value">
    <button onclick="getValue()">Get Value</button>
    <p id="display"></p>

    <script>
        function getValue() {
            var inputVal = document.getElementById("myInput").value;
            document.getElementById("display").innerText = "Input value is: " + inputVal;
        }
    </script>
</body>
</html>

In this example, when the user clicks the button, the getValue function is invoked. This function uses the getElementById method to obtain the input box element and then reads its value property to retrieve the input value.

2. jQuery

If using jQuery, retrieving the input value is simpler:

html
<input type="text" id="myInput" value="Initial Value">
<button id="getValueBtn">Get Value</button>
<p id="display"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    "#getValueBtn".click(function() {
        var inputVal = "#myInput".val();
        "#display".text("Input value is: " + inputVal);
    });
</script>

In this code, we use jQuery's val() method to retrieve the input box's value. This approach is more concise, especially when handling numerous DOM operations, as it provides clearer and more convenient code.

3. React

In React, we typically use state to manage the input box's value. Here is a basic example:

jsx
import React, { useState } from 'react';

function InputExample() {
    const [inputValue, setInputValue] = useState('');

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    }

    const handleSubmit = () => {
        alert('Input value is: ' + inputValue);
    }

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleInputChange} />
            <button onClick={handleSubmit}>Submit</button>
        </div>
    );
}

export default InputExample;

In this component, we use the useState hook to create a state variable inputValue to track the input box's value. Whenever the input box's content changes, the onChange event is triggered, and the handleInputChange method updates the state. When the user clicks the submit button, the handleSubmit method is called to display the current input value.

Summary

There are many ways to retrieve values from input boxes, and the choice depends on your project requirements and the technology stack used. Whether using native JavaScript, jQuery, or modern frameworks like React, there are appropriate methods to achieve this functionality.

2024年7月17日 22:43 回复

1个答案

1. HTML + JavaScript

2. jQuery

3. React

Summary

你的答案