Jump to content

Ajax form submission issue


andrew_biggart

Recommended Posts

I am trying to design a simple ajax form so I can learn ajax. I know the php page I have written works so the issue is definitely with the ajax. I think the problem is with the .submit any ideas? At the moment its not reaching the php page.

 

<script type="text/javascript">
$(document).ready(function() {

//when submitting form
$('#addclientform').submit(function() {
	send_form();
});

});
//function to sent the form
function send_form(){

	//get the client name and code	
	var clientname = $('#clientname').val();
	var clientcode = $('#clientcode').val();

	//use ajax to run the check
	$.post("add-client-info.php", { clientname: clientname, clientcode : clientcode },
		function(result){
		//if the result is 1
		if(result == 1){
			//show that the username is available
			$('#addclient').html('<h1 class="success">' +clientname + ' has been added to the list.</h1>');
		}
		else if(result == 2){
			//show that the username is NOT available
			$('#addclient').html('<h1 class="fail">Please make sure you add both a client name and a client code.</h1>');
		}
		else if(result == 3){
			//show that the username is NOT available
			$('#addclient').html('<h1 class="fail">' +clientname + ' has not been added to the list.</h1>');
		}
	});
}   
</script>

 

 

The form

 

            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="addclientform">
            	<input type="submit" name="addclientbtn" id="addclientbtn" class="addclientbtn" value="Add Client" />
            	<div id="client-code-wrap"> 
                    <div id="client-code"><input type='text' id='clientcode' name='clientcode' class="client-input" value="Client Code" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" /></div>
                    <div id='client-code-result'></div>
                </div>
                <div id="client-name-wrap">
                    <div id="client-name"><input type='text' id='clientname' name='clientname' class="client-input" value="Client Name" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" /></div>
                    <div id='client-name-result'></div>
            	</div>
            </form>

Link to comment
https://forums.phpfreaks.com/topic/240112-ajax-form-submission-issue/
Share on other sites

After adding an alert instead of a function to "    $('#addclientform').submit(function() {  " I have realised that this is not the issue. So my next guess is that the problem lys within the post data function but I can't seem to figure it out. Anyone?

 

I have tried your solution of passing strung data and I'm still not getting any error messages, doesn't save the data in the database. The form is definitely submitting but nothing is being return. Any other ideas? Yes my .php file is in the same directory.

To make sure at the function is actually being called upon submitting, I would simply have an alert() inside of your send_form() function and nothing more. Then once you are sure that the function is being triggered upon the form being submitted, you can be sure that something in the function is faulty and cam troubleshoot from there

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.