从 HTML 表单的输入中获取修改后的文本

Posted 2023-04-14

【中文标题】从 HTML 表单的输入中获取修改后的文本

【英文标题】：Getting a modified text from an input in an HTML form

【发布时间】：2021-06-29 12:40:46

【问题描述】：

我需要为酒店网站制作预订表格。它需要获取一些基本信息并将其发送到我的预订引擎。

我的问题是我的预订引擎需要以 mm/dd/yyyy 格式的文本接收任何日期。不幸的是，大多数欧洲用户不习惯这种格式，因为他们使用 dd/mm/yyyy。

所以，我需要用户在 dd/mm/yyyy 中写入并查看他们的输入信息，但预订引擎应该以 mm/dd/yyyy 的形式接收它。

这是我迄今为止尝试过的：

<form action="..." onsubmit="return ChangeDate()" id="resform" name="resform" target="_blank" method="get">

<input type="text" name="DateIn">
<input type="submit" value="Submit" />

</form>

<script type="text/javascript" language="javascript">

function ChangeDate() 
    var x = document.forms["resform"["DateIn"].value.split('/');
    return document.forms["resform"]["DateIn"].innerhtml = x[1]+'/'+x[0]+'/'+x[2];
    
</script>

我不断得到 dd/mm/yyyy 格式。

【问题讨论】：

你不能使用date输入元素而不是文本吗？

yyyyyy 的有效年份是多少？？？

那是个错误！这是yyyy

【参考方案1】：

最好使用：

<input type="date" id="dateIn"/>

除非你创建了一个JS函数来阻止他，否则用户可以在文本字段中输入他想要的任何内容。

另外，在chrome,edge,safari...中，浏览器的日期输入格式是mm/dd/yyyy，而Firefox浏览器是dd/mm/yyyy。

【参考方案2】：

如果您要使用date 类型的输入字段，然后使用Intl.DateTimeFormat 类来格式化您的输出，您应该能够将其显示为一件事并将值作为另一件事发送。我对问题中的yyyyyy 以及预订引擎所期望的格式感到有些困惑，但希望这能让您深入了解如何实现目标。

const oForm=document.forms.resform;
const oDate=oForm.DateIn;
const oBttn=oForm.querySelector('[type="submit"]');


oBttn.addEventListener('click',e=>
  if( oDate.value!='' )
    const date=new Date( oDate.value );
    const opts= year:'numeric', month:'2-digit', day:'2-digit' ;
    const formatted=new Intl.DateTimeFormat( 'en-US', opts ).format( date );
    
    console.info( 'Formatted date value: %s',formatted ) 
 
);

<form name='resform' target='_blank' method='get'>
    <input type='date' name='DateIn' />
    <input type='submit' />
</form>

【讨论】：

到目前为止，我无法让那个 javascript 工作，但我想我会得到它，感谢你，我很感激！

当你说你不能让它工作你是什么意思？输出格式不正确还是您希望更改格式？

预订引擎现在得到 yyyy-mm-dd，我猜这意味着 javascript 没有正确连接到我的 HTML。我曾尝试将其作为脚本包含在 js 模板中，但无济于事。我试图弄清楚我做错了什么......我几乎不知道javascript，但你的代码在你的评论中完美运行。