Ajax form submit

Vernier · 03-14-2012, 05:15 PM

Hey,

when my page loads, I need a page to load on the page, like an iframe (except iframes seem to take forever to load, and most of the time don't). So I tried ajax. I've got the form to appear on the page but when I lcick submit, it just refreshes the page.

My codes are as follows:

Index.html: http://codeviewer.org/view/code:23f6

Requests.php: http://codeviewer.org/view/code:23f7

How can I submit the form without the page just refreshing, but actually submitting the form?

Thanks

~ David

DanInMa · 03-14-2012, 06:00 PM

ok first off, you are already loading the jquery framework so you dont need that old script you added to load pages using ajax.

then you can replace :

Code:

ajaxpage('/staffpanel/_frontend/requests.php', 'request')

with:

Code:

$("#request").load('/staffpanel/_frontend/requests.php')

even then, you are still loading an entire webpage into another one. PHP has a way to response with everything in the body element of a page if being requested by ajax, but I dont knwo how to do it.

then , also, you would need to include the css from requests.php. best way is using an external css file

after all that is handled,

here is an example of what you are looking for:

Code:

$(function () {
    $("#idofrequestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#responseForm').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });

you would put that right after the .load code

Vernier · 03-14-2012, 06:13 PM

Quote:

Originally Posted by DanInMa

ok first off, you are already loading the jquery framework so you dont need that old script you added to load pages using ajax.

then you can replace :

Code:

ajaxpage('/staffpanel/_frontend/requests.php', 'request')

with:

Code:

$("#request").load('/staffpanel/_frontend/requests.php')

even then, you are still loading an entire webpage into another one. PHP has a way to response with everything in the body element of a page if being requested by ajax, but I dont knwo how to do it.

then , also, you would need to include the css from requests.php. best way is using an external css file

after all that is handled,

here is an example of what you are looking for:

Code:

$(function () {
    $("#idofrequestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#responseForm').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });

you would put that right after the .load code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Real FM</title> 
	<link href="_css/style.css" type="text/css" rel="stylesheet" media="all" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript">
$("#request").load('/staffpanel/_frontend/requests.php')
$("#dj-says").load('/staffpanel/_frontend/djSays.php')
</script>
</head> 
<body> 

<div id="wrapper">

<div style="style=position:absolute;
left:220px;
top:-5px;" id="dj-says">
DJ Says:
</div>
<div id="banner"></div>

<div id="content-top">
<div id="blue-header">Welcome to Real-FM.net
</div></div>
<div id="content-middle"> 
  <p>Hello! Welcome to <a href="http://www.real-fm.net" rel="noAJAX"><strong>real-fm.net</strong></a><strong></strong>!<br /><br />
    
    We are still developing a homepage but untill then we will have this page, also known as the &quot;Player&quot;. We do however have a forum which is free to register to, You can simply visit the forum by clicking <a href="http://www.real-fm.net/forum"><strong>here</strong></a>.<br />
    <br />
    
    On air now is <strong><span id="cc_stream_info_title">No DJ</span><br />
  </strong><br />
    The current song is <strong><span id="cc_stream_info_song">Loading...</span><br /></strong></p>
  <p><script type="text/javascript" src="http://fast.zfast.co.uk/?port=8110"></script><br /></p>
  You can also tune in via:<div id="cc_tunein">
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.pls"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-pls.png" border="0" alt="Winamp" title="Winamp" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.asx"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-asx.png" border="0" alt="windows Media Player" title="Windows Media Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.ram"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.qtl"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
</div>

  Below you can send a Request to our DJ's!
  <div id="request">
  </div>
</div>
<div id="content-bottom"></div>

<div id="footer">
Copyright <strong>Real-FM</strong> 2012
<div id="floatright">
Designed &amp; Coded By <strong>Callum Allan</strong></div>
</div>

</div>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/system/streaminfo.js"></script>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/js.php/habfab/streaminfo/rnd0"></script>
</body> 
</html>

It now won't load?

page is: http://www.habfab.com/cally/

~ David

DanInMa · 03-14-2012, 06:18 PM

thast becuase you didnt put it in the same position as before.

youve put it in the head of the document which means, as written, you are trying to manipulate something on the page that doesnt exist until the page is done laoding.

Code:

$("#request").load('/staffpanel/_frontend/requests.php')
$("#dj-says").load('/staffpanel/_frontend/djSays.php')

should be:

Code:

$(document).ready(function(){
$("#request").load('/staffpanel/_frontend/requests.php');
$("#dj-says").load('/staffpanel/_frontend/djSays.php');
});

DanInMa · 03-14-2012, 06:21 PM

oh btw, it may very well be more efficient to use a server side include instead of loading client side after the page has already loaded, but perhaps that doesnt fit your needs for some reason?

also dont forget all of this will break if the user has javascript turned off.

Vernier · 03-14-2012, 06:21 PM

Quote:

Originally Posted by DanInMa

thast becuase you didnt put it in the same position as before.

youve put it in the head of the document which means, as written, you are trying to manipulate something on the page that doesnt exist until the page is done laoding.

Code:

$("#request").load('/staffpanel/_frontend/requests.php')
$("#dj-says").load('/staffpanel/_frontend/djSays.php')

should be:

Code:

$(document).ready(function(){
$("#request").load('/staffpanel/_frontend/requests.php');
$("#dj-says").load('/staffpanel/_frontend/djSays.php');
});

Ah that's loaded, but I still can't submit it, it just refreshes.

~ David

DanInMa · 03-14-2012, 06:24 PM

yup, gotta read the instructions bud

.

ok after that code, ad this:

Code:

$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#requestform').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });

then give your form an id of "requestform" and give it an action to /staffpanel/_frontend/requests.php in case JS is sturned off thatr way it will still work at least ( since you are including dynamically, withotu a proper form action it would try to submit to the main page instead of requests.php).

Vernier · 03-14-2012, 06:32 PM

Quote:

Originally Posted by DanInMa

yup, gotta read the instructions bud

.

ok after that code, ad this:

Code:

$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#requestform').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });

then give your form an id of "requestform" and give it an action to /staffpanel/_frontend/requests.php in case JS is sturned off thatr way it will still work at least ( since you are including dynamically, withotu a proper form action it would try to submit to the main page instead of requests.php).

Hey,

I've got this now as my form:

Code:

<form id="requestform" action="/request.php" method="post">

index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Real FM</title> 
	<link href="_css/style.css" type="text/css" rel="stylesheet" media="all" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#request").load('/staffpanel/_frontend/requests.php');
$("#dj-says").load('/staffpanel/_frontend/djSays.php');
});
</script>
<script type="text/javascript">
$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#responseForm').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });
</script>
</head> 
<body> 

<div id="wrapper">

<div style="style=position:absolute;
left:220px;
top:-5px;" id="dj-says">
DJ Says:
</div>
<div id="banner"></div>

<div id="content-top">
<div id="blue-header">Welcome to Real-FM.net
</div></div>
<div id="content-middle"> 
  <p>Hello! Welcome to <a href="http://www.real-fm.net" rel="noAJAX"><strong>real-fm.net</strong></a><strong></strong>!<br /><br />
    
    We are still developing a homepage but untill then we will have this page, also known as the &quot;Player&quot;. We do however have a forum which is free to register to, You can simply visit the forum by clicking <a href="http://www.real-fm.net/forum"><strong>here</strong></a>.<br />
    <br />
    
    On air now is <strong><span id="cc_stream_info_title">No DJ</span><br />
  </strong><br />
    The current song is <strong><span id="cc_stream_info_song">Loading...</span><br /></strong></p>
  <p><script type="text/javascript" src="http://fast.zfast.co.uk/?port=8110"></script><br /></p>
  You can also tune in via:<div id="cc_tunein">
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.pls"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-pls.png" border="0" alt="Winamp" title="Winamp" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.asx"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-asx.png" border="0" alt="windows Media Player" title="Windows Media Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.ram"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.qtl"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
</div>

  Below you can send a Request to our DJ's!
  <div id="request">
  </div>
</div>
<div id="content-bottom"></div>

<div id="footer">
Copyright <strong>Real-FM</strong> 2012
<div id="floatright">
Designed &amp; Coded By <strong>Callum Allan</strong></div>
</div>

</div>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/system/streaminfo.js"></script>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/js.php/habfab/streaminfo/rnd0"></script>
</body> 
</html>

When I click submit it now takes me to site.com/request.php

~ David

DanInMa · 03-14-2012, 07:31 PM

well you are editing the code I gave you and not including the last piece I jsut posted again, so of course its not going to work.

also why did you do this?!?!?? ( also it doesnt work)

Code:

<script type="text/javascript">
$(function(){
// Configuration
divID = '#request';
loadingHTML = 'Loading Page...';
});
</script>
<script type="text/javascript">
$(function(){

 $(divID).load('/staffpanel/_frontend/requests.php');

});
</script>

Vernier · 03-14-2012, 07:40 PM

I was trying to change it back to iframe as I couldn't get this working,

this is my current code thats uploaded:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Real FM</title> 
	<link href="_css/style.css" type="text/css" rel="stylesheet" media="all" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#request").load('/staffpanel/_frontend/requests.php');
$("#dj-says").load('/staffpanel/_frontend/djSays.php');
});
</script>
<script type="text/javascript">
$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#responseForm').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!")
            }
            return false;
        });
    });
