Question

我尝试切换一些标准表单按钮并改为使用图像。我已经在这里进行了搜索，并取代了我的“折叠”按钮（效果很好！）

下面的Round1按钮是一个ajax调用，可以使用标准按钮正常工作。当我尝试将其更改为图像时，似乎想要提交它（重新加载页面），而不是调用ajax函数。

这很好用：

<button type="button" onClick="Round1(<?php echo $compare_dealer;  ?>)">Raise</button>
<button type="button" onClick="Check(<?php echo $compare_dealer;  ?>)">Check</button>
<input type="image" src="../../_images/Fold.jpg" border="0" name='submit'  value='Fold' />
</form>

这是我添加的用于将onclick按钮更改为图像的行：

<input type="image" src="../../_images/Raise1.jpg" onClick="Round1(<?php echo $compare_dealer;  ?>)">Raise</button>

我得到的错误是：

注意：未定义的索引：在第320行的C：\ xampp \ htdocs \ temp \ Toronto \ Casino \ Poker.php中提交

我相信这是因为它正在提交到同一页面。

如何让表单调用ajax函数而不是提交自己？感谢。

Answer 1

我建议您听一下表格submit event。

你可以attach event handler这样：

<script type="text/javascript">
    var form =
        document.forms['your-form-name']        ||
        document.getElementById('your-form-id')
    ;

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        // Call AJAX function from here.

        return false;
    });
</script>

您必须为表单指定name属性，或将其ID与getElementById()一起使用。

preventDefault()方法调用将阻止发送表单。

此外，它可能是一种更好的方法来单独使用CSS设置按钮的样式。您甚至可以使用以下元素：

<button type="submit"></button>

选择器：

<style type="text/css">
    #form-id > button[type="submit"] {
        /* Your styles */
    }
</style>

请参阅此JS Fiddle。作为奖励，了解如何完成CSS精灵;）

使用图像作为Ajax的onClick按钮

1 个答案: