Question

我有3个不同的HTML页面，其中包含一个表单除了id属性（以及一些子id属性）之外，所有表单都看起来相同，但每个表单的Javascript行为应该相同。

我想在某个动作上调用相同的Javascript函数，但是必须识别动作被触发的形式，以便函数知道应该执行其正文的哪个部分。

form1.html

<form id="form1">
 <input id="fname1"/>
 <input type="submit" id="btn-sub" onclick="fun()"/>
 <p id="demo"></p>
</form>

form2.html

 <form id="form2">
 <input id="fname2"/>
 <input type="submit" id="btn-sub" onclick="fun()"/>
 <p id="demo"></p>
 </form>

form3.html

 <form id="form3">
 <input id="fname3"/>
 <input type="submit" id="btn-sub" onclick="fun()"/>
 <p id="demo"></p>
 </form>

javascript功能

function fun() {
    // Here I would like conditions to look like
    if ( /* function call from form1 id then */ ) {
        document.getElementById("demo").innerHTML = "Hello form 1";
    }
    if ( /* function call from form2 id then */)  {
        document.getElementById("demo").innerHTML = "Hello form 2";
    }
    if ( /* function call from form3 id then */) {
        document.getElementById("demo").innerHTML = "Hello form 3";
    }
 }

Answer 1

function fun()
     {

     var formID = $(this).closest("form").attr("id");
     //here i want conditions like
     if(formID==your Condition1)
     {
     document.getElementById("demo").innerHTML="Hello form 1";
     }
     if(formID==your Condition2)
     {
     document.getElementById("demo").innerHTML="Hello form 2";
     }
     if(formID==your Condition2)
     {
     document.getElementById("demo").innerHTML="Hello form 3";
     }
     }

Answer 2

您将从提交按钮中删除 onclick 功能。

您将使用如下的jquery事件处理程序： -

$(function () {
        $('form').on('submit', function (event) {
            switch(event.target.id)
                 case 'form1':
                 // Do Some Code
                 break;

                 case 'form2':
                 // Do Some Code
                 break;                     
        });
    });

使用单个javascript函数处理多个表单行为

2 个答案: