如何在点击javascript中的按钮时使用通用数据填充表单？

作者: 庸人自扰1
发布时间: 2024-12-28 11:08:23 (2月前)
转自：

6 条回复

0#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 好的，我看到了小提琴。在 <EM> 理论 </EM> 它应该工作。问题是JS Fiddle将js代码包装在表单无法找到的范围内。 </p> <P> 如果您打开控制台，您将看到消息“函数myFunction不存在”。如果你看到JS Fiddle如何渲染你的代码，你会看到 <code> function myFunction () </code> 在另一个函数中，它不在全局范围内，任何html元素都无法访问它。 </p> <P> 如果你想要推荐，我会改变一下html。像这样： </p> <P> 除掉 <code> onclick="myFunction()" </code> 从html中添加一个id到该按钮 </p> <pre> <code> <button id="btn-to-apply-defaults">... </code> </pre> <P> 将功能重组为如下所示： </p> <pre> <code> document.getElementById("btn-to-apply-defaults").addEventHandler("click", function () { // here go the contents of the original myFunction() }); </code> </pre> <P> 这就是有些人称之为“不显眼”的js，这意味着，js并没有直接绑定到html元素本身的元素，而是事后绑定事件。 </p> <P> 如果这仍然不起作用，那是因为当你这样做时，DOM中的按钮可能还不存在 <code> getElementById </code> 。这是因为JS Fiddle正在插入脚本的<strong> 以上 </强> HTML。您有两种选择： </p> <OL> <LI> 告诉JS Fiddle将js放在文件的底部（参见js编辑器上方的下拉列表） </LI> <LI> 像这样绑定元素（例子是jquery）： </LI> </醇> <pre> <code> $(document).on("click", "#btn-to-apply-defaults", function () { // here go the contents of the original myFunction() }); </code> </pre> <P> 这个事件必然会发生 <code> document </code> 本身肯定会存在，但只在“currentTarget”出现时触发 <code> #btn-to-apply-defaults </code> </p> </DIV>

编辑
1#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您的输出来自PHP，只需在a中添加此额外行 <code> script </code> 标签。像这样： </p> <pre> <code> <script> document.getElementsByClassName("ABC-Fill")[0].addEventListener("click",function(){ let yourForm = document.getElementById("myform"); yourForm.title_en.value = "Good morning."; yourForm.title_fr.value = "Bonjour"; yourForm.description_en.value = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."; yourForm.description_fr.value = "Dans la biblioth锟斤拷que des composants se trouvent le composant Texte mod锟斤拷le qui vous pouvez faire glisser sur le plan de dessin."; yourForm.program_id.value = 6; }); </script> </code> </pre> <P> 另外，给你的按钮一个特定的类来使用它（例如，class =“ABC-Fill”），如下所示： </p> <pre> <code> <a class="btn btn-primary ABC-Fill" style="float:right;" role="button">Insert ABC</a> </code> </pre> <P> 这是你的代码工作的小提琴： </p> <P> <a href="https://jsfiddle.net/yw3c2xau/" rel="nofollow noreferrer"> https://jsfiddle.net/yw3c2xau/ </A> </p> </DIV>

编辑
2#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你应该使用JavaScript来做这件事。 </p> <P> 在调用函数的按钮上添加一个onClick锟文件。在函数中设置这些输入的值。 </p> </DIV>

编辑
3#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在你的 <a href="https://jsfiddle.net/yga3e4L2" rel="nofollow noreferrer"> 的jsfiddle </A> 你已经习惯了 <code> document.getElementsByName </code> 然后它回来了 <code> NodeList[] </code> 不是元素。您可能需要使用 <code> document.getElementById </code> 使代码工作。 </p> <P> <code> <a class="btn btn-primary" onclick="myFunction()" style="float:right;" role="button">Insert ABC</a> </code> </p> <pre> <code> function myFunction() { document.getElementById("title_en").value="Good Morning"; document.getElementById("title_fr").value="Bonjour"; document.getElementById("description_en").value="Bonjour"; document.getElementById("description_fr").value="Bonjour"; document.getElementById("program_id").value="6"; } </code> </pre> </DIV>

编辑
4#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 也许你可以生成data-x属性，然后用这些数据填充输入值 </p> <P> HTML： </p> <pre> <code> <form> First: <input data-default="First def" class="put-def" type="text"/> Second: <input data-default="Second def" class="put-def" type="text"/> </form> <button onClick="fill();"> Fill! </button> </code> </pre> <P> JS，以JQuery为例： </p> <pre> <code> function fill(){ $(".put-def").each(function(){ $(this).val($(this).data('default')); }); } </code> </pre> <P> 小提琴： <a href="https://jsfiddle.net/fh1xapru/10/" rel="nofollow noreferrer"> https://jsfiddle.net/fh1xapru/10/ </A> </p> </DIV>

编辑

登录后才能参与评论