使用javascript在同一页面上调用多个函数

时间:2013-11-12 00:16:55

标签: javascript html jsfiddle

我试图用相同的表单提交函数调用两个函数。但相反,我得到了一个非常冗长的错误。

<form name="form1" method="post" onClick="myFunction();">
    <input type="text" name="DomainName" id="Domain_name" required=""/>
    <input type="submit" value="Submit" />
    <div id="list_container"></div>
    <div id="table_container"></div>
</form>

我使用的JavaScript是:

function myFunction() {
    var input_domain = document.forms["form1"]["DomainName"].value;
    if (input_domain == null || input_domain == "") return;
    var container = document.getElementById("list_container");
    var ul = document.createElement("ul");
    var navLinks = ["crawler3", "crawler4", "crawler5"];
    for (var i = 0; i < navLinks.length; i++) {
        ul.innerHTML += "<li> " + navLinks[i] + "</li>";
    }
    document.getElementById("list_container").appendChild(ul);
    return false;
}

function createTable() {
    var input_domain = document.forms["form1"]["DomainName"].value;
    if (input_domain == null || input_domain == "") return;
    var table = document.createElement("table");
    var names = ["website1", "website2"];
    var container = document.getElementById("table_container");
    var tablebody = document.createElement("tbody");
    for (var i = 0, len = names.length; i < len; ++i) {
        var row = document.createElement("tr"),
            column1 = document.createElement("td"),
            column2 = document.createElement("td"),
            column3 = document.createElement("td"),
            column4 = document.createElement("td"),
            checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = names[i];
        checkbox.value = names[i];
        checkbox.id = names[i];
        var label = document.createElement('label')
        label.htmlFor = names[i];
        label.appendChild(document.createTextNode(names[i]));
        column1.appendChild(checkbox);
        column1.appendChild(label);

        var dropdown = document.createElement("select");
        dropdown.name = names[i] + "_select";
        var op1 = new Option();
        op1.value = "enable";
        op1.text = "enable";
        var op2 = new Option();
        op2.value = "disable";
        op2.text = "disable";
        dropdown.options.add(op1);
        dropdown.options.add(op2);
        column2.appendChild(dropdown);

        var datetime_from = document.createElement('input');
        datetime_from.type = "datetime-local";
        datetime_from.name = names[i] + "_from";
        column3.appendChild(datetime_from);


        var datetime_to = document.createElement('input');
        datetime_to.type = "datetime-local";
        datetime_to.name = names[i] + "_to";
        column4.appendChild(datetime_to);


        row.appendChild(column1);
        row.appendChild(column2);
        row.appendChild(column3);
        row.appendChild(column4);
        tablebody.appendChild(row);
    }
    table.appendChild(tablebody);
    document.getElementById("table_container").appendChild(table);
}

我得到的错误是:

  

{“error”:“Shell表单不验证{'html_initial_name':u'initial-js_lib','form':,'html_name':'js_lib','html_initial_id':u'initial-id_js_lib', 'label':u'Js lib','field':,'help_text':'','name':'js_lib'} {'html_initial_name':u'initial-js_wrap','form':,'html_name' :'js_wrap','html_initial_id':u'initial-id_js_wrap','label':u'Js wrap','field':,'help_text':'','name':'js_wrap'}“}

我尝试在函数末尾返回false以防止页面重新加载但它仍然无效。请帮助!

1 个答案:

答案 0 :(得分:1)

您应该使用:

<form name="form1" method="post" onSubmit="return myFunction();">

在myFunction中,您没有调用createTable函数。

此外,脚本中的任何错误都将导致提交表单。这是表单的默认行为,纠正它的唯一方法是修复脚本中的任何错误。