无法通过从html页面asp.net调用来加载Javascript Ajax函数

Question

I try to call to javascript function from my asp page, but the call does'nt do anything. this is my code:

   <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"  
   AutoEventWireup="true" CodeFile="addAdmin.aspx.cs" Inherits="addAdmin" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
    function addAdmin() {
        var auname = document.getElementById("uname")[0].value;
        var apass = document.getElementById("pass")[0].value;
        $.ajax({
            url: "http://localhost:53236/Handler.ashx?cmd=addAdmin&auname="+ auname + "&apass=" + apass,
            async: true,
            dataType: "html",
            success: function (response) {
                $("#status").html(" <strong>One of the fields are empty..</strong> Please fill it and try again later.");

            }
        } );
    }
</script>
 </asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>In order to add an admin for the site, fill out the form below</h1>
<br />    <section  class="status"><div id="status" ></div></section><br />
<br />
Admin Username:<input type="text" id="uname" /><br />
Admin Password:<input type="text" id="pass" /><br />
<button type="submit" onclick="javascript:addAdmin();">Submit</button><br />
</asp:Content>

The function in the handler is working well (I tried to send the parameters manually and it workes fine) But I just can't call my function.

I tried a lot of diffrent ways to call my function like: <a href="javascript:addAdmin" >click her </a> and calling from update panel that using the following code in the server while clicking on asp button Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "addShoe()", true);

The Content1 from the master page is just in the head tag. So I don't know what is the problem and why I can't call my function

Answer 1

First of all, do not use button[type="submit"] to make AJAX requests. With the submit button you need to listen also submit event of the form and to prevent it's default behavior. Sometimes it is a little bit confusing

Try to use <a> tag and prevent it's default behavior like this

<script type="text/javascript">
    function addAdmin(event) {

        event.preventDefault();

        var auname = document.getElementById("uname")[0].value;
        var apass = document.getElementById("pass")[0].value;
        $.ajax({
            url: "http://localhost:53236/Handler.ashx?cmd=addAdmin&auname="+ auname + "&apass=" + apass,
            async: true,
            dataType: "html",
            success: function (response) {
                $("#status").html(" <strong>One of the fields are empty..</strong> Please fill it and try again later.");

            }
        } );
    }
</script>

and in the HTML instead of <button> :

<a href="#" onclick="addAdmin(event);">Submit</a>