</script>
</head> 
<body> 

<div id="wrapper">

<div style="style=position:absolute;
left:220px;
top:-5px;" id="dj-says">
DJ Says:
</div>
<div id="banner"></div>

<div id="content-top">
<div id="blue-header">Welcome to Real-FM.net
</div></div>
<div id="content-middle"> 
  <p>Hello! Welcome to <a href="http://www.real-fm.net" rel="noAJAX"><strong>real-fm.net</strong></a><strong></strong>!<br /><br />
    
    We are still developing a homepage but untill then we will have this page, also known as the &quot;Player&quot;. We do however have a forum which is free to register to, You can simply visit the forum by clicking <a href="http://www.real-fm.net/forum"><strong>here</strong></a>.<br />
    <br />
    
    On air now is <strong><span id="cc_stream_info_title">No DJ</span><br />
  </strong><br />
    The current song is <strong><span id="cc_stream_info_song">Loading...</span><br /></strong></p>
  <p><script type="text/javascript" src="http://fast.zfast.co.uk/?port=8110"></script><br /></p>
  You can also tune in via:<div id="cc_tunein">
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.pls"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-pls.png" border="0" alt="Winamp" title="Winamp" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.asx"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-asx.png" border="0" alt="windows Media Player" title="Windows Media Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.ram"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.qtl"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
</div>

  Below you can send a Request to our DJ's!
  <div id="request">
  </div>
