html - Multiple labels, one submit - Stack Overflow

admin管理员组

文章数量:1122846

Code:

 const formSubmit = (event) => {
    event.preventDefault();
    var data = new FormData(event.target);
    let formObject = Object.fromEntries(data.entries());
    console.log(formObject);
  }

 <form onSubmit={formSubmit}>
      <table className="center">
      <tr className="center">
        <th>SSID:</th>
        <th><label><input type="text" name="name"/></label></th>
      </tr>
      <tr className="center">
        <th>PASS:</th>
        <th><label><input type="text" name="name"/></label></th>
      </tr> 
      </table> 
      <input type="submit" value="Połącz"/>
  </form>

I can obtain data only from second label ("console.log(formObject);"). How to get two strings from two labels via "Object.fromEntries"?

Code:

 const formSubmit = (event) => {
    event.preventDefault();
    var data = new FormData(event.target);
    let formObject = Object.fromEntries(data.entries());
    console.log(formObject);
  }

 <form onSubmit={formSubmit}>
      <table className="center">
      <tr className="center">
        <th>SSID:</th>
        <th><label><input type="text" name="name"/></label></th>
      </tr>
      <tr className="center">
        <th>PASS:</th>
        <th><label><input type="text" name="name"/></label></th>
      </tr> 
      </table> 
      <input type="submit" value="Połącz"/>
  </form>

I can obtain data only from second label ("console.log(formObject);"). How to get two strings from two labels via "Object.fromEntries"?

• html
• reactjs
• typescript

Share Improve this question Follow edited Nov 22, 2024 at 8:03 Uwe Keim 40.7k6161 gold badges185185 silver badges302302 bronze badges asked Nov 22, 2024 at 7:55 FassetFasset 4911 silver badge44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

you have both inputs named name

<form onSubmit={formSubmit}>
     ...
        <th><label><input type="text" name="name"/></label></th>
     ...
        <th><label><input type="text" name="name"/></label></th>
     ...
  </form>

that's why you see only second one, because your object will have only one attribute name and it would be overwritten.

you should change your code so the names of inputs aren't collide:

const formSubmit = (event) => {
    event.preventDefault();
    var data = new FormData(event.target);
    let formObject = Object.fromEntries(data.entries());
    console.log(formObject);
  }

 <form onSubmit={formSubmit}>
      <table className="center">
      <tr className="center">
        <th>SSID:</th>
        <th><label><input type="text" name="name1"/></label></th>
      </tr>
      <tr className="center">
        <th>PASS:</th>
        <th><label><input type="text" name="name2"/></label></th>
      </tr> 
      </table> 
      <input type="submit" value="Połącz"/>
  </form>

This happens because the same value for name attribute is used twice--in SSID and PASS, and by doing this you pass in the same value for both. I'll explain how it works.

   <form onSubmit={...}>
     <tr className="center">
       <th>SSID:</th>
       <th><label><input type="text" name="name"/></label></th>
     </tr>
     <tr className="center">
       <th>PASS:</th>
       <th><label><input type="text" name="name"/></label></th>
     </tr> 
   </form>

The name attribute in an HTML form acts as the key in key-value pairs when the form data is serialized. Under the hood, the name attribute is used to define a key entry, so when you do something like this input tag:

<input type="text" name="a_name"/>

under the hood, you are doing this: name['a_name'] = 'value_entered_in_input'

When I do

<input type="text" name="a_name"/>
<input type="text" name="a_name"/>

what I'm basically doing is

name['a_name'] = 'first_input_value'
name['a_name'] = 'second_input_value'

In JavaScript, this overwrites the a_name property from first_input_value to second_input_value.

The solution would be to give them different names. For example, instead of using name="name" for both fields, you should use different names for SSID and password:

<form onSubmit={...}>
 <tr className="center">
   <th>SSID:</th>
   <th><label><input type="text" name="ssid"/></label></th>
 </tr>
 <tr className="center">
   <th>PASS:</th>
   <th><label><input type="text" name="pass"/></label></th>
 </tr> 

This will produce an object looking like the below:

{ ssid: 'ssid_value_entered', pass: 'password_value_entered' }

I hope this helped you understand how it works.

本文标签： htmlMultiple labelsone submitStack Overflow