Javascript, jQuery, PHP issue. - php

<?
session_start();
include("connection.php");
if($_POST['continue'])
{
$x=$_POST['rules'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
function haha(form)
{
if(form.rules.value=='')
{
printToPage('output','Please enter the rules.','text')
hello();
return false;
}
else
{
myRedirect();
return false;
}
}
$(function()
{
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
resizable: false,
draggable: false,
height:10,
width:340,
modal: true,
overlay:
{
backgroundColor: '#000',
opacity: 0.5
},
buttons:
{
'No': function()
{
window.location = "so-rules.php";
return true;
},
'Yes': function()
{
window.location = "so-rules.php";
return true;
}
}
});
});
function myRedirect()
{
$("#dialog").dialog('open');
return true;
}
$(function()
{
$("#dialog2").dialog
({
autoOpen: false,
bgiframe: true,
modal: true,
resizable: false,
draggable: false,
height:160,
width:260,
buttons:
{
Ok: function()
{
$(this).dialog('close');
}
}
});
});
function hello()
{
$("#dialog2").dialog('open');
}
function getElem(id)
{
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function printToPage(id,content,classname)
{
var el = getElem(id);
if (!el) return;
if (el.style)
{
el.innerHTML = content;
if (classname) el.className = classname;
}
else if (el.document)
{
var SPANstr = (classname) ? '<span class="' + classname + '">' : '<span>';
el.document.write('haha');
el.document.close();
}
}
</script>
</head>
<body>
<td height="" bgcolor="#fafb91"><form onsubmit='return haha(form)' id="form" name="form" method="post" action="<? echo $PHP_SELF; ?>">
<p class="style16">
<div align="left">
<p><span class="style5">Rules:</span>
</p>
<p>
<textarea name="rules" rows="7" cols="49"></textarea>
<br />
<? echo "X: ".$_SESSION['x']; ?>
</p>
<div id="dialog" title="Attention">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Is the judge/speaker/facilitator from UST?</p>
</div>
<div id="dialog2" title="Attention">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 0 50px 0;"></span>
Please enter the rules.
</p>
</div>
<p><input type="submit" name="continue" id="continue" value="Continue">
<span id="output"></span>
</body>
</html>
When the textarea is not null, the form should be submitted ($PHP_SELF) so I can get the value of the textarea. But before it is submitted, a dialog box would appear. When the user clicks yes, he will be redirected to a different page. My problem is I don't know where to put the return 'true' so that the page will be submitted in order for me to get the value of the textarea. I put the return 'false' here:
if(form.rules.value=='')
{
printToPage('output','Please enter the rules.','text')
hello();
return false;
}
When the textarea is null, the form will not submit and a different dialog box will appear. Where should I put the return 'true' so that the page will only be submitted when the user inputs something in the textarea and after he clicks 'yes'.
I have posted the code where I tried putting in the return 'true' without success.

If it is a type="button" use the onclick event to control the action

I wonder why you are using "button" and not "submit"? "button" comes in handy when you are using JavaScript, but it doesn't work with PHP. Furthermore, they makes no difference anyway.
If all that you want to do is to differentiate between the buttons, try giving them different names.
Hope that help

If what you are asking is: How can I see in the POST response what button has been clicked?
Then I'm afraid you can't as only the name and value of the submit button that was used to submit the form is being listed in the $_POST data.
You can however achieve this using a hidden field and javascript. So you should do something similar to this:
<input type="button" id="continue" value="Continue" onclick="document.getElementById('hiddenContinue').value = 'true';" />
<input type="hidden" name="continue" id="hiddenContinue" value="false" />
So when the button is clicked the hidden field is set to true and when the form is submitted it appears in the $_POST array.
However, this doesn't make much sense if there are no other onclick events added to the button.
Maybe you should describe a little bit more what you are trying to do.
EDIT:
Since you updated your old question to a new one, this answer doesn't apply anymore.

Button inputs are used for custom actions that are usually written in JavaScript. That is, they do not submit a form like the Submit inputs. You can write a JavaScript code that will submit the form for you OR navigate to a particular PHP page and achieve a similar effect.

Related

Passing data using Jquery Post method to the same page

I'm a newbie to Jquery , my question is simple , I'm trying to pass data using Jquery Post method, I have read a lot , but I can't figure it out:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TestAd" id="TestAd">
<iframe data-aa='58593' src='https://ad.a-ads.com/58593?size=468x60' scrolling='no' style='width:468px; height:60px; border:0px; padding:0;overflow:hidden' allowtransparency='true' frameborder='0'></iframe>
</div>
<button>Send request</button>
<br>
<?php
if(!empty($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var height = $('.TestAd').height();
$("button").click(function()
{
if (height==0)
{
$.post("", {block:true});
}
}
</script>
</body>
</html>
The script is a simple AdBlocker checker, thanks for your help
<form method="post">
<input type="hidden" value="true" name="block">
<input type="submit" value="Send request">
</form>
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
if you want to redirect it to the same page why dont you use simple form tag to pass the block value.By default it will redirect it on the same page
Change your PHP to this:
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
And Change your jQuery to this:
<script>
var height = $('.TestAd').height();
$("button").click(function () {
if (height == 0) {
$.post("somepage.php",{block: true}, function (data) {
// data is the response
// do something with it here
alert(data);
});
}
}
</script>
Here are the docs for $.post(), essentially, the way you had it, ignores the response. You have to pass the anonymous function (function (data) {}) callback as the 3rd argument to be able to work with the response.
From the docs:
Examples:
Request the test.php page and send some additional data along (while still ignoring the return results).
$.post( "test.php", { name: "John", time: "2pm" } );

delay submit on form by 5 seconds and display jquery dialogue?

i need some help please. I am trying to delay the the submission of a form by 5 seconds so a jquery dialogue loading box appears before submitting the login form.
At the moment the code im using does delay the submit however it stops the form from submitting the data and wont log the user in.
I'm pretty sure its because im using e.preventDefault in my javascript however it doesnt work without it, can anyone please show me how i can delay the form from submitting and submit the data successfully so it does log the user in.
Thanks.
<div id="login">
<?php
if (!logged_in()) {
?>
<form id="myform" form action="login.php" rel="shadowbox" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
<?php
}
if (logged_in()) {
?>
Logged in as, <?php echo $_SESSION['email'] ?>. Dashboard, Logout | <div class="login_settings" id="login_settings"></div>
<?php
}
?></div>
<script>
$('#myform').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
</script>
<script>
$(document).ready(function() {
$('#myform').submit(function() {Shadowbox.open({
content: '<iframe src="login.php" width="500" height="300" scrolling="no" style="overflow:hidden; border:none;"></iframe>',
player: "html",
height: 300,
width: 500
});
});
});
</script>
Use single submit handler. I tried this on my local system and it works.
<script type="text/javascript">
$(document).ready(function() {
$('#myform').submit(function(e) {
var form = this;
e.preventDefault();
Shadowbox.open({
content: '<iframe src="login.php" width="500" height="300" scrolling="no" style="overflow:hidden; border:none;"></iframe>',
player: "html",
height: 300,
width: 500
});
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
});
</script>

Displaying mysql query result using jquery

I'm trying to display data from mysql on the same page that i've got my form with checkboxes. The question is how to write js script that gonna display it.
The code is:
<form id="myForm" action="pdoakcja.php" method="post">
<!--Instruktor: <input type="text" name="name" /> -->
Permissions:<input type="checkbox" name="M1" value="M1" />M1
<input type="checkbox" name="M2" value="M2" />M2
<input type="submit" value="Szukaj" />
</form>
<div id='name-data'>Instruktorzy o podanych uprawnieniach:</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
............??????
</script>
You could solve your problem by using jquery form plugin, which will help you to submit the form without having to reload the page and show you the return from your target page in the same page. Just follow the instructions:
Download this jquery form plugin first and save it.
Then
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- This jquery.form.js is for Submitting form data using jquery and Ajax -->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
success: showResponse
};
// bind form using 'ajaxForm'
$('#myForm').ajaxForm(options);
});
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
if(responseText==1){
$("#error").html('No Result Found');
} else{
$("#result").html(responseText);
}
}
</script>
<form id="myForm" enctype="multipart/form-data" action="pdoakcja.php"
method="post" name="myForm">
<!--Instruktor: <input type="text" name="name" /> -->
Permissions:<input type="checkbox" name="M1" value="M1" />M1
<input type="checkbox" name="M2" value="M2" />M2
<input type="submit" value="Szukaj" />
</form>
<span id="error"></span>
<span id="result"></span>
YOUR pdoakcja.php file: (I have got the following code from your another post here, haven't checked it though)
<?php
$query = mysql_query("SELECT * FROM permissions WHERE m LIKE '".$_POST['M1']."' OR m LIKE '".$_POST['M2']."' OR mn LIKE '".$_POST['MN1']."' ");
if($query) {
while($permissions = mysql_fetch_assoc($query)){
$query2 = mysql_query("SELECT name_surname FROM instruktorzy WHERE instruktor_id='".$permissions['instruktor_id']."'");
while($Mdwa = mysql_fetch_assoc($query2)){
echo "<p style=\"font-size: 14px; font-family: Helvetica; background-color: #FFFFFF\"> ".$Mdwa['name_surname']."<br />" ; "</p>" ;
}
}
} else {echo "1";}
?>
I hope this will work for you. For detail information you could study the jquery form plugin's website.
Heres a pseudo example showing how you can do it with jQuery, this will also update as you click the check box so you could remove the submit altogether;
You say you already have a database doing the job so I wont include that. Just copy and paste.
<?php
//Some pseudo data kinda as your receive it from a query
$datafromSql = array(
array('id'=>1,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>2,'permission'=>'M2','theData'=>'User has M2 permission'),
array('id'=>3,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>4,'permission'=>'M1','theData'=>'User has M1 permission'),
);
//Access the data
if($_SERVER['REQUEST_METHOD']=='POST'){
$is_ajax = false;
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
$is_ajax = true;
}
//pseudo code, really you would put your query here
// SELECT theData FROM your_table WHERE permission=POST_VALUE ... ...
//And then format your output
$result=array();
foreach($datafromSql as $row){
if($is_ajax == true){
foreach($_POST as $key=>$value){
if($_POST[$key] == 'true' && $row['permission']==$key){
$result[]=$row['theData'].'<br />';
}
}
}else{
foreach($_POST as $key=>$value){
if($_POST[$key] == $row['permission']){
$result[]=$row['theData'].'<br />';
}
}
}
}
$result = implode('<hr />',$result);
//AJAX Response, echo and then die.
if($is_ajax === true){
header('Content-Type: text/html');
//example output sent back to the jQuery callback
echo $result;
//echo '<pre>'.print_r($_POST,true).'</pre>';
die;
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update(){
$.post('./<?php echo basename(__FILE__)?>',
{
M1: $("#M1").is(':checked'),
M2: $("#M2").is(':checked')
},
function(data) {
$('#result').replaceWith('<div id="result"><h1>The Result:</h1>'+ data +'</div>');
});
}
</script>
</head>
<body>
<form method="POST" action="<?php echo basename(__FILE__)?>">
Permissions:
<input type="checkbox" id="M1" name="M1" value="M1" onChange="update()"/>M1
<input type="checkbox" id="M2" name="M2" value="M2" onChange="update()"/>M2
<input type="submit" value="Szukaj" />
</form>
<p id='result'><?php echo isset($result)?$result:null;?></p>
</body>
</html>
You should use the PHP MySQL functions to retrieve the data you want from your database and then display them via PHP, not javascript.
Especially have a look at this: mysql_fetch_assoc - there is a fully working example.

submit normally newly created ajax form

I want to submit my form. In my form using first button I create a textbox through ajax and after that I use second button to submit the form normally. When I want to get the value of newly created textbox using $_POST it gives error. How can i get value of ajax created button on submission. my php code is :
<?php`enter code here`
session_start();
ob_start();
require_once "config.php";
if ($_SERVER['REQUEST_METHOD']=="POST")
{
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subtest").click( function() {
alert(jQuery("#tt").val());
});
});
</script>
</head>
<body id="#bdy">
<form id="FrmMain" method="post" action="">
<div id="Shd" style="font: 10%; margin: 50px; background-repeat:repeat-y; padding- left:120px;" >
<input type="text" id="txtFrom" name="txtFrom" />
<input type="text" id="txtUpto" name="txtUpto" />
<input type="text" id="txtOpt" name="txtOpt" />
<input type="submit" id="subt" name="subt" />
<input type="submit" id="subtest" name="subtest" />
<div id="RuBox" style="font-weight:bold;"><input type="checkbox" id="chkaccept" name="chkaccept" /> I accept terms and conditions.</div>
</div>
</form>
<div style="color:#F00; font-size:18px; display:none;" id="divload">Please wait loaidng... </div>
<div id="disp"></div>
</body>
</html>
Code of my adp.php file :
<?php
sleep(5);
?>
<div style="color:#30F; font-size:36px;">
Application testing............
<input type="text" id="tt" name="tt" />
</div>
I am not getting value of textbox named "tt" in temp form
Thanks
You're pretty much not posting anything from here:
jQuery(document).ready(function(){
jQuery("#subt").click(function(){
jQuery("#divload").show();
jQuery.ajax({url:"adp.php", type:"post", success:function(result){
jQuery("#disp").html(result);
jQuery("#divload").hide();
}});
return false;
});
});
So I would assume that you only want to generate a text field dynamically. And you can do it without the use of ajax:
var form = $('#FrmMain');
$('<input>').attr({'type' : 'text', 'id' : 'tt', 'name' : 'tt'}).appendTo(form);
Plus you're also trying to print out $_GET['tt'] while the form method is POST
if (isset($_POST['subtest']))
{
print $_GET['tt'];
}
This should also be:
echo $_POST['tt'];

How to fetch the content of iframe in a php variable?

My code is somewhat like this:
<?php
if($_REQUEST['post'])
{
$title=$_REQUEST['title'];
$body=$_REQUEST['body'];
echo $title.$body;
}
?>
<script type="text/javascript" src="texteditor.js">
</script>
<form action="" method="post">
Title: <input type="text" name="title"/><br>
<a id="bold" class="font-bold"> B </a>
<a id="italic" class="italic"> I </a>
Post: <iframe id="textEditor" name="body"></iframe>
<input type="submit" name="post" value="Post" />
</form>
The texteditor.js file code is:
$(document).ready(function(){
document.getElementById('textEditor').contentWindow.document.designMode="on";
document.getElementById('textEditor').contentWindow.document.close();
$("#bold").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}
else{
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected");
}
else{
$(this).addClass("selected");
}
ItalicIt();
});
});
function boldIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt(){
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function post(){
var iframe = document.getElementById("body").contentWindow;
}
Actually I want to fetch data from this text editor (which is created using iframe and javascript) and store it in some other place. I'm not able to fetch the content that is entered in the editor (i.e. iframe).
Please help me out in this.
You can't do that because it is not allowed.
Javascript is not allowed access to other frames/iframes, as it would result in a security breach.
Try to implement your editor inline in a <div></div> instead of iframe

Categories