将 HTML 表单输入设置为 JS 变量

Question

我想将用户输入读回给他们的表单，在他们发送之前进行确认。我在页面上有一些带有相应 ID 的文本元素。 我认为我只需要将变量设置为等于输入字段的值，但是当 function 运行时它只返回空白。

我有一个 function 将变量设置为该表单输入的.value ，但我可能会挂断的是输入字段上没有默认值，我认为该值是在用户输入后设置的.

示例用户在字段中输入“John Doe”不应该将该字段的值更改为“John Doe”吗？

var Phone;

document.getElementById('confirm-details').onclick = ConfirmDetails()

function ConfirmDetails() {
    // Set variable to form input
    Phone = document.getElementById("InputPhone").value;
    // Change text element to variable
    document.getElementById("BookingPhone").innerHTML = Phone;
};

也许我只是对.value属性感到困惑，但我认为输入字段上的值应该是用户输入的值。

Answer 1

这一行

document.getElementById('confirm-details').onclick = ConfirmDetails()

应该

document.getElementById('confirm-details').onclick = ConfirmDetails

您不希望document.getElementById('confirm-details').onclick引用 function ConfirmDetails的结果（此处为 void），而是 ZC1C425268E68384D1AB4Z5074 本身。

Answer 2

而不是 using.value，您需要使用.innerText

Phone = document.getElementById("InputPhone").innerText;

Answer 3

object.oninput = function(){
    ConfirmDetails();
};

或者，速记：

object.oninput = function(){ConfirmDetails()};

您还应该使用document.getElementById().innerHTML()来获取文本

Answer 4

这对我来说很好。 我感谢所有的答案！

<script>
document.getElementById("confirm-details").addEventListener("click", function(){
document.getElementById("BookingName").innerHTML = document.getElementById("InputName").value;
document.getElementById("BookingEmail").innerHTML = document.getElementById("InputEmail").value;
document.getElementById("BookingPhone").innerHTML = document.getElementById("InputPhone").value;
document.getElementById("InputDay").innerHTML = document.getElementById("BookingDay").value;
document.getElementById("InputTime").innerHTML = document.getElementById("BookingTime").value;
document.getElementById("InputService").innerHTML = document.getElementById("BookingService").value;
document.getElementById("InputExtra").innerHTML = document.getElementById("BookingExtra").value;
});

</script>

Answer 5

以下是我相信您正在努力实现的目标：

 function confirmDetails() { // Set variable to form input var phone = document.getElementById("inputPhone").value; var confirmMsg = 'is ' + phone + ' correct?' + '<br> <input type="button" value="Yes" onclick="confirmed()"> '; // Change text element to variable document.getElementById("bookingPhone").innerHTML = confirmMsg; }; function confirmed(){ alert('confirmed'); }

 <input id="inputPhone" type="text" placeholder="input here"> <input type="button" onclick="confirmDetails()" value="Submit"> <br> <span id="bookingPhone"></span>

单击该按钮时，它将运行 function confirmDetails并将变量phone设置为用户的输入。 我将变量confirmMsg设置为回读用户输入的确认消息。 我使用了一个具有唯一 ID 的跨度并将变量confirmMsg发送给它。

如果您在其他地方需要它，我将确认消息放入一个变量中以使其更加通用。