Ajax form submission issue

[andrew_biggart]

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>

[andrew_biggart]

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?

 

[fugix]

Your submit function looks straightfoward. Have you tried troubleshooting your send_form function.

Also, something I noticed is you are using $_SERVER['PHP_SELF'] as your form action. This should be avoided due to CSS vulnerability. Read here for elaboration.

[andrew_biggart]

Thanks for the information about PHP_SELF vulnerability, didn't realize. How would I go about troubleshooting the send_form function? What do you recommend?

[fugix]

Instead of passi variables. Try passing simple strung data to the server.

		$.post("add-client-info.php", { clientname: "clientname", clientcode : "test" }
		function(result){

Also, is your add-client-info.php in the sane dir as your executing script?

[andrew_biggart]

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.

[fugix]

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