Insert jQuery UI Dialog Modal Form data into mySQL

Question

I'm using the jQuery UI Dialog for the registration of new users on my website. The dialog works fine. However, when I submit the form the AJAX call isn't doing anything. I've searched the web for a while but I can't find a working solution. This is my code at the moment:

var username=$("#username").val();
var password=$("#password").val();
var checkpassword=$("#checkpassword").val();
var email=$("#email").val();
var user_level=$("#user_level").val();
var date_created=$("#date_created").val();

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 500,
    width: 600,
    modal: true,
    buttons: {
        "Registreren": function() {
            var bValid = true;
            allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( username, "username", 3, 16 );
                bValid = bValid && checkLength( email, "email", 6, 80 );
                bValid = bValid && checkLength( password, "password", 4, 16 );
                bValid = bValid && checkLength( checkpassword, "checkpassword", 4, 16 );
                bValid = bValid && checkLength( user_level, "user_level", 0, 2 );
                bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "error" );
                bValid = bValid && checkRegexp( email, "error");
                bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "error" );
                bValid = bValid && checkRegexp( checkpassword, /^([0-9a-zA-Z])+$/, "error" );

            if ( bValid ) {
                $.post({
                url: 'register.php',
                data: 
                        {  
                            username: username,
                            password: password,
                            checkpassword: checkpassword,
                            email: email,
                            user_level: user_level,
                            date_created: date_created
                        }//end data
                })//end AJAX post
           }//End if
        }//End function
    }//end buttons
});//end dialog

My form is just a simple HTML input form with the specified ID's

Ex input username:

<form name="registeracc" id="registeracc" action="register.php" method="post">
<input required type="text" id="username" name="username" class="text ui-widget-content ui-corner-all" />
</form>

I've found several "fixes" for this problem on the web, but they dont seem to work for me.

Ex:

data: $('#registeracc :input').serialize(),
error: function(xml, status, error) {
$('#registeracc').html('<p>???</p>');

data: $('#registeracc').serialize(), will serialize the form into name|value pairs. The returned string needs to be used in the right way but I can't see enough of your code to advise. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Jan 7, 2013 at 12:54
Have you verified if the button click code is even getting called? After you verify that, watch the ajax request in Firebug or Chrome dev tools to see what/what isn't being posted. — MrCode
– MrCode, Commented Jan 7, 2013 at 14:18
It got stuck on some validation lines, after removing them it didn't call anything — Resitive
– Resitive, Commented Jan 7, 2013 at 14:30
Take out the if ( bValid ) { and see if that changes anything. Also check your error console. — MrCode
– MrCode, Commented Jan 7, 2013 at 15:43
Thanks, this didn't solve my original problem but it solved something else that was bugging me ;) — Resitive
– Resitive, Commented Jan 7, 2013 at 15:47

vascowhite · Accepted Answer · 2013-01-07 14:30:22Z

2

I'm not sure, but according to jQuery API Reference try

$.post(
    'register.php',
    {  
        username: username,
        password: password,
        checkpassword: checkpassword,
        email: email,
        user_level: user_level,
        date_created: date_created
    }//end data
)//end AJAX post

edited Jan 7, 2013 at 14:30

vascowhite

18.5k9 gold badges64 silver badges79 bronze badges

answered Jan 7, 2013 at 12:35

Finwood

3,9911 gold badge23 silver badges39 bronze badges

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

1 Comment

MrCode Over a year ago

+1 although this doesn't answer the question, it still fixes a problem that you would run into later. To elaborate on this answer: OPs .post() syntax is wrong, it takes a list of arguments instead of an object with properties (unlike $.ajax).

Resitive · Accepted Answer · 2013-01-09 14:13:57Z

1

Found the answer which solved my problem:

$.post({
url: 'register.php',
data: 
{  
   username: username,
   password: password,
   checkpassword: checkpassword,
   email: email,
   user_level: user_level,
   date_created: date_created
}

Should be:

$.post("register.php", $("#registeracc").serialize());

answered Jan 9, 2013 at 14:13

Resitive

3701 gold badge6 silver badges24 bronze badges

Collectives™ on Stack Overflow

Insert jQuery UI Dialog Modal Form data into mySQL

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related