asked on

Another jQuery issue

Sorry, but Im really stuck trying to finish a web page.

Ive got a simple form:-

<div id="contentBody">
    <form id="frmSaveUser" action="_userEdit-Save.php" method="POST">
        Username: <input type="text" name="user" value="" /><br/>
        <input type="submit" value="Save" />
    </form> 
</div>

Open in new window

And then some code to change the contents of the div to say saving, and then to put the response of the form in:-

<script type="text/javascript">
    $(document).ready(function() {
        $('#frmSaveUser').ajaxForm(function() {
            beforeSubmit: function() {
                $('#contentBody').html('Saving Results...');
            },
            success: function(data) {
                $('#contentBody').html(data);
            }
        });
    });
</script>

Open in new window

However my code never seems to run, instead the form just runs as normal.

Im working on completing this page tonight, stuck and really would appriciate some assistance with this again.

Thank you

tonelm54

ASKER

Ok, reading more I understand that I cannot use ajaxForm without putting in another plugin.

So I have redone my code to do a similar thing:-

<script type="text/javascript">
    $(document).ready(function() {
        $('#frmSave').click(function() {
            var frmData = $("#emailForm").serialize();
        
            $('#modal_body').html("Submitting");        
            $('#frmSaveUser').post("_userEdit-Save.php", frmData, 
                function(data) { 
                    $('#modal_body').html(data);
                });  
           });
        });
</script>

Open in new window

The page _userEdit-Save.php just returns OK, so I would have thought it would put OK into #modal_body but it doesnt seem to run.

Does anyone know what I can do?

Thank you

Chris Stanyon

I take it you're including the jQuery form plugin in your page!

http://jquery.malsup.com/form/

tonelm54

ASKER

Good evening,
I wasn't but dont want to include another plugin, so thought Id do it myself.

My current code is:-

    <form id="frmSaveUser">
        Username: <input type="text" id="user" name="user" value="username" /><br/>
        <div id="frmSave">Save</div>
    </form> 

<script type="text/javascript">
    $(document).ready(function() {
        $('#frmSave').click(function() {
            var frmData = $("#frmSaveUser").serialize();
        
            $('#modal_body').html("Submitting");        
            $('#frmSaveUser').post("_userEdit-Save.php", frmData, 
                function(data) { 
                    $('#modal_body').html(data);
                });  
           });
        });
</script>

Open in new window

Chris Stanyon

Something like this:

$('#frmSaveUser').submit(function() {
    $('#modal_body').html("Submitting");
    $.ajax({
		type: "POST",
		url: $(this).attr('action'),
		data: $("#frmSave").serialize(),
		dataType: "text",
		success: function (data) {
			$('#modal_body').html(data);
		}
    });
});

Open in new window

Chris Stanyon

The code I psoted assumes you are submitting your form by clicking on a submit button (as in your first post) but your second post indicates you are wanting to post the form when you click a DIV!

Also, you call the post() function on the jQuery object, as in:

$.post(url, data, function(data) { }

tonelm54

ASKER

Ok, so looking at your code, Ive done the following:-

   $(document).ready(function() {
        $('#frmSave').click(function() {
            var frmData = $("#frmSaveUser").serialize();
        
            $('#frmSaveUser').post("_userEdit-Save.php", frmData, function(data) { $('#modal_body').html(data); });
        });

Open in new window

But still nothing :-(

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial