Calling multiple functions on same page with javascript

Question

I am trying to call two functions with the same form submit function. But instead I am getting a very lengthy error.

<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>

The JavaScript I use is this:

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);
}

The error I am getting is this:

{"error": "Shell form does not validate{'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'}"}

I tried returning false at the end of the function to prevent the page from reloading but it still doesn't work. Please Help!

I thought the form has to encapsulate all the elements .I am a newbie to html and javascript so i m not really sure . This is the link to my jsfiddle : jsfiddle.net/rasikaceg/W3xkL/1 — Rasika Vijay
– Rasika Vijay, Commented Nov 12, 2013 at 0:25

user2417483 · Accepted Answer · 2013-11-12 00:24:22Z

1

You should be using:

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

In myFunction you are not calling the createTable function.

Also, any errors within the script will cause the form to be submitted. This is the default behavior for forms and the only way to correct it is to fix any errors within the script.

answered Nov 12, 2013 at 0:24

user2417483

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling multiple functions on same page with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related