Form in php with jquery actions simultaneously

Question

I have a form which when the button send is clicked, jquery actions should be executed and the data inputted in the form should be send to a database in php. i wrote the following html, php, and javascript files but when i click send, i only see the jquery actions executed and the data is not sent to the database and i don't see anything that tells me that the php file is running so here are the files, i think the problem would come mostly from the php file itself but here are the three files:

$(document).ready(function () {
	$('#2').hide();
	$('#3').hide();
	$('#4').hide();
	$('#5').hide();
	$('#6').hide();
	$('#7').hide();
	$('#8').hide();
	$('#9').hide();
	    $('.emailpassword').click(function(){
    	$('#1').remove();
    	$('#2').show();
    	$('#3').hide();
    	$('.progress-bar').css({'width':'25%','background-color':'#f27011'});
    });
    $('#tags').click(function(){
    	$('#1').hide();
    	$('#2').hide();
    	$('#3').show();
    });
    $('.add').click(function() {
    	if ($('#1').length==0) {
		    $('#3').hide();
		    $('#2').hide();
		    $('#4').show();
		    setTimeout(function(){
		    	$('#4').hide();
		    	$('#5').show();
		    	$('.progress-bar').css({'width':'50%','background-color':'#f2b01e'});
		    },5000);
		    setTimeout(function(){
		    	$('#5').hide();
		    	$('#6').show();
		    	$('.progress-bar').css({'width':'75%','background-color':'#f2d31b'});
		    },9000); 
		    setTimeout(function(){
		   		$('#6').hide();
		   		$('#7').show();
		   	},13000); 
		   	setTimeout(function(){
	    		$('#7').hide();
	    		$('#8').show();
		    },17000); 
		    setTimeout(function(){
		    	$('#8').hide();
		    	$('#9').show();
		    	$('.progress-bar').css({'width':'100%','background-color':'#86e01e'});
		    },21000); 
		};

	});
});

<!DOCTYPE html>
<html>
<head>
	<title>Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>   
<script type="text/javascript" src="javascript44.js"></script>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
<style type="text/css">
@font-face {
  font-family: 'Coda';
  font-style: normal;
  font-weight: 400;
  src: local('Coda'), local('Coda-Regular'), url(http://fonts.gstatic.com/s/coda/v11/oLj2Snaoi65TK4xobg2LWRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Coda';
  font-style: normal;
  font-weight: 400;
  src: local('Coda'), local('Coda-Regular'), url(http://fonts.gstatic.com/s/coda/v11/lAc2voHjo6apblwiEW49vfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.enjoy-css {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 6px 20px;
  border: none;
  -webkit-border-radius: 32px / 54px;
  border-radius: 32px / 54px;
  font: normal 18px/normal "Coda", Helvetica, sans-serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(252,252,252,1);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.enjoy-css:hover {
  background: rgba(232,249,255,1);
  -webkit-box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset;
  box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset;
}
.enjoy-css:focus {
  background: rgba(255,253,232,1);
}
.button {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal medium/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0199d9;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.button:hover {
  border: 1px solid #007cad;
  background: rgba(0,142,198,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.button:active {
  border: 1px solid #018dc4;
  background: #00a6e8;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset;
  text-shadow: none;
  -webkit-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
}
p{
	text-align: center;
}
</style>
</head>
<body>
<form action="form-process.php" method="POST" name="send-question">
<input name="email" class="enjoy-css emailpassword afters" style="outline: none;" placeholder="random input 1" />
<input name="name" type="password" class="enjoy-css emailpassword afters" style="outline: none; margin-top:15px;" placeholder="random input 2" />
<input name="number" class="enjoy-css afters" id="tags" style="outline: none;margin-top:15px;" placeholder="random input 3" />
<input name="submit" type="button" class="button add" style="margin-left:10px;outline:none;"value="button" />

</form>

<div class="messagewidth" style="background-color: gray; width: 43%; margin: 0 auto;border-radius: 25px; height: 22px;">
        <p id="1" class="font" style="font-family: 'Coda';">random message 1...</p>
        <p id="2" class="font" style="font-family: 'Coda';">random message 2...</p>
        <p id="3" class="font" style="font-family: 'Coda';">random message 3...</p>
        <p id="4" class="font" style="font-family: 'Coda';">auto message 1...</p>
        <p id="5" class="font" style="font-family: 'Coda';">auto message 2...</p>
        <p id="6" class="font" style="font-family: 'Coda';">auto message 3...</p>
        <p id="7" class="font" style="font-family: 'Coda';">auto message 4...</p>
        <p id="8" class="font" style="font-family: 'Coda';">auto message 5...</p>
        <p id="9" class="font" style="font-family: 'Coda';">auto message 6...</p>
</div>
</body>
</html>

and the php files:(Can't be put into the snippet)

<?php
if ( ! empty( $_POST ) ) {
$mysqli = new mysqli( 'localhost', 'user-username', 'user-password', 'database-name' );
if ( $mysqli->connect_error ) {
    die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
}
$sql = "INSERT INTO tablename ( email, name, number ) VALUES ( '{$mysqli->real_escape_string($_POST['email'])}', '{$mysqli->real_escape_string($_POST['name'])}', '{$mysqli->real_escape_string($_POST['number'])}' )";
$insert = $mysqli->query($sql);

$mysqli->close();

};


?>

If the problem can't be solved from a quick glance, I could set up the database and upload the files on a free hosting account and leave the details of the account here.

You have nothing showing to submit the form data. If you don't want page to refresh when form is submitted you will need to use AJAX to send the data. There are lots of tutorials around on how to submit forms with ajax. Also your php isn't set up to return a response — charlietfl
– charlietfl, Commented Apr 3, 2016 at 15:27
I will need to use AJAX in order to not redirect to the php file but i can't get the php file to work and insert into database to proceed with using AJAX.. — Jake A
– Jake A, Commented Apr 3, 2016 at 16:58
I didn't add the ajax code, now it worked. i followed the answer given on this stackoverflow thread : stackoverflow.com/questions/15308017/… it is the first answer ( I added the ajax code to my html and linked it to an insert.php file and i changed the ids and names in the ajax code to correspond to my html code of course.) — Jake A
– Jake A, Commented Apr 3, 2016 at 20:17
Well it took me around 1 hour searching and trying and i finally solved it. — Jake A
– Jake A, Commented Apr 3, 2016 at 20:18

Alex F. · Accepted Answer · 2016-04-03 15:48:38Z

0

Actualy you should somehow track the http-requests sent by your script (POST-request in your case), use some debugger for this purpose (firebug for Mozilla browser should do). And if you don't see any POST-requests sent by your page, then try sending it manually by $("form[name='send-question']").submit(); Now you should recieve http-response from your server and be able to analize it's content.

answered Apr 3, 2016 at 15:48

Alex F.

112 bronze badges

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

1 Comment

Jake A Over a year ago

It didn't send any post request.

Collectives™ on Stack Overflow

Form in php with jquery actions simultaneously

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related