</div>
<div id="content-bottom"></div>

<div id="footer">
Copyright <strong>Real-FM</strong> 2012
<div id="floatright">
Designed &amp; Coded By <strong>Callum Allan</strong></div>
</div>

</div>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/system/streaminfo.js"></script>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/js.php/habfab/streaminfo/rnd0"></script>
</body> 
</html>

~ David

DanInMa · 03-14-2012, 07:47 PM

i screwed up sorry, syntax problem. I fixed it:

Code:

$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#requestform').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!");
            }
        });
    });
});

Vernier · 03-14-2012, 07:49 PM

Quote:

Originally Posted by DanInMa

i screwed up sorry, syntax problem. I fixed it:

Code:

$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#requestform').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!");
            }
        });
    });
});

Hey, thanks

It still doesn't seem to load

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Real FM</title> 
	<link href="_css/style.css" type="text/css" rel="stylesheet" media="all" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#request").load('/staffpanel/_frontend/requests.php');
$("#dj-says").load('/staffpanel/_frontend/djSays.php');
});
</script>
<script type="text/javascript">
$(function () {
    $("#requestform").live("submit", function (e) {
        e.preventDefault(); //prevernt default form sumbit action
        var SubmitURL = "/staffpanel/_frontend/requests.php";
        var dataString = $('#requestform').serialize();
        $.ajax({
            type: "POST",
            url: SubmitURL,
            data: dataString,
            success: function () {
                alert("request sent!");
            }
        });
    });
});
</script>
</head> 
<body> 

<div id="wrapper">

<div style="style=position:absolute;
left:220px;
top:-5px;" id="dj-says">
DJ Says:
</div>
<div id="banner"></div>

<div id="content-top">
<div id="blue-header">Welcome to Real-FM.net
</div></div>
<div id="content-middle"> 
  <p>Hello! Welcome to <a href="http://www.real-fm.net" rel="noAJAX"><strong>real-fm.net</strong></a><strong></strong>!<br /><br />
    
    We are still developing a homepage but untill then we will have this page, also known as the &quot;Player&quot;. We do however have a forum which is free to register to, You can simply visit the forum by clicking <a href="http://www.real-fm.net/forum"><strong>here</strong></a>.<br />
    <br />
    
    On air now is <strong><span id="cc_stream_info_title">No DJ</span><br />
  </strong><br />
    The current song is <strong><span id="cc_stream_info_song">Loading...</span><br /></strong></p>
  <p><script type="text/javascript" src="http://fast.zfast.co.uk/?port=8110"></script><br /></p>
  You can also tune in via:<div id="cc_tunein">
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.pls"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-pls.png" border="0" alt="Winamp" title="Winamp" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.asx"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-asx.png" border="0" alt="windows Media Player" title="Windows Media Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.ram"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-ram.png" border="0" alt="Real Player" title="Real Player" /></a>
	<a href="http://193.33.186.20/tunein.php/habfab/playlist.qtl"><img align="absmiddle" src="http://193.33.186.20/system/images/tunein-qtl.png" border="0" alt="QuickTime" title="QuickTime" /></a>
</div>

  Below you can send a Request to our DJ's!
  <div id="request">
  </div>
</div>
<div id="content-bottom"></div>

<div id="footer">
Copyright <strong>Real-FM</strong> 2012
<div id="floatright">
Designed &amp; Coded By <strong>Callum Allan</strong></div>
</div>

</div>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/system/streaminfo.js"></script>
<script language="javascript" type="text/javascript" src="http://193.33.186.20/js.php/habfab/streaminfo/rnd0"></script>
</body> 
</html>

Thanks alot

~ David

DanInMa · 03-14-2012, 07:52 PM

also I cant even get http://www.habfab.com/staffpanel/_frontend/requests.php to load, so its nto showing on your page

DanInMa · 03-14-2012, 07:53 PM

there it goes!

Vernier · 03-14-2012, 07:54 PM

EDIT: Double post - sorry!