Ajax jquery php post beginner - php

Question

I am have a hard time learning how to use ajax and jquery to post a button without reloading the page. Specificly: The form is still reloading the page and no variables are being updated.
Here is the code I am stumbling through.
What I used before I tried Jquery/AJAX. Just php
// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php
if (isset($_POST['selected_dir']))
{
// last selected folder/directory
$current_dir = $_POST['selected_dir'];
// current_dir is the folder we are looking inside of.
// we make it a $session so that if we click a different submit (RELOAD)
// within the page it will remember $current_dir;
$_SESSION['selected_dir'] = $current_dir; //
}
else // if $_post isint set but $_session is
if (isset($_SESSION['selected_dir']))
{
$current_dir = $_SESSION['selected_dir'];
}
else
{
// default folder/directory
$current_dir = "$root"; //'D:\Hosting\538\html';
}
<form action='explore.php' method='post'>
<input type='image'
src='$folder_icon'
alt='Submit'
name=''
value='submit'/>
<input type='hidden'
value='$f_path/$value'
name='selected_dir'/>
<input type='submit'
value='$value'
name='$value'
class='submit_into_link'/>
</form>
so that worked great except everytime you click the image or the link the page reloads.
I finally came to the conclusion i need to use jquery and ajax and I never even used javascript up till now. Ive been reading through tutorials and i cant really connect the dots to make this work
I have this in my header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
I have this at the top of my page within the body
$.ajax
({
type: 'POST',
url: 'explore_be.php',
data: data, success:
success function(data, textStatus, jqXHR),
complete: function(),
dataType: dataType
});
I have a few questions about the code above. I'm not sure how to use it.
Do I need to put this ajax code inside an onclick function? seems like some examples ive looked through in jquery use something like this..
$(document).ready(function()
{
$(".flip").click(function() // this is a piece of code i got from w3schools.com
});
.flip above is a class. I have seen them use button when talking about
<button>
but what about a button within a form with a specific input id? Or should i just add to the form input
onclick="clicked()" then put the ajax in that function? Does the ajax need be in the $(document).ready(function()) as well?
What should i put for datatype?
I put my php code in the explore_be.php file.
explore_be.php
// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php
if (isset($_POST['selected_dir']))
{
// last selected folder/directory
$current_dir = $_POST['selected_dir'];
// current_dir is the folder we are looking inside of.
// we make it a $session so that if we click a different submit (RELOAD)
// within the page it will remember $current_dir;
$_SESSION['selected_dir'] = $current_dir; //
}
else // if $_post isint set but $_session is
if (isset($_SESSION['selected_dir']))
{
$current_dir = $_SESSION['selected_dir'];
}
else
{
// default folder/directory
$current_dir = "$root"; //'D:\Hosting\538\html';
}
Is that all there is to the code behind page?
I changed my forms to have no action but added an onclick They are still reloading the page. What do I need to do to the form inputs to stop that?
My new form looks like this
<form action='' method='post'>
<input type='image'
src='$folder_icon'
alt='Submit'
name=''
onclick='clickity()'
value='submit'/>
<input type='hidden'
value='$f_path/$value'
name='selected_dir'/>
<input type='submit'
value='$value'
name='$value'
onclick='clickity()'
class='submit_into_link'/>
</form>
Any help is greatly appreciated.

Answer 1

you can do it like this:
html
<form action='explore.php' method='post' id='myForm'>
jquery
$('#myForm').submit(function(event){ //added event
event.preventDefault(); //added to prevent submit
$.ajax
({
type: 'POST',
url: 'explore_be.php',
data: data, success:
success function(data, textStatus, jqXHR),
complete: function(),
dataType: dataType
});
});
edit: remove the onclick events you added in your edit

Answer 2

<form action='javascript:;' method='post'>
<input type='image'
src='$folder_icon'
alt='Submit'
name=''
onclick='clickity();'/>
<input type='hidden'
value='$f_path/$value'
name='selected_dir'/>
<input type='submit'
value='$value'
name='$value'
onclick='clickity();'
class='submit_into_link'/>
</form>
Firstly change this and tell me if it's ok and also tell me why you need 2 submits on the same form?

Answer 3

You are trying three things at a time. which will make things complex to find where the error lies. Just use ajax without jquery with a small example. Then extend it.
<html>
<head>
<script type="text/javascript">
function getdata(str)
{
if (str.length==0)
{
document.getElementById("result").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","response.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<input type='submit' onclick='getdata(input)'>
<div id='result'>
</div>
<body>