Преобразование значений входных данных в переменные

Question

Я хочу преобразовать значения, написанные пользователем, в кнопку, смоделированную следующим образом:

process.php?fname=$fname&lname=$lname

Я написал следующий код

<form id="identification" action="/action_page.php">
  First name: <input type="text" name="fname" value="Mickey"><br>
  Last name: <input type="text" name="lname" value="Mouse"><br><br>
</form> 

<button onclick="getName()">Try it</button>

<p id="result"></p>

<script>
function getName() {
    var x = document.getElementById("identification");
    var text = "";
    var i;
    for (i = 0; i < x.length ;i++) {
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("result").innerHTML = text;
}
</script>

Мой вопрос заключается в том, как преобразовать данное значение вкнопка, которая покажет кнопку, перенаправляющую на веб-страницу с вариантами fname и lname

Answer 1

Я бы вообще поставил под сомнение ваш подход к этой форме, но вот простое и понятное решение:

function getName() {
    var inputs = document.querySelectorAll('#identification input[type="text"]');
    var params = [];
    var url = '/process.php?';

    // Map array of text inputs from the form into an array of name=value strings
    params = [...inputs].map(i => `${i.name}=${i.value}`)
    // Join the array with & and add it to the url string
    url += encodeURI(params.join('&'))

    // window.location = url
    document.querySelector('#result').textContent = url
}

JSFiddle

Answer 2

Вот, пожалуйста,

function getName() {
    var x = document.getElementById("identification");
    var text = "process.php?";
    var i;
    for (i = 0; i < x.length ;i++) {
        text += x.elements[i].name + '=' + x.elements[i].value;
        if(i < x.length - 1) {
            text += '&';
        }
    }
    document.getElementById("result").innerHTML = '<a href="' + text + '"><button>LINK</button></a>';
}

<form id="identification" action="/action_page.php">
  First name: <input type="text" name="fname" value="Mickey"><br>
  Last name: <input type="text" name="lname" value="Mouse"><br><br>
</form> 

<button onclick="getName()">Try it</button>

<p id="result"></p>