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
tonelm54Asked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
You need to call the post function on the jQuery object:

$.post("_userEdit-Save.php", frmData, function(data) { $('#modal_body').html(data); });
0
 
tonelm54Author Commented:
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
0
 
Chris StanyonCommented:
I take it you're including the jQuery form plugin in your page!

http://jquery.malsup.com/form/
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
tonelm54Author Commented:
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

0
 
Chris StanyonCommented:
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

0
 
Chris StanyonCommented:
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) { }
0
 
tonelm54Author Commented:
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 :-(
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.