Javascript: 找不到元素

Question

我运行遇到了一个奇怪的问题：我试图从 javascript 中获取 <form> 元素，但我做不到。

我的 html 代码是由 php:

动态创建的

<form id="form_color_{$color->id}" action="?com=saveColor" method="POST">   
    <!--some input elements-->
    <a href="javascript:saveColor({$color->id})"> 
        <img src="{$webSiteUrl}assets/img/admin/floppy_disk_24.png" /> 
        <span> Save</span> 
    </a>
</form>

因此该页面将包含各种 form_color_ 形式，例如 form_color_1 form_color_2 等...

单击图像时调用此 javascript 函数：

function saveColor(id){
    $("#form_color_"+id).submit();
}

函数正确接收了 id 参数，但没有提交表单。

如果我尝试获取表单元素，我会得到 null

function saveColor(id){
    form = 'form_color_'+id;
    var doc = document.getElementById(form);
    alert(doc);
    $("#form_color_1").submit();
}

该功能与其他形式完美配合。

这是 php 生成的代码示例：

<form id="form_color_1" action="?com=saveColor" method="POST">
    <!--some input elements-->
    <a  href="javascript:saveColor(1)"> 
        <img imgc="http://10.10.10.46/c5liveOnLine/assets/img/admin/floppy_disk_24.png" /> 
        <span> Save</span> 
    </a>
</form>

我错过了什么？

Answer 1

你所拥有的应该可以工作，当然除非页面上有另一个具有相同 id 的表单（这会很糟糕）。

但是请注意，您根本不需要 ids，因此如果 ids 是问题所在，解决方案就是不使用它们。只需给你的触发元素一个 class:

<form action="?com=saveColor" method="POST">   
    <!--some input elements-->
    <a class="submit-form"> 
        <img src="{$webSiteUrl}assets/img/admin/floppy_disk_24.png" /> 
        <span> Save</span> 
    </a>
</form>

...然后使用处理程序提交包含元素的表单：

$(document).on("click", ".submit-form", function() {
    $(this).closest("form").submit();
});

我使用了委托处理程序，因为我没有看到任何不这样做的理由，这意味着您可以根据需要动态添加和删除表单。

但请注意，您根本不需要 JavaScript，除非您要做的不仅仅是提交表单。 button 元素的样式可以设置为您希望它们看起来的任何方式，它们的默认操作是提交它们所在的表单。因此：

<form action="?com=saveColor" method="POST">   
    <!--some input elements-->
    <button> 
        <img src="{$webSiteUrl}assets/img/admin/floppy_disk_24.png" /> 
        <span> Save</span> 
    </button>
</form>

只需使用 CSS 使按钮看起来像您想要的样子。

这是一个样式 button 看起来像 link 的示例：

button {
  border: none;
  background-color: transparent;
  color: blue;
}
button:hover {
  text-decoration: underline;
}

<form action="?com=saveColor" method="POST">
  <!--some input elements-->
  <button>
    <img src="{$webSiteUrl}assets/img/admin/floppy_disk_24.png" />
    <span> Save</span> 
  </button>
</form>

Javascript: 找不到元素

Javascript: can't find element

html

javascript

php

forms

submit