Calling functions in HTML forms

Question

Having significant problems making a simple link between a form's buttons and javaScript functions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examples of Strings</title>

<script type="text/javascript">
//<![CDATA[
// declarations
//]]>
</script>
</head>
<body>
<h1>Basic Calculator</h1>

<form action="form_action.asp" method="get">
  First Variable: <input type="text" name="tb1" /><br />
  Second Variable: <input type="text" name="tb2" /><br />
  Result: <input type="text" name="result" /><br />
  <input type="button" name="b1" value="Submit" onclick="myAdd()" /><br />
</form>

<script type="text/javascript">
//<![CDATA[



<asp:Button id="b1" runat="server" OnClick="documment.myAdd()"></asp:Button>



function myAdd(tb1, tb2){

    var result = tb1 + tb2;
    alert(result);
    return result;
}




//]]>
</script>
</body>
</html>

Button (b1) should return the values at tb1 and tb2. Note: ultimately it should represent the value at tb3, but for the purposes of debugging tb3 is doing nothing at the moment.

alex · Accepted Answer · 2011-02-21 11:51:16Z

1

In a browser environment, window is the global object, not document.

You can also omit it, and the scope is automatically resolved to window.

Also, you aren't passing the arguments to your function. You should just give them an id attribute and reference that using document.getElementById().

Something like this should do it (provided you add the id attribute as per code)...

window.onload = function() {

    document.getElementById('my-form').onsubmit = function() {

        document.getElementById('result').value = parseInt(document.getElementById('tb1').value, 10) + parseInt(document.getElementById('tb1').value, 10);

        return false;
    };

};

edited Feb 21, 2011 at 11:51

answered Feb 21, 2011 at 11:11

alex

492k205 gold badges891 silver badges992 bronze badges

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

1 Comment

DW. Over a year ago

Thanks. Would there be any chance you might expand both aspects of what you just said (both in relation to the document and the getter)?

Collectives™ on Stack Overflow

Calling functions in HTML forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related