I want to send both the value and key of the option box when I submit a form. I feel like this should be pretty simple, but I'm unsure how to do it. Below is a snippet from my form to demonstrate what I'm referencing:

<form name='form' onSubmit="return checkForm();" action="../servlet/AccountRequest">

<select name="type1">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<br/><input type="button" id="Submit" onclick="checkForm(this.form)" value="Request" />
<input type="reset" value="Cancel"/>
</form>

​ In a normal scenario, if I selected "Option A" in the drop-down box, I would want to send the value, or "1". However, I want to actually send the value AND key of the selection, in this case both "1" and "Option A".

In my case, I call a checkForm() JavaScript function that validates form input (there are other fields, like First Name, Last Name, Email Address, and Password), which then forwards the parameters to a Java class (AccountRequest). I'm sure there is a way to store the key as a variable when the "Request" button is clicked, I just don't know how.

Any help would be much appreciated!

I want to send both the value and key of the option box when I submit a form. I feel like this should be pretty simple, but I'm unsure how to do it. Below is a snippet from my form to demonstrate what I'm referencing:

<form name='form' onSubmit="return checkForm();" action="../servlet/AccountRequest">

<select name="type1">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

<br/><input type="button" id="Submit" onclick="checkForm(this.form)" value="Request" />
<input type="reset" value="Cancel"/>
</form>

​ In a normal scenario, if I selected "Option A" in the drop-down box, I would want to send the value, or "1". However, I want to actually send the value AND key of the selection, in this case both "1" and "Option A".

In my case, I call a checkForm() JavaScript function that validates form input (there are other fields, like First Name, Last Name, Email Address, and Password), which then forwards the parameters to a Java class (AccountRequest). I'm sure there is a way to store the key as a variable when the "Request" button is clicked, I just don't know how.

Any help would be much appreciated!

• javascript
• html
• jsp

7 Answers 7

You could play with a jSON representation of your data:

<select name="type1">
 <option value="{'1':'Option A'}">Option A</option>
 <option value="{'2':'Option B'}">Option B</option>
</select>

It might not be the approach you were expecting, but you could send the key/value pair as your value and parse it when you receive it server-side.

<select name="type1">
   <option value="1,Option A">Option A</option>
   <option value="2,Option B">Option B</option>
</select>

In HTML, this is impossible: the data contributed by a select element is defined to be the value attribute of the selected option, when present (otherwise the content of the selected option element).

In JavaScript, it would be pretty easy, once you have decided how the content (“key” in your description) should be passed. At the simplest, you could append the content to the value attribute, with some separator between the strings; then you would have to parse that server-side, but that would be simple too.

However, it is part of the very idea of option elements that the content is the visible string in the user interface, understandable to the user, and the value attribute is the machine-readable easily processable data. In good design, they are kept as separate, not combined; the server should only need the data from the value attribute; otherwise there is a design flaw that should be fixed.

You could add this code to get the text of your selected <option> tag in your checkform function:

var select = document.getElementsByName("type1")[0]; // get select element - simpler if it has an ID because you can use the getElementById method
var options = select.getElementsByTagName("option"); // get all option tags within the select

for (i = 0; i < options.length; i++) { // iterate through all option tags
    if (options[i].value == select.value){ // if this option is selected
        var key = options[i].innerHTML; // store key of selected option here
    }
}

DEMO, which tells you the key that's selected

Use a compound value, then parse it out on the server:

<option value="1_A">Option A</option>

you can send the value with an input type hidden

1.-choose the default value:

<input type="hidden" id="theValue" name="type1Value" value="Option A"/>

2.-add onChange function to your select, which changes previous hidden value

<select id="type1" name="type1" onChange="updateValue()">
   <option value="1">Option A</option>
   <option value="2">Option B</option>
</select>

assuming you are using jQuery:

function updateValue(){
   var value= $('#type1').find(":selected").text();
   $('#theValue').val(value);
}

so the value of the select will be sent in type1Value variable, EASY!!

using React js

I want to get two values from the option at the same time so, I use the Split method

var string = "0,1";
var array = string.split(",");
alert(array[0]);

I create a sting on option

const getKioskSelectedUsageType=(e)=>{
  let sl = e.target.value 
  let array = sl.split(",")
  console.log("check :- ",array[1] )

}

         <select
          id=""
          className="form-control"
          value={kioskSelect}
          aria-label="kioskSelect"
          name="kioskSelect"
          title="kioskSelect"
          onChange={(e) => getKioskSelectedUsageType(e)}
          style={{ color: "#495057" }}
          >

          <option value="">Select Kiosk</option>
          {kioskConfiData.map((item, i) => {
           return (
           <React.Fragment key={i}>
           
           <option value={`${item.kioskid},${item.language}`}>
                  {item.location}
         </option>
         </React.Fragment>
         );
         })}
         </select>