Call javascript function on this ASP.net webform on a button click?

Question

How do I call this javascript function on this ASP.net webform on a button click? I added the .js file in the application but for some reason the button is not being able to refer to the .js file. I am getting a Javascript runtime error saying: divName is undefined. What am I doing wrong? Any kind of help would be appreciated. Thanks!

Javascript code (The file is check.js):

    var counter = 1;
    var limit = 20;

function addInput(divName) {

    if (counter == limit) {
        alert("You have reached the limit of adding " + counter + " inputs");
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML =
            "Dimension Type " +
            "<br><input type='text' name='myInputs[]'>" + "Dimension " +
            "<br><input type='text' name='myInputs[]'>";

        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
  return true;
}

The ASP.Net button code:

          <p class="auto-style9">

        <script src="check.js" type="text/javascript"></script>

        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" OnClientClick="return addInput(divName);" />


    </p>
    <p class="auto-style9">

Peter B · Accepted Answer · 2018-03-23 14:44:57Z

2

You should specify just the function call, without the javascript: prefix:

OnClientClick="addInput(divNAME);"

Also some things that may need your attention:

There must exist a global javascript variable divNAME with a proper value, because it is used in the above js call.
You define a local variable counter inside function addInput(...), but this variable goes out of scope and loses its value every time the function ends. In order to make it keep its value, you need to declare it outside of function addInput(...). You can then increase its value, etc, inside the js function.

answered Mar 23, 2018 at 14:44

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

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

3 Comments

techindustry Over a year ago

Thanks for your answer, Peter! What can be the value of divName? I moved the var counter = 1; var limit = 20; above function and changed the OnClient but still the button is not working.

Peter B Over a year ago

It's the ID of a <div> on your page where you want the new elements to be created, that is totally up to you.

techindustry Over a year ago

How do you change the value of div? It's my first Javascript code and I'm really confused. Also, why are the fields not being generated when I click the button? Appreciated!

ElasticCode · Accepted Answer · 2018-03-23 19:07:48Z

0

Update your JS function to return true or false to prevent postback and change OnClientClick as below

OnClientClick="return addInput('divDimensions');"

Update HTML on ASPX page as below.

<script src="check.js" type="text/javascript"></script>
<div id="divDimensions"></div>
<p class="auto-style9">
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" OnClientClick="return addInput('divDimensions');" />
</p>

To follow the current webform format update else condition in JS as below

var table = document.getElementById("tableChecksheet");
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.className = "auto-style3"
var cell2 = row.insertCell(1);
cell1.innerHTML = "<h2>Dimension Type</h2>";
cell2.innerHTML = "<br><input id='txtDimensionType" + counter + "' type='text' name='myInputs[]' style='width: 500px;'>";

var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.className = "auto-style3"
var cell2 = row.insertCell(1);
cell1.innerHTML = "<h2>Dimension</h2>";
cell2.innerHTML = "<br><input type='text' id='txtDimension" + counter + "'name='myInputs[]' style='width: 500px;'>";

counter++;

And in HTML give your main table an id tableChecksheet as below

<table align="center" class="auto-style2" id="tableChecksheet">

edited Mar 23, 2018 at 19:07

answered Mar 23, 2018 at 16:04

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

11 Comments

techindustry Over a year ago

I updated the code as you said but the fields are not being generated as I click the button. For the updated version of my code, please see above on my original code. What am I doing wrong? Do I need a script line like the one in html: <script src="check.js" language="Javascript" type="text/javascript"></script>? If yes, then how will the script be in asp.net. I don't think I can use a HTML button.

ElasticCode Over a year ago

Sure you need to reference your script file and you can do like HTML as you mention

techindustry Over a year ago

So I referenced the script but it's still not working. I'm totally confused. It's giving me the following error: JavaScript runtime error: Unable to get property 'appendChild' of undefined or null reference.

ElasticCode Over a year ago

can you update the question with full HTML of ASPX page

techindustry Over a year ago

It worked! Thank you so much! Is there any way I can transfer the values entered in these generated fields to a SQL server?

|

Collectives™ on Stack Overflow

Call javascript function on this ASP.net webform on a button click?

2 Answers 2

3 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related