【问题标题】:Feeding Javascript variables into form fields on submit在提交时将 Javascript 变量输入表单字段
【发布时间】:2012-10-15 01:58:52
【问题描述】:

我几乎可以完成这项工作,但还不能完全完成。我在预订页面上有一个 jQuery 日期选择器,它以 mm/dd/yyyy 形式输入“到达”字段。我正在使用 Javascript 将其拆分为单独的 mm、dd 和 yyyy 值,现在我正在尝试将这些值反馈到表单上的月、日和年字段,然后再将表单发布到第三方处理站点.

我可以使用 Javascript 成功地为这些字段分配值,但我的挑战是在点击提交按钮之后实现这一点,因为我需要它来携带用户选择的日期。

为了给你所有相关的部分,这是我的提交按钮:

<input type='submit' onclick='toProcess()' name="submitButton" id='submitButton'
value='Check Availability' />

这是获取日期并将其拆分为三个单独值的函数(当单击提交按钮时会正常运行):

function toProcess(){
    var date = document.getElementById("Arrival").value;
    var splitDate = date.split("/");
    var arrivalMonth = splitDate[0];
    var arrivalDay = splitDate[1];
    var arrivalYear = splitDate[2];
    return [arrivalMonth, arrivalDay, arrivalYear];
}

这里是我使用返回值创建变量以反馈到表单的地方:

var newDates = toProcess();
arrivalMonth = newDates[0];
arrivalDay = newDates[1];
arrivalYear = newDates[2];

到目前为止,一切正常。通过使用警报,我已经能够看到到目前为止这些值肯定是通过的。但我现在无法将这些值反馈到表单中。

我正在尝试这样做:

document.getElementById("Month").value = arrivalMonth;
document.getElementById("Day").value =  arrivalDay;
document.getElementById("Year").value =  arrivalYear;

如果我使用在点击提交按钮之前存在的变量,这种方法可以正常工作。我就是无法让 new 值起作用。

我怀疑问题在于,虽然通过单击“提交”按钮正确调用了该函数,但它后面的元素没有被执行,因为它们在该函数之外。我只是无法弄清楚如何将这些值从函数内部发送回表单字段。

我解释清楚了吗?对此的任何帮助将不胜感激。谢谢!

【问题讨论】:

  • 你为什么在toProcess函数中返回一个数组?,你也不能在toProcess函数中设置表单字段值吗?
  • 感谢您的提问。诚然仍在学习 javascript,但我知道我需要使用数组从函数返回多个值。不是这样吗?我最初确实尝试从函数内部设置字段的值,但无法使其正常工作。我认为这是因为它们是本地变量而不是全局变量。如果有办法从内部做到这一点,那可能会解决问题。
  • 这是你想要做的吗? jsfiddle.net/EamR7
  • 谢谢穆萨。是的,这就是我想要的。这与我最初尝试从函数内部提供字段时使用的代码相同。但出于某种原因,它适用于您在 Fiddle 上,但仍然不适用于我的表单。我现在正在检查它,试图看看它在哪里崩溃;很快就会在这里更新东西。再次感谢!
  • 好吧,我仍然对所有正确的部分感到迷茫,但我就是无法做到这一点。这是我的完整表格,其中包含其他所有内容,以防万一看似无关的东西造成了问题。我哪里错了? jsfiddle.net/alwayslearning/dg6rt

标签: javascript forms javascript-events


【解决方案1】:

所以基本上,在单击提交按钮时,您准备好的输出不会显示在所需的字段中。

你能把它弄出来吗?

此外,我过去遇到的一个问题是我没有意识到提交按钮会刷新页面,因此有效地删除了任何脚本使用。

【讨论】:

  • 谢谢;如上所述,我正在研究 Musa 创建的小提琴。一旦我弄清楚发生了什么,很快就会在这里得到更新。
猜你喜欢
  • 2011-01-01
  • 1970-01-01
  • 2010-09-23
  • 1970-01-01
  • 2013-07-04
  • 1970-01-01
  • 1970-01-01
  • 2015-06-17
  • 2021-09-10
相关资源
最近更新 更多