HTML Форма объединенных входов в одно поле (с GET)

Question

Короче говоря:

<form action="example.com/" method="get">
    <input type="hidden" name="q" value="one,two,">
    <input type="text" name="q">
</form>

Цель состоит в том, чтобы, когда пользователь вводит, например, "три", веб-сайт

example.com/?q=one,two,three

вызывается вместо example.com/?q=one,two,&q=three.

Решение без JavaScript было бы идеальным, но я подозреваю, что это невозможно.

Большое спасибо!

Answer 1

Да, насколько я знаю, без использования Javascript это невозможно. лучше, если вы справитесь с этим в бэкэнде.

Но, если вы действительно хотите сделать это во внешнем интерфейсе, вы можете сделать следующее (С ванилью Javascript).

document.addEventListener("DOMContentLoaded", function(){   
    let form = document.getElementById('form');
    let query = '';
    let valueObj = {};

    if(form){
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            let exceptinput = ['submit','reset','button','file','image'];
            let allElem = e.srcElement;            
            if(allElem.length > 0){
                createValueObj(allElem, valueObj, exceptinput).then(data => { 
                    console.log(data);                    
                    query = serialize(data);
                    window.location = 'http://www.example.com/?' + query;                  
                }).catch(err => {
                    console.log(err);
                })                                
            }     
        });
    } 





    let serialize = (obj) => {
        var str = [];
        for (var p in obj)
          if (obj.hasOwnProperty(p)) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
          }
        return str.join("&");
    }

    let insertValueToObj = (key, value, obj) => {        
            if(obj[key]){
                obj[key] = obj[key]+','+ value;
            }else{
                obj[key] = value;
            }
            return obj;
    }

    let createValueObj = (arr, obj, exceptinput) => {
        return new Promise((resolve, reject)=>{
            for (let index = 0; index < arr.length; index++) {          
                let isProperInput = exceptinput.includes(arr[index].type);                              
                if(!isProperInput) {
                    let key = arr[index].name;                        
                    let value = arr[index].value.trim();
                    obj = insertValueToObj(key, value, obj);                        
                } 
                if(index == (arr.length -1)){
                    resolve(obj);
                }                                      
            }
        });        
    }


});

спасибо.

Answer 2

Если вы не возражаете против использования массива, вы можете попробовать использовать это решение

<form action="example.com/" method="GET">
    <input type="hidden" name="q[]" value="one">
    <input type="hidden" name="q[]" value="two">
    <input type="text" name="q[]">
    <input type="submit" name="submit">
</form>

, таким образом вы получите массив значений при отправке, тогда вы можете обработать его на стороне сервера. Но если вы все еще хотите использовать свой метод, тогда требуется Javascript. С помощью javascript вы можете получить данные формы, затем добавить пользовательский ввод в форму, а затем отправить его с помощью ajax.