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（这会很糟糕）。

但请注意，您根本不需要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();
});

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

但请注意，您根本不需要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的示例，看起来像一个链接：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript：找不到元素

1 个答案: