PHP/HTML Form data multipage info transferring, image info - php

I've created a photo competition where when users see themselves in a photo they click the (I'm in this photo) callout.
This pops up a form for them to fill in. I've had no problems collecting the data from the form and saving it to a database.
My issue is that I need to be able to reference the photo that they were in.
Firstly I need to transfer the photo name/id from the first page to the second pop out Competition entry form page, and from there I need to be able save both to the database.
Any suggestions? I've tried using a session variale to call the photo name/id from the first page to the second.
Any help will be greatly appreciated.
UPDATED CODE:
Page 1: Photo gallery sample. Tried hidden form fields to call data, but obviously it doesn't call the photo info from those hidden fields.
<li>
<a class="thumb" name="007" id="007" href="images/9133440_DSC_0087.jpg" title="Title #6"><img src="images/9133440_DSC_0087_thumb.jpg" alt="Title #6" /></a>
</li>
</ul>
</div>
<div id="inphoto">
<img src="assets/inphotobutton.jpg">
</div>
Page 2: Competition entry page with form.
<div id="form">
<form name="epcomp" id="epcomp" method="GET" action="form.php" >
<p class="name"><label>Full Name:</label><br/> <input type="text" name="name" id="name" value="Your Name" onblur="if(this.value == '') { this.value='Your Name'}" onfocus="if (this.value == 'Your Name') {this.value=''}" maxlength="30" required/></p>
<p class="email"><label>Your Email:</label><br/> <input type="email" name="email" id="email" value="Your email" onblur="if(this.value == '') { this.value='Your email'}" onfocus="if (this.value == 'Your email') {this.value=''}" maxlength="60" required /> </p>
<p class="entry"><label>Your favourite festival moment: <span style="font-size:10px;">(Max 50 words)</label> <br/>
<p><textarea cols="40" rows="5" name="entry" id="entry" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" maxlength="50" required>Enter you answer here...</textarea></p>
<p class="button"><input class="button" type="submit" value="Enter Competition" name="formSubmit"/></p>
<?php echo '<input type="hidden" name="photoId" value="' . $_GET['imageID'] . '">' ?>
</form>
Page 3: My form data page.
$imageID = $_GET['imageID'];
$varName = $_GET['name'];
$varEmail = $_GET['email'];
$varEntry = $_GET['entry'];
$query = "insert into comp_entry (imageID, name, email, entry) values ('$imageID' , '$varName' , '$varEmail' , ' $varEntry')";
$qresult = mysql_query($query);

There are no values in input tags.
<form method="POST" action="compentry.php" onClick="wopen('compentry.php', 'popup', 448, 590); return false;">
<input type="hidden" name="photoName">
<input type="hidden" name="photoID">
<input type="image" src="assets/inphotobutton.jpg" name="submit" value="" class="submit" alt="Submit">
</form>
You may:
Insert a get value <form method="POST" action="compentry.php?imageid=<?php echo ...; ?>" and retrieve it in the 2nd form
Insert a post variable using <input type="hidden" name="photoId" value="..."> (you forgot the value tag).
Using POST in your example is yet not possible as you have no submit button. Instead of <input type="image" you need input type="submit". But submitting will not open another window, so you need to pass the variable other way.
Therefore I would stay in the 1st option, no <form> is however required, so make the code like this:
<a href="#" onclick="wopen('compentry.php?imageid=<?php
echo $imageID; // here goes PHP code
?>', 'popup', 448, 590); return false;">Click to open form</a>
In the competition form you know what picture you're about by using $_GET['imageid'].
EDIT
You need to decide how you want to achieve your goal. If you use form you can pass parameters by get or post method. However, you can also pass your variables with get method putting them into the URL.
Because the second way is simpler, I told you to remove the entire form tag and pass your image id by calling this site in a tag's onclick event, but you can choose any tag you like (I suggest to use that div from your first comment).
This calling is being done when I open the page in this line onclick="wopen('compentry.php?imageid=***', 'popup', 448, 590);, where you need in place of *** insert your image id. I proposed PHP echo function and this is how it's usually done.
Your 1st page requires nothing more. Clicking on the element will make popup and send request to the compentry.php passing the imageid variable by get method. The same would be if you make a form, method get, action compentry.php, hidden input field "imageid" value . You can see that calling the URL compentry.php?imageid= is much simpler than all this form stuff.
That's all -- when you are ready you must code the popup page. This is your second comment. This image id is to be retrieved by $_GET["imageid"]. So if this is also a form having however many fields, here the post method (not get) would be recommended.
So this line
<input type="hidden" name="photoId" value="photoID">
should look (in PHP) something like
echo '<input type="hidden" name="photoId" value="' . $_GET['imageid'] .'">
You need to put the image id you got from the 1st page by $_GET["imageid"] to the HTML of the 2nd page so that you can send it further to the last page.
Summary
The photo gallery uses <div onclick="wopen('compentry.php?imageid=***', 'popup', 448, 590);">. Code marked with *** is inserted by PHP and contains image id.
User clicks this div, JavaScript works, opens new pop-up window and the browser says: please send me contents of this page compentry.php?imageid=***
The server opens your compentry.php, draws a <form action="form.php" method="post"> (or get if you prefer)
Drawing HTML it encounters <input type="hidden" name="imageid" value="####"> where it is required, that in the place the server (PHP in fact) will echo contents of what is in $_GET['imageid'] what it received from photogallery.
User clicks submit button and the form is submitted. Among variables he entered there is a hidden one imageid, which has the same name (might have different, no problem), but the same value as in the photo gallery.
The file form.php receives all variables as new ones.

Related

Given the results of a POST, how can I change a value and resubmit it?

Say I have a HTML form that lets you input a name and age and returns with a list of people with that name and age.
<form method="post" action="/search_results">
<input type="text" name="personName">
<input type="text" name="personAge">
<input type="submit" value="Submit!">
</form>
And on the search results page I have a list of the results, but I only display 50 at a time and allow users to go forwards/backwards between the page with buttons. So the results page would also look for a POSTed 'pageNumber' value and default to 0 if there is none.
When they click a button, how would I resubmit the age and name and also submit the corresponding pageNumber from the button?
I'm using PHP
Add a hidden field to the form:
<form name=search"" method="post" action="/search_results">
<input type="hidden" name="pageNumber"
value="<?php echo isset($_POST['pageNumber']) ? (int) $_POST['pageNumber'] : 0; ?>">
<input type="text" name="personName">
<input type="text" name="personAge">
<input type="submit" value="Submit!">
</form>
Add a JavaScript function to modify the hidden field value:
<script>
function search(pageNumber) {
var form = document.forms.search;
if (!form) return;
form.elements.pageNumber.value = pageNumber;
form.submit();
}
</script>
Apply the JavaScript function for the page buttons:
<span onclick="search(1)">1</span>
<span onclick="search(2)">2</span>
Obviously, the buttons should be generated with PHP in the following manner:
<?php
for ($p = 0; $p < $pagesNum; ++$p) {
echo "<span onclick='search($p)'>$p</span>";
}
?>
<form method="post" action="/search_results">
<input type="text" name="personName" value="<?php echo (isset($formdata['personName'])?$formdata['psersonName']:"") ?>">
<input type="text" name="personAge" value="<?php echo (isset($formdata['personAge'])?$formdata['personAge']:"") ?>">
<input type="hidden" name="currentPage" value="<?php echo (isset($formdata['currentPage'])?$formdata['currentPage']:"0") ?>">
<input type="submit" value="Submit!">
</form>
formdata are the data which are the inputs of the previous submit. These data should be returned by the search_results page along with the view.
Below is the js
<script>
$(document).ready(function(){
$(".paginationBtns").click(function(){
var page = $(this).attr('pageValue');
$("input[name='current']").val(page);
$("form").submit();
});
});
</script>
Assumptions of the forward and backward button
<a href="#" pageValue=0>Back</a><a href="#" pageValue=50>Next</a>
You have to append the back and next pageValue while loading each page.
The best practice in pagination to use a simple link that contains the parameres (GET) and not (POST). That way, when you have the parameters in the url you can cache it, add to favorites, get indexed by google, share your page in email/facebook etc.
<a href='http://example.com/?personName=<?=$_POST['personName']?>&personAge=<?=$_POST['personAge']?>&page=<?=$next_page_number?>'>Next</a>
If for some reason you must or really want to use POST you can save the values in hidden inputs within a form in the page and then sumbit it when clicking on "next page" button.
Form example:
notice its just an example you should sanitize the variables and not put them directly from the $_POST
<form name="pagination" method="post" action="/search_results">
<input type="hidden" name="page" id="page" value="2">
<input type="hidden" name="personName" value='<?=$_POST['personName'];?>'>
<input type="hidden" name="personAge" value='<?=$_POST['personAge'];?>'>
</form>
notice that we set the next page numbers & do submit by using a command from the form of:
<button onclick='document.getElementById("page").value= "2";document.pagination.submit();'>Next page</button>

Insecure form post value validating

Currently I'm using a form to post a "comment" and save it in the database there are two hidden fields, one to check what component the comment is made on and the other hidden field is the comment number. But I found a exploit in my own form. If I go into the developer console I can change them to either crosspost the comments to a other form, or to something that doesn't exist, this doesn't really matter, nor the fact that I can change the number the comment is, because it still works properly if there's a comment with the same number.
<form action="/index.php?option=com_comments&view=comment&row=<?= $row ?>&table=<?= $table ?>" method="post">
<input type="hidden" name="row" value="<?= $row ?>" />
<input type="hidden" name="table" value="<?= $table ?>" />
<textarea type="text" name="text" class="control control--textarea control-group__control" placeholder="<?= translate('Add new comment here ...') ?>" id="new-comment-text"></textarea>
<br />
<input class="leader btn btn--theme control-row__trigger" type="submit" value="<?= translate('Comment') ?>"/>
But the issue is that when I go to the console and I add and then submit the form I can actually override the value and post as that I'm someone else. Which is obviously not intended behaviour to be able to post as someone else. I can't seem to find a way to validate the value of created_by before the post is being send, because if I put it in a hidden input field too it can be changed just as well. What can I do to make this secure?
EDIT: The posting is done automatically and I literally can't change anything about it because of the Framework we're using. And it overrides the proper default behaviour. A better way to phrase my question would be, can I prevent a user from adding a extra hidden input field to post extra values? Should I post form post check everytime if the post includes a created_by and if it does change it to the current profile_id?
Malicious code changed via developer console
<form action="/index.php?option=com_comments&view=comment&row=2&table=blogs_blogs&created_by=6" method="post" class="ng-pristine ng-valid">
<input type="hidden" name="_token" value="a0b15d3664d7bc0e0e40675095fec014">
<input type="hidden" name="_token" value="a0b15d3664d7bc0e0e40675095fec014">
<input type="hidden" name="row" value="2">
<input type="hidden" name="created_by" value="6">
<input type="hidden" name="table" value="blogs_blogs">
<textarea type="text" name="text" class="control control--textarea control-group__control" placeholder="Add new comment here ..." id="new-comment-text"></textarea>
<br>
<input class="leader btn btn--theme control-row__trigger" type="submit" value="Comment">
</form>
Rule #1 in web application security: Never trust the client
If the user is logged in, store the user's id in the session and only use that identifier to store his/her records in the database.
Plus, you should implement a mechanism to prevent CSRF (cross site request forgery) in your form. Because I can't see that it does.
You can use session or cookies together with database
[php]
$userHash = $db->prepare('SELECT user_hash FROM user WHERE id = :uId')->scalar([':uId' => $this->getUserId()]);
if (!empty($_SESSION['userHash']) && $_SESSION['userHash'] == $userHash) {
// process form
// generate new user hash
} else {
die('!HACKER!');
}
Instead of user ID you can use session ID.
I fixed it by adding this check to the behaviour that's applied before it's actually posted to the server
public function createdbycheck(Library\CommandContext $context)
{
$context->request->data->created_by = null;
}
Just sets it to NULL, and then it's handled by the default behaviour.

Unable to get JFactory::getApplication in joomla using cBox popup

