Html Question posted in
Some basic documentation can be found here.

In html select multiple pass many values with the same key

I’m working with an application that uses web pages to launch db procedures (as post).

In html code I have:

<select name="key" multiple>
    <option value="val1">val1</option>
    <option value="val2">val2</option>
...
<option value="valn">valn</option>

When I mark few of them and click submit, following code is send:
key=val1&key=val2&key=val3...

This is caught by db procedure like func(key varchar2). Unfortunatelly procedure catch only the first value.

Is possible in plain html get only one key?
ex. key=val1val2val3
or values separated by something (, ; /)?

Or maybe there is another approach that will allow me to retrieve all the options selected by the user?

I searched a soution but I didn’t find. Also tried to apply js to get a comma separated list but I’m a database base developer not web developer and I couldn’t do it. Apart the fact that on target system js is blockedd.

Tags:

2

Answers


  1. 0

    In plain HTML you can’t use <select> tag to select more than one. In case you will need to recreate the <select> tag using <div> or some elements like that with JavaScript. Here is an how to do example (https://codeshack.io/multi-select-dropdown-html-javascript/) so you can do It yourself or copy paste it.

    Just to notify you; while sending query like ?key1=value1; you can make splitting yourself like ?key1=value1-value2-..; or ?key1=value1,value2,.. and split the query in the other side.

    You can search on google HTML multi select dropdown or if you don’t have too much option tags, you can switch to checkbox.

    Here is an example on checkbox:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Form Example</title>
</head>
<body>
    <h2>Sample Checkbox Form</h2>
    <form id="checkboxForm" action="/submit" method="get">
        <label>
            <input type="checkbox" name="options" value="Option 1">
            Option 1
        </label><br>
        <label>
            <input type="checkbox" name="options" value="Option 2">
            Option 2
        </label><br>
        <label>
            <input type="checkbox" name="options" value="Option 3">
            Option 3
        </label><br>
        <input type="submit" value="Submit">
    </form>

    <script>
        document.getElementById('checkboxForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from submitting

            let form = event.target;
            let checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
            let selectedValues = [];

            checkboxes.forEach(checkbox => {
                selectedValues.push(checkbox.value);
            });

            let queryString = 'options=' + selectedValues.join(',');

            // Redirect to the desired URL with the query string
            window.location.href = form.action + '?' + queryString;
        });
    </script>
</body>
</html>

    This script will stop form submit when clicked to button and get the selected checkboxes and then submit the form with only 1 key.

    Example Query: /submit?options=Option+1,Option+3

    Login or Signup to reply.
  2. 0

    You need this, simpler and straight forward. Send this urlEncodedData value to server as application/x-www-form-urlencoded content type

    document.getElementById('form').onsubmit = e =>{
  e.preventDefault();
  const formData = new FormData(e.target);
  const key = formData.getAll('key');
  formData.delete('key');
  
  let urlEncodedData = new URLSearchParams(formData).toString();
  urlEncodedData+= `&key=${key}`
  console.log(urlEncodedData); // send this to server as application/x-www-form-urlencoded type
}
    <form id='form'>
  <input type='text' name='text' required/>
  <select name='key' multiple required>
          <option value="val1">val1</option>
          <option value="val2">val2</option>
          <option value="val3">val2</option>
  </select>
  <button>Submit</button>
</form>

    Output value text=test&key=val1,val2,val3 where key value must be separated by ,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search