JavaScript:找不到元素

Question

我遇到了一个奇怪的问题:我正在尝试获取 <form>来自 javascript 的元素，但我无法。

我的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(这会很糟糕)。

但请注意，您根本不需要 id 来实现此目的，因此，如果 id 是问题所在，那么解决方案就是不要使用它们。只需给您的触发元素一个类即可:

<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();
});

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

<小时/>

但请注意，您根本不需要 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 {
  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>