Say I have info.php page with user info (id, name, age, etc).
On this page, there is an 'edit' button that takes the user to a form on edit.php so they can change their info. The form is populated via $_POST with id, name, age, etc.
edit.php has an 'update' button that posts back to info.php with the updated data. This all works fine.
But when I try to load edit.php within a jQuery Tools Overlay pop-up, the form in edit.php appears but the variables are not passed along. Instead they all appear as 'undefined'.
I am not sure where to place the required href element so as to pass my variables to edit.php when inside the overlay.
Any ideas?
<form action="edit.php" method="post">
<input type="hidden" name="edit" value="yes" />
<input type="hidden" name="id" value="<?php echo $row[1] ?>" />
<input type="hidden" name="name" value="<?php echo $row[2] ?>" />
<!-- this is the required href to trigger overlay -->
<a href="edit.php" rel="#overlay" style="text-decoration:none">
<input type="submit" value="Edit"/>
</a>
</form>
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
I'm a little confused by the question but this is possibly what you are looking for...
You need to either pass the ID in the url and look up the data serverside or pass all the data in the url like so
<a href="edit.php?id=<?php echo $row[1] ?>&name="<?php echo $row[2] ?>" rel="#overlay" style="text-decoration:none">
Another way is to store name id and all that stuff in $_SESSION in php. Then info.php would save it and edit php would read it.
Related
I have a php file that has 3 forms inside and some insert queries and i separate them with if(isset()) based on what variable comes from $_POST. I want to make the forms appear for example on the center of the page and when the user presses submit the form fades out and the next one from the isset appears. How can i do that?
For example this is the first form
<?php if (!isset($_POST['date'])): ?>
<?php if (!isset($_GET['id'])):?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
Date :
<input type="text" name="date" id="date"> </br>
<input type="submit" value="Submit" />
</form>
<script>
$("#date").datepicker();
</script>
<?php endif;?>
<?php endif;?>
And then if the user presses submit there is an if(isset()) with an insert query.
After the insert query there is another form
<?php if (isset($_GET['id'])): ?>
<form action="<?php echo $_SERVER['PHP_SELF']?><?php echo " ?id=" . $_GET['id'] . " &date=" . $_GET['date'] . " &seats=" . $_GET['seats']; ?>" method="post">
Ώρα :
<input type="text" name="time">
<input type="submit" name="submit">
</form>
<?php endif;?>
So what i want is to display them on the center of my page but i dont have to open another page every time i press submit and they will fadeout (or something similar) and display the next form.
Sounds like you could do this with css. Not sure I understand your question though.
display all 3 forms on the page at once -> no isset stuff, I don't get what that is there for
hide the ones you don't want the user to see with a class ".hide"
submit the forms with jquery, as you don't want the page to reload. after submitting, hide the one you just sumbmitted by setting its class to hide and removing hide from the next form
form{
transition: opacity 2s;
}
form.hide{
opacity:0;
}
I have a site with 3 images (arrows) that send you to another page, therefore:
index.html
-page1.php
-page2.php
-page3.php
For each there are a slider with bootstrap:
<input id="ex1" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
<input id="ex2" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
<input id="ex3" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5" data-slider-handle="triangle" style="width: 100%;"/>
I want to send the value of the slider to the other PHP page, for example if I click in the first image and the slider in in 8, when I go to page1.php, I want to see the slider number.
From the index.html, I got the slider values as follows:
$(".slider").click(function(){
var sli1 = $("#ex1").data('slider').getValue();
});
I tough in use $_SESSION to store the values of each slider, but I don't know how to implement it, because the the way to get the slider value is on Jquery and the second page is on PHP.
So, how I store a value in Jquery site and then I access through PHP in different site?
Edit:
I don't get to retrieve the values from the second page. My folder looks like:
-index.html
<tr>
<td>
<div>
<p>ABC</p>
<input id="ex1" data-slider-id='Exsliser' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</td>
<a class="slider" href="slider/slider1.php"><img ></a>
In the same inside :
$(".slider").click(function(){
$sliderID = $(this).closest('div').find('input').attr('id');
$sliderValue = $(this).closest('div').find('input').data('slider').getValue();
alert($sliderID +' - '+$sliderValue);
//Send values to PHP script that updates them in $_SESSION
$.post("session_val.php",{sliderID:$sliderID, sliderValue:$sliderValue});
});
And in slider1.php:
<?php
session_start();
$val = $_SESSION['ex1'];
echo "<script type='text/javascript'>alert('$val');</script>";
?>
I have put session_start(); at the beginning of both files. The session_val.php file is in the same folder that index, but in other folder that slider1.php
For the arrow buttons that take you to another page, you could fire them with Javascript using "onclick". That would let you grab the value of the slider and pass it as a GET variable in the URL.
The below code assumes all the pages are in the same directory, so uses relative paths. You can easily adapt to your actual file structure -- or use absolute paths if necessary.
HTML:
<a onclick="get_slider('page2','ex2')">Page 2</a>
JS:
function get_slider(page,sliderID) {
//Get value of specified slider
$slideValue = $("#" + sliderID).data('slider').getValue();
//Build the url, with page name, then slider value passed as parameter
$url = page + ".php?slider=" + $slideValue;
//Send user to the proper page
window.location = $url;
}
PHP:
On the destination page, you can get the slider value like this:
<?php $sliderValue = $_GET['slider']; ?>
EDIT: Reflecting my comment below, forget the stuff above and use ajax instead:
slider-value.php
Simple script that takes two passed variables and updates the related $_SESSION variable.
<?php
/*** Your database connection string here ***/
//Get passed values
$sliderID = $_POST['sliderID'];
$sliderValue = $_POST['sliderValue'];
//Put them into $_SESSION variable
$_SESSION[$sliderID] = $sliderValue;
?>
Javascript:
$('[data-slider-id]').change(function() {
//Get slider's ID and value
$sliderID = $(this).attr('id');
$sliderValue = $(this).data('slider').getValue();
//Send values to PHP script that updates them in $_SESSION
$.post( "slider-value.php",{sliderID:$sliderID, sliderValue:$sliderValue});
});
I would suggest you wrap the input in a form.
<form action="page2.php" method="post">
<input type="range" name="input1">
<button type="submit">Next page</button>
</form>
This way when the user submits the form you will have access to the value in the input via $_POST['input1'].
You can take a similar approach for the rest of the pages. You are basically implementing a multistep form.
I have this form, but this form inside PHP foreach function that gives the value from database, so I can't give the form id because redundancy will happened. And when click on any star in stars rating it will do as a submit, go to function so in the function I want to submit the form without id how?
<form class="watching-us-reating-form" name="swatching-us-reating-form" action=" method="get">
<input type="hidden" name="watchlist_id" value="<?php echo $fundAndUserWatchingThem['contactId']?>">
<!-- This hidden field used to save the value of the rating before submit -->
<input type="text" name="priority" class="watching-us-reating-value">
<!-- This DIV to contain the stars rating -->
<div class="watching-us-rating-div" data-score="<?php echo $flag; ?>" data-number="<?php echo $numberOfStars; ?>"></div>
</form>
You can use closest() to get the form element related to the clicked star rating:
$('.watching-us-rating-div').click(function() {
$(this).closest('form').submit();
});
Also, your form tag is missing an action - is that an error in your example?
Below is a script to upload images and save them to the DB.
On one page of the website, there's a table and inside each <li></li>, there is an upload icon where users can add one image.
The issue is the image upload only works for the "highest" empty <li> on the table.
Here, "highest" means the latest <li> saved in the DB (table is sorted by TIME DESC).
For instance, if I want to upload an image to a random <li></li> on the page, once I select an image, nothing happens. But if I select the "highest" empty (empty = no image saved in DB) <li></li>, it works like a charm.
HTML:
<li id="entry<?php echo $recipe_id ?>">
<div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
<form id="upload_icon" action="upload_extra.php" method="POST"
enctype="multipart/form-data">
<input class="upload" id="file" type="file" style="display:none" />
<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>
<img class="upload_icon" src="/upload_icon.png">
</form>
</div>
</li>
JAVASCRIPT (upload gets triggered as soon as one image is chosen):
<script>
$('.upload_icon').click(function(){
$(this).parent().find('.upload').click();
});
document.getElementById("file").onchange = function() {
document.getElementById("upload_icon").submit();
}
</script>
PHP:
<?php
include "includes/connnect.php";
$id = $_SESSION['id'];
$recipe_id = mysql_real_escape_string($_POST['recipe_id']);
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$recipe_id= $_POST['recipe_id'];
//get image attributes
$add = query("UPDATE cookbook SET recipe_pic = '".$location."' WHERE recipe_id =
'$recipe_id'");
header(Location:"home.php");
}
?>
What's going here ?
There are many, many problems with your question. First of all the HTML you've posted is invalid. I suspect that your Javascript code has a problem with such invalid HTML. However, the following code has not (for your HTML code duplicated once for demonstration purposes):
NodeList.prototype.forEach = Array.prototype.forEach;
document.querySelectorAll('input[type="file"]').forEach(function (file) {
var click = function() {
file.click();
};
var change = function() {
console.log('change:', file.value);
};
file.form.querySelector('img').addEventListener('click', click);
file.addEventListener('change', change);
});
http://jsfiddle.net/eBLL5/
All you need is to assign the correct listeners to the correct elements, as you can see, I do not use any ID values because they are duplicated.
I can use as well duplicate IDs in case you think this is not an argument, this is demonstrated in a related answer:
remove text from multiple spans having same id
I hope this helps you to get the feets again on the ground so that you can continue to validate the HTML and clean up a little bit.
It appears that your html form has
<input type="hidden" value="<?php echo $recipe_id; ?>"/>
However, the input field name attribute is not present so the post data stream will not have a definition for $_POST["recipe_id"] field. The undefined value is likely being interpreted by your script as 0 and so only the top or "highest" li image is updated.
If you alter the input field thus:
<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>
You may have better results...
Just change this part :
document.getElementById("file").onchange = function() {
document.getElementById("upload_icon").submit();
}
With :
$("#file").change(function(){$(this).parents("form").get(0).submit();})
In your HTML, you have:
<form id="upload_icon" action="upload_extra.php" method="POST"
enctype="multipart/form-data">
Then your Javascript mentions:
document.getElementById("file").onchange = function() {
document.getElementById("upload_icon").submit();
}
According to some specifications (HTML4, HTML5), there shouldn't be same IDs on multiple elements. So, when you use an iteration, avoid printing ids without appending something unique on them, like:
<form id="upload_icon<?php print $recipe_id; ?>"
action="upload_extra.php" method="POST" enctype="multipart/form-data">
Your Javascript can be turned into something like the following. (please mind that you need to call this function after the page is loaded)
function afterPageLoad() {
var buttons = document.getElementsByClassName("upload");
for (i = 0; i < buttons.length; i++) {
buttons[i].onchange = function() {
this.form.submit();
}
}
}
Now, if your PHP code has stopped working, we would need to see that, too, at the part you omitted by writing
//get image attributes
where the $location variable is initiated.
In JavaScript provided its submitting the form by finding the element by ID, As in the HTML code the IDs are repeating (not a standard method, IDS can't repeat but class can) so the browser will always submit the last (highest) form only, that's why when adding image to highest row its working and in between its not.
Please check this code out
<script>
$(document).ready(function()
{
id = '';
$('.upload_icon').click(function(){
id = $(this).attr('id');
$(this).parent().find('#file'+id).click();
});
$(".upload").change(function () {
$('#upload_icon'+id).submit();
});
});
</script>
<style>
.upload_icon {
cursor:pointer;
}
</style>
<ul>
<?php for($recipe_id=1;$recipe_id<10;$recipe_id++): ?>
<li id="entry<?php echo $recipe_id ?>">
<div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_icon<?php echo $recipe_id; ?>">
<input class="upload" id="file<?php echo $recipe_id; ?>" type="file" name="image" style="display:none"/>
<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>" />
<img class="upload_icon" src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-036_cloud_upload-128.png" id="<?php echo $recipe_id; ?>">
</form>
</div>
</li>
<?php endfor; ?>
</li>
In the HTMl code I have provided have different IDs for each forms (used the $recipe_id as suffix), when ever click event on the upload icon is fired it will check which upload icon is clicked by its attribute Id and then the respective input type file value is changed by finding the element by Id (used the same $recipe_id as suffix here also). On input type change event also same logic is used to fire the respective form.
I'm trying to get a website working. What I have are basically two images displayed (random, taken out of a mySQL database). What I need to do is (when the user clicks one of the images) the following:
Update the page, passing the info about the selected image (submit form);
Add one piece of data to the database (upvote the image)
I need to use $_POST to pass an array of values to the next page. So I thought:
<form name="input" action="the_page.php" method="POST">
<input type="image"
name="img"
src="image.png"
value ="dat1[\"data1\",\"data2\",\"data3\"]">
<!-- If value must be a single string, I'll use hidden inputs-->
</form>
<form name="input" action="the_page.php" method="POST">
<input type="image"
name="img"
src="image2.png"
value ="dat2[\"data1\",\"data2\",\"data3\"]">
</form>
Then I can upvote the selected image on the mySQL database with a little php upvote() function that updates the record. The upvoting process is done when the new page is loaded. From this, I have a couple questions:
I'm guessing the images will act as buttons, right? (They are supposed to submit the form, hence refreshing the page). If not, how can I achieve this? I'm unable to do it with a link (since I can't add the values to it). Maybe a javascript function? But I don't know how to submit the form that way either...
Once the page is reloaded, does it mean that only the data from one form has been submited, so I can retrieve the data by simply calling the PHP variable $_POST['img'] and get an array back?
EDIT: I now managed to get everything working, slightly similar to what I proposed initially. Thanks for the AJAX suggestion though, since it was what helped me solve it (looked up AJAX tutorials, found solution).
Here's my solution:
<?php
echo "<form name=\"input\" action=\"F2F.php\" method=\"POST\">";
echo "<input type=\"hidden\" name =\"table\" value=\"".$table1."\">";
echo "<input type=\"image\" name=\"nom\" src=\"".$IMG_Route1."\" value =\"".$Nom_base1."\" border=\"0\">";
echo "</form>";
?>
(where the image goes)
and then, on the header:
<?php
if ($_POST['nom']||$_POST['nom_x']){
if (!$_POST['nom']){
echo 'Could not retrieve name. $_POST[\'nom_x\'] = '.$_POST['nom_x']. mysql_error();
exit;
}
if (!$_POST['table']){
echo 'Could not retrieve table. $_POST[\'table\'] = '.$_POST['table']. mysql_error();
exit;
}
upvote($_POST['table'],$_POST['nom']);
}
?>
You can use one form and a set of radio buttons to simplify things a bit. Clicking on the label will toggle the radio button. You can use commas to separate multiple values for each checkbox, which you can then abstract later on (see below)
<form name="input" action="the_page.php" method="POST">
<ul>
<li>
<label>
<img src="whatever.jpg" />
<input type="radio" name="selectedImage" id="img1" value="12,16,19" />
</label>
</li>
<li>
<label>
<img src="whatever2.jpg" />
<input type="radio" name="selectedImage" id="img2" value="12,16,19" />
</label>
</li>
</ul>
</form>
You can detect when the radio button is selected by adding a listener for the change event, then submit the form.
$('input[name="selectedImage"]').change(function() {
$('form[name="input"]').submit();
});
To abstract the multiple values, you can then explode the form result with PHP, which will return an array of the values.
$selectedImageValues = array();
$selectedImageValues = explode(",", $_POST['selectedImage']);
From there you can pull the different values out and save the data to the database.