I am Developing popup component for joomla site,
The Pop up Working Great , In my Popup i get phone number from user, i need to store that phone number to joomla database , but i am unable to call JFactory::getDBo(), when i call these method , popup was not working, i am in trouble , any help will be appreciate me.. thanxs in advance...
site/default.php
<script>
function openColorBox() {
$.colorbox({
innerWidth:500,
innerHeight:300,
iframe:true,
href: "subscribe.php",
overlayClose:true,
onLoad: function() {
$('#cboxClose').remove();
}
});
}
setTimeout(openColorBox, 1000);
</script>
site/subscribe.php
<body class="oneColFixCtr">
<div id="container">
<form name="Mail_list" action="#" method="post">
<p>
<label for="phone">Your Mobile Number </label>
<input type="tel" name="phone" id="phone" size="10" pattern="\d{10}" required />
<input type="hidden" name="date1" id="date1" value="<?php echo date('d.m.y'); ?>" />
</p>
<input type="submit" name="submit" value="Enter">
</form>
</div>
Your form is not posting the data anywhere when sumitted. Your action="#" will never allow the form to submit. Set your action to PHP_SELF if you need to submit it back to subscribe.php, then have a check in your subscribe.php that processes your form.
The better method would be to have your popup content in a hidden div and open that div instead of using an iframe. Use subscribe.php as your logic for saving the users data to the database. Using ajax to submit the form wouldn't be a bad idea either.

How to post multiple input fields

I am a new to this type of coding so I was wondering if someone could help me.
Here's what I want to achieve, an input field where the user can enter text and have another text appended to this. So for example, when the user enters text e.g "My Name!!", upon posting there would be another hidden text appended to this, so the server would receive "Hidden Text!","My Name!!".
Here's an image explaining this in an easier way.
Here is my code so far..
<form method="post" action="jumpin.php">
<label>Desired Username:</label>
<div>
<label id='labletext'><?php echo $_SESSION['user_name_custom']; ?></label>
<input type="text" id="userid" name="userid" />
<input type="submit" value="Check" id="jumpin" />
</div>
<script>
$('#userid').keyup(function(){
$(this).css('color','#000');
});
$('#userid').blur(function(){
var value = $('#labletext').text()+$(this).val();
$(this).val(value);
});
</script>
</form>
This code doesn't seem to be working, all the server receives is the text the user submitted and not the "labletext".
You can use a hidden input field.
<input type="hidden" name="extra_label" value="<?php echo $_SESSION['user_name_custom']; ?>" />
Not visible to your users, but the data is passed to your server.
In your server-side code, you'll access the variable like $_REQUEST['extra_label'].
<input type="hidden" name="label" value="yourvalue" />
And in your submission you can do this
if(isset($_POST['submit']))
{
$text = $_POST['text'];
$label = $_POST['label'];
$string = $label.$text;
}
You have to put the concatenated value into the form field so it will be submitted to the server when you post the form.
$('#userid').blur(function(){
var value = $('#labletext').text().trim() + ' ' +$(this).val();
$(this).val(value);
});

How can I read all text-fields from html form with variable names in a XMLHttpRequest?

I'm beginner in usign Ajax XMLHttpRequest, I've a few issues that I need to solve.
I've a form that reads information from MYSQL table.
These information are displayed for the user using "while looping".
Each table row is displayed for the user as html form with two text-fields.
Ex:
Row 1
<form id="form_excecoes11" method="post">
Text-field 1: <input name="ini_exp1" id="ini_exp1" type="text">
Text-field 2: <input name="ini_exp2" id="ini_exp2" type="text">
<input name="id_dia" id="id_dia" type="hidden" value="11" />
<img src="save.jpg" height="25" width="26" onclick="save();" id="botao_salvar">
</form>
Row 2
<form id="form_excecoes12" method="post">
Text-field 1: <input name="ini_exp1" id="ini_exp1" type="text">
Text-field 2: <input name="ini_exp2" id="ini_exp2" type="text">
<input name="id_dia" id="id_dia" type="hidden" value="12" />
<img src="save.jpg" height="25" width="26" onclick="save();" id="botao_salvar">
</form>
These text-field have their names assigned dynamically (using variable values).
After the user change the value from text-fields, he click in "save" button. This triggers an XMLHttpRequest from a JS external file.
What I need is that my JS reads all text-field name and value and send it with xmlhttp.send(params).
In the JS file I only get the variable values from ROW 1( I can see that I php echo result), I can't get the values from ROW 2.
Why?
function save(){
//...
var js_ini_exp = document.getElementById("ini_exp");
var js_ini_exp2 = encodeURIComponent(js_ini_exp.value);
var js_ini_exp3 = document.getElementById("ini_exp2");
var js_ini_exp4 = encodeURIComponent(js_ini_exp3.value);
var js_id_dia = document.getElementById("id_dia");
var js_id_dia2 = encodeURIComponent(js_id_dia.value);
}
Maybe the problem ins document.getElementById ?

Categories