Add data into database using ajax

Question

I have a page with 3 input fields. Pressing the submit button is supposed to submit the contents of those fields to a database, where it will be added, after checking that the password matches. Javascript as follows:

        var ajReq = new XMLHttpRequest();

    $(document).ready(function () {
        $('#btnRegister').on('click', function () {
            if ($('#pass1').val() != $('#pass2').val()) {
                alert('confirm your password');
                return false;
            } else {
                $.ajax({
                    type: "POST",
                    url: "../Services/Page.asmx/Add",
                    data: JSON.stringify({ name: $('#name').val(), secondname: $('#secondname').val(), Password: $('#pass1').val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert("Added");
                    }
                });
            }
        });
    });
        [WebMethod]
    public void Add(string name, string secondname, string password)
    {

        try
        {
            util.Add(name, secondname, password);
        }
        catch ()
        {
        }
    }

I'm finding, though, that when I run the page and hit submit, nothing happens. Can anyone tell me what I'm doing wrong?

Also, after the url, I have something like ../../service.... - what do those two dots follow by slash and followed by two dots mean?
this is how i am calling name input field:

            <input id="name" type="text" class="form-control" required="" />

could be returning an error and not a success in the ajax call? — eric
– eric, Commented Dec 30, 2013 at 20:58
.. references the parent directory of the current page's location. ../../ references the grand-parent directory, two levels up. — nbrooks
– nbrooks, Commented Dec 30, 2013 at 20:58
@mayabelle Take a look at the original phrasing of the question; your edit is invalid because it alters the OP's original meaning. — nbrooks
– nbrooks, Commented Dec 30, 2013 at 21:07
You're right, I missed that the OP was asking about the dots; I edited the question as part of a review of a previous edit and initially it looked like the edit added the question about the dots, but it turns out the OP did ask about them also. — mayabelle
– mayabelle, Commented Dec 30, 2013 at 21:10

gcochard · Accepted Answer · 2013-12-31 15:42:02Z

1

Use

$('#btnRegister').on('click', function (e) {
    e.preventDefault();
    if ($('#pass1').val() != $('#pass2').val())
    {
        alert('confirm your password');
    }
    else
    {
        $.ajax({
            type: "POST",
            url: "../../Services/Page.asmx/Add",
            data: JSON.stringify({
                name: $('#name').val(),
                secondname: $('#secondname').val(),
                Password: $('#pass1').val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert("Added");
            }
        });
    }
});

to prevent default form's submission to the server. The return false; is misplaced also and is useless there. That way you can run all your frontend validation before the data are sent to the server for further processing and ../../somefile is two folders up from the folder that this script runs. This is the structure of my folders:

Project-> 
    Login-> 
      -Login.aspx -- this is where my ajax script is located 
    Services -> 
      -Page.asmx -- this is where my add method is located 
    App_Start -- other folders  
    Image -- other folders 
    Script -- other folder.

edited Dec 31, 2013 at 15:42

gcochard

11.9k1 gold badge28 silver badges41 bronze badges

answered Dec 30, 2013 at 21:01

Marios Fakiolas

1,5451 gold badge12 silver badges19 bronze badges

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

6 Comments

Marios Fakiolas Over a year ago

If i make a call from a file which resides in a folder named "a" to a service from a folder named "b" there are some options. If "a" and "b" are siblings then i call ../b/service. If folder "b" is child of folder "a" then i call b/service. If folder "b" is outside the folder named "c" which is parent of folder "a" and folder "b" is also sibling with folder "c" then i call ../../b/service

user2993752 Over a year ago

why do i get an error saying: Invalidwebservicecall,missingvalueforparameter:\u0027name\u0027.",". i have updated my question that shows my input field. plus name is a label so is it val() or label()?

Marios Fakiolas Over a year ago

With that input you should use $('#tbName').val() to retrieve its value. That error indicates that name value is missing so use this and give it a try.

user2993752 Over a year ago

yes that is what i have used name: $('#name').val(), still i am experiencing that error. i am getting error of 500. i have updated my code showing web method

Marios Fakiolas Over a year ago

500 you mean as your XHR response. This means your destination file (your service here) is not found. Check really carefully the path to it relating to the script that this ajax call runs. I ve written above some guides. Can you create a folder tree with your project structure or sth?

|

Collectives™ on Stack Overflow

Add data into database using ajax

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related