javascript - Jquery 设置不同的输入文本和值

Question

现在我正在使用 $.val() 来设置输入值。但我希望用户在输入中看到不同的文本，并且仍然将使用 val() 设置的值发送到服务器。我尝试使用 $.text() 但它不起作用。有没有一种方法可以设置 html value 属性，并在输入中设置不同的文本以供 th## Heading ##e 用户查看？

我没有发布任何代码，因为它非常通用。我需要这个的原因是因为我想在文本中显示一个漂亮的日期字符串(我使用的是日期时间选择器)并将该字符串的压缩版本发送到服务器。

编辑

好的，希望这对您有所帮助:

<input class="form-control date" id="booking_time" name="hour" type="text">

在 Javascript 中我有类似的东西:

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

但我希望发送到服务器的输入值是 whithout toDateString 处理的日期，并且仍然显示 date.toDateString() 在文本框中。为此，我希望这会起作用:

$("#booking_time").val(date_booked);
$("#booking_time").text(date_booked.toDateString());

但事实并非如此。

Answer 1

您可以尝试将要发送到服务器的日期存储在一个变量中，然后 Hook 到表单提交按钮的点击事件中，以便在提交之前更改值，如下所示:

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

$("#id-of-submit-button").on("click", function() {
    $("#booking_time").val(date_booked);
});

唯一的问题是，如果用户编辑了输入，那么它将覆盖他们的编辑并改为发送变量。为了解决这个问题，您可以使用另一个变量来检测输入的变化:

var submitvardate = true;
var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

$("#id-of-submit-button").on("click", function() {
    if (submitvardate) {
        $("#booking_time").val(date_booked);
    }
});    

$("#booking_time").on("change", function() {
    submitvardate = false;
});