如何通过JavaScript设置表单操作?

时间:2010-04-23 18:28:45

标签: javascript html forms

我有一个HTML表单,其动作应该通过JavaScript动态设置。我该怎么做?这是我想要实现的目标:

<script type="text/javascript">
function get_action() { // inside script tags
 return form_action;
 }
</script>

<form action=get_action()>
...
</form>

8 个答案:

答案 0 :(得分:63)

您无法在onXXX以外的标准HTML属性中调用JavaScript函数。只需在窗口加载时分配它。

<script type="text/javascript">
    window.onload = function() {
        document.myform.action = get_action();
    }

    function get_action() {
        return form_action;
    }
</script>

<form name="myform">
    ...
</form>

您看到我已将表单name给出,以便在document中轻松访问。

或者,您也可以在submit事件期间执行此操作:

<script type="text/javascript">
    function get_action(form) {
        form.action = form_action;
    }
</script>

<form onsubmit="get_action(this);">
    ...
</form>

答案 1 :(得分:56)

普通JavaScript:

document.getElementById('form_id').action; //Will retrieve it

document.getElementById('form_id').action = "script.php"; //Will set it

使用jQuery ...

$("#form_id").attr("action"); //Will retrieve it

$("#form_id").attr("action", "/script.php"); //Will set it

答案 2 :(得分:7)

使用jQuery非常简单的解决方案:

$('#myFormId').attr('action', 'myNewActionTarget.html');

您的表格:

<form action=get_action() id="myFormId">
...
</form>

答案 3 :(得分:2)

document.forms[0].action="http://..."

...假设它是页面上的第一个表单。

答案 4 :(得分:2)

实际上,当我们想要这个时,我们想根据我们按下哪个提交按钮来改变动作 在这里,您甚至不需要为表单指定.boundary { padding-bottom: 5.24078%; position: relative; overflow: hidden; background-color: white; } .boundary:before { content: ""; position: absolute; top: 0; left: 0; width: 105%; height: 105%; transform-origin: top left; background-color: green; transform: skew(0, 3deg); z-index: 10; } .inner { height: 100%; width: 100%; background-color: green; color: #fff; z-index: 50; position: relative; border-top: 1px solid green; margin-top: -1px; } name。只需使用clicked元素的id属性:

form

答案 5 :(得分:1)

正如Rabbott所说,或者如果你拒绝jQuery:

<script type="text/javascript">
function get_action() { // inside script tags
  return form_action;
}
</script>

<form action="" onsubmit="this.action=get_action();">
...
</form>

答案 6 :(得分:0)

使用JavaScript选择选项后设置表单操作

<script>
    function onSelectedOption(sel) {
        if ((sel.selectedIndex) == 0) {
            document.getElementById("edit").action =
            "http://www.example.co.uk/index.php";
            document.getElementById("edit").submit();
        }
        else
        {
            document.getElementById("edit").action =
            "http://www.example.co.uk/different.php";
            document.getElementById("edit").submit();
        }
    }
</script>

<form name="edit" id="edit" action="" method="GET">
    <input type="hidden" name="id" value="{ID}" />
</form>

<select name="option" id="option" onchange="onSelectedOption(this);">
    <option name="contactBuyer">Edit item</option>
    <option name="relist">End listing</option>
</select>

答案 7 :(得分:0)

更改表单的操作URL:

 <form id="myForm" action="">

     <button onclick="changeAction()">Try it</button>

 </form>

 <script>
     function changeAction() {

         document.getElementById("myForm").action = "url/action_page.php";
     }
 </script>