jQuery设置不同的输入文本和值

Question

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

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

编辑

好的，希望这有所帮助：

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

在 Javascript 中我有这样的代码：

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

但是我希望将发送到服务器的输入值设为日期，不需要进行toDateString处理，并且仍然在文本框中显示date.toDateString()。为此，我希望这样做：

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

但实际上它并没有这样做。

- Alejandro Veintimilla

---

日期选择器具有格式化程序，并且它们存储日期对象，因此不清楚问题出在哪里。您可以解析日期对象并以任何方式发送到服务器，并使用格式选项以所需的方式显示。请提供完整细节。 - charlietfl

使用 $.val() 来设置输入框的值。但我希望用户在输入框中看到不同的文本，同时仍然将使用 val() 设置的值发送到服务器。尝试设置 .val() 来设置要显示的文本，并向服务器发送格式化后的值？ - guest271314

好的，我想我没有正确地解释清楚。我会添加一个编辑。 - Alejandro Veintimilla

我建议您创建一个数据属性，并在其中存储要保存在数据库中的数据。在提交时，在服务器端语言中将数据属性提交以保存到数据库中。 - guradio

Answer 1

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

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;
});

- B. Aikey

---

您的回答是一个有创意的解决方法，非常感谢。不过，为了看看是否能够找到其他想法，我会等待几天时间。 - Alejandro Veintimilla

当然，我建议您研究一下HTML5中的“日期”输入字段。祝你好运！ - B. Aikey

Answer 2

你可以尝试通过ajax发送你的值

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());
$("#form").on("submit",function(){
    $.ajax({
        url : '',
        type : '',
        data : {
            hour : date_booked 
        },
        success : function(data){
            // do something ...
        }
    });
    return false;
}

- Herbie D