使用 Javascript/jQuery 更改表单响应

Posted 2023-05-09

【中文标题】使用 Javascript/jQuery 更改表单响应

【英文标题】：Using Javascript/jQuery to change form response

【发布时间】：2018-02-01 18:38:42

【问题描述】：

我的网站上有一个表单，我只需要为输入几个邮政编码之一的人更改回复。我正在尝试设置代码以检查输入的邮政编码的前 3 位与保存在我的数组中的对象。它还没有完成，但我正在测试它，现在我正试图让 zipValue 一旦有人点击 zip 字段就显示在控制台中，但我没有任何运气得到它去工作。这就是我目前所拥有的 -

let inLA = false;
var zipsLA = ["700, 701, 703, 704, 705, 706, 707, 708, 710, 711, 712, 713, 714"];
const $zipField = document.getElementById('formFieldZip')
const $zipValue = document.getElementById('formFieldZip').value

$zipField.addEventListener('blur', function()
    console.log(zipValue);
);

我最终的希望是，如果输入的邮政编码的前 3 位数字与数组中的条目匹配，它将设置“inLA”为真。

编辑：小提琴链接：https://jsfiddle.net/zdy9sgbn/

【问题讨论】：

你有一个小提琴来说明这个例子吗？

请尝试改进您的问题。你知道你在做什么吗？ let vs var?，数组定义不是真正的数组（只有一个元素）。在变量前导 $-sign...为什么？ addEventListener at an undefined object ($zipField unequal zipField)... 检查您的代码，请自行删除此类错误。这些是解析错误（您的控制台应该会显示一些错误。修复它们）

document.ready里面的addEventListener准备好了吗？

@practice2perfect 添加了一个小提琴链接，我在document.ready内外都试过addEventListener，好像没什么区别

@practice2perfect 为什么 addEventListener 需要在 document.ready 中？你看到问题中使用了 jQuery 吗？

【参考方案1】：

试试这样的：

let inLA = false;
var zipsLA = ["700", "701", "703", "704", "705", "706", "707", "708", "710", "711", "712", "713", "714"];
const $zipField = document.getElementById('formFieldZip');

$zipField.addEventListener('blur', function()
    if (zipsLA.indexOf(this.value.slice(0, 3)) != -1) 
	    inLA = true;
     else 
    	inLA = false;
    
    console.log(inLA);
);

<form action="">
  <input type="text" id="formFieldZip">
</form>

【参考方案2】：

问题是您试图在加载之前访问 DOM 元素。

小提琴显示您正在使用 onLoad，您应该使用准备就绪

也更新了你的小提琴https://jsfiddle.net/zdy9sgbn/1/

$( document ).ready(function() 
    const $zipField = document.getElementById('formFieldZip')
    const $zipValue = document.getElementById('formFieldZip').value

    $zipField.addEventListener('blur', function()
      console.log($zipField.value);
    );
);

一旦 DOM 准备就绪，您就可以查询 DOM 中的元素，并可以向其中添加事件监听器。

如果你正在为 jquery 的文档寻找一个纯 JS 替代方案，你可以使用这个解决方案here。

【参考方案3】：

问题是您在开始时采用输入值（未定义）。它不会在您的事件列表器中更新。

从 eventListener 的输入中获取值。

使用这个，

var inLA = false;
var zipsLA = ["700", "701", "703", "704"];
const $zipField = document.getElementById('formFieldZip');

$zipField.addEventListener('blur', function()
    console.log($zipField.value);
    (zipsLA.indexOf($zipField.value) > -1) ? console.log('zip matched') : console.log('no match');
);

你也有很多语法错误。请参阅上面的 cmets。

【讨论】：

试试这个，谢谢。到目前为止，它说不匹配，即使它应该匹配，但它越来越接近了

你不需要把它放在window.onload中。您可以在正文的末尾添加一个脚本并将这段代码放在那里。如果您使用的是 jQuery，请在 document.ready 中添加代码。