JavaScript代替jQuery表单submit()

时间:2018-01-26 18:23:11

标签: forms submit

我正在尝试将页面从jQuery转换为纯JavaScript。

"提交"是问题。我已经尝试了我能想到的一切。

切换到JS时,我无法使以下行工作:

我尝试将其切换为:

上下文中的代码如下。

jQuery的:

<script type="text/javascript">
function excel( )
{
 $( '#dataToDisplay' ).val( $( '#jfabtable' ).html( ) );  // replacing with JavaScript
}
</script>

<!-- the following line works, but is jQuery -->
<a href='javascript:void(0);' onclick='$("#savetoexcelform").submit();'><img src='./excel.png' width='48' height='48' border='0' title='Download to Excel' alt='Download to Excel' /></a>

<form action='convert.php' name='savetoexcelform' id='savetoexcelform' method='post' target='_blank' onsubmit='return excel( );'>
 <input type='hidden' id='dataToDisplay' name='dataToDisplay'>
 <input type='hidden' id='filename' name='filename' value='output.xls'>
</form>

JavaScript的:

<script type="text/javascript">
function excel( )
{
 document.getElementById( 'dataToDisplay' ).value = document.getElementById( 'jfabtable' ).innerHTML;  // replaced, tested and works
}
</script>

<!-- the following line is JS, but doesn't work -->
<a href='javascript:void(0);' onclick='document.getElementById( "savetoexcelform" ).submit( );'><img src='./excel.png' width='48' height='48' border='0' title='Download to Excel' alt='Download to Excel' /></a>

<form action='convert.php' name='savetoexcelform' id='savetoexcelform' method='post' target='_blank' onsubmit='return excel( );'>
 <input type='hidden' id='dataToDisplay' name='dataToDisplay'>
 <input type='hidden' id='filename' name='filename' value='output.xls'>
</form>

谢谢。

1 个答案:

答案 0 :(得分:0)

按照惯例,javascript假设验证已经在按代码提交表单时执行。我建议您在调用form.submit之前更改逻辑以格式化值。

以下代码可以提供帮助。

<a href='javascript:void(0);' onclick='submitForm()'>
<img src='./excel.png' width='48' height='48' border='0' title='Download to Excel' alt='Download to Excel' />
</a>

<form action='convert.php' name='savetoexcelform' id='savetoexcelform' method='post' target='_blank' onsubmit='return formatForm();'>
  <input type='hidden' id='dataToDisplay' name='dataToDisplay'>
  <input type='hidden' id='filename' name='filename' value='output.xls'>
</form>

<script type="text/javascript">

    function submitForm()
    {
        formatForm();
        document.getElementById( "savetoexcelform" ).submit( );
    }

    function formatForm()
    {
         document.getElementById( 'dataToDisplay' ).value = 
         document.getElementById( 'jfabtable' ).innerHTML;  // replaced, tested and works
}
</script>