Develop Reference

passing php data/variable to a modal

I have some data being created(generated from database) using a while loop. Each set of data carries some form of id and its corresponding button is added to it. Now, when I click a button, I'd like to pass the id(single php variable) of the data related to this button to a modal window(that has a form) that pops and also make it the value of an input field. Here's my code so far:
The data from database:
<?php while ($data = mysqli_fetch_assoc($data_set)) { ?>
<div class="w3-section w3-row w3-card-2">
<div class="w3-half">
<div class="apartment-image w3-card-4">
<header class="w3-container">
<h4><?php echo $data['data_name']; ?></h4>
</header>
<div class="w3-container">
<img src="<?php echo "images/".$data['Image1']; ?>" class="w3-image" alt="<?php echo $data['dataimgname']; ?>">
</div>
<footer class="w3-contanier w3-border-top">
<div class="w3-border-right">
<button class="w3-btn w3-btn-block" type="button" name="btnBook" id="modalOpener" onclick="document.getElementById('book').style.display='block';">
Book or Request Tour
</button>
</div>
The Modal:
<div id="book" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container">
<span onclick="document.getElementById('book').style.display='none'" class="w3-closebtn">
×
</span>
<h2>Book or Request Tour</h2>
</header>
<div class="w3-container">
<form class="w3-form" action="bookntour-handler.php" method="post">
<div class="w3-group">
<label class="w3-label" for="fullname">Full Name:</label>
<input class="w3-input" type="text" name="fullname" value="">
</div>
<label class="w3-label" for="email">E-mail:</label>
<input class="w3-input" type="email" name="email" value="">
<label class="w3-label" for="telephone">Telephone:</label>
<input class="w3-input" type="text" name="telephone" value="">
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
<div class="w3-group">
<input class="w3-btn" type="submit" name="btnSubmit" value="Submit">
</div>
</form>
</div>
<footer>
</footer>
</div>
Like I said earlier, I want to pass the id associated with the button but from my code there is nothing that mentions about "id" so let's use.
<?php echo $data["data_name"]; ?>
When I open the modal window, I'd like this variable to be made as the value for input:
<label class="w3-label" for="dataname">Data Name:</label>
<input class="w3-input" type="text" name="dataname" value="">
I have looked at a couple of options so far but most of them seem unnecessary in my case or I simply don't understand them. Like this and this and this. This seems like a workable solution but it requires me to fetch the whole data again, from the database(using AJAX) which I do not want. I just want that one value.
I am using W3CSS for my layouts and creating the modal. A solution in jQuery/JavaScript or PHP(or both) will be appreciated. Thank you!
Update
So, I somehow managed to solve part of the problem. I added this function to my external JavaScript file:
function showModal() {
document.forms["bookntourForm"]["apartmentno"].value = document.getElementsByClassName("modalOpener")[0].getAttribute("value");
document.getElementById('book').style.display='block';
}
Then the code for the button that calls the above function looks like this:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal()" value="<?php echo $data['data_name']; ?>">
Book or Request Tour
</button>
This brings up a new problem. Whenever I open the modal, the value for <input class="w3-input" type="text" name="dataname" value=""> on the modal is the same for all modals although they are different when each button is generated.

You can pass your id through ajax to the backend and retrieve necessary data regarding that ID by using a query,
Then set values to the necessary place inside the success method.
As you say, I don't think as a good suggestion to use data_name instead of id.
you can set your id in hidden field and use it. because "data_name" will not be good solution to retrieve data by unique field.

I don't know if I have done this in a proper manner, but it was as simple as this. I changed the value of onclick attribute of the button to:
<button class="w3-btn w3-btn-block modalOpener" type="button" name="btnBook" onclick="showModal('<?php echo $apartment["ApartmentNo"]; ?>')">
Book or Request Tour
</button>
The showModal() function in the external JS now looks like this:
var aptNo;
function showModal(aptNo) {
document.forms["bookntourForm"]["apartmentno"].value = aptNo;
document.getElementById('book').style.display='block';
}
It now works the way I wanted.

Send uploaded image from a form to a second form

How can I send an uploaded image from one form to a second form on submit? The code for the first form:
<form class="usp-form" method="post" enctype="multipart/form-data" action="http://www.aeroe.com/gate/" data-validate="parsley" data-persist="garlic" novalidate>
<input name="usp-files" type="file" maxlength="255" data-required="false" placeholder="File(s)" class="usp-input usp-input-files select-file multiple" multiple="multiple" id="usp-multiple-files" />
<input type="submit" value="Go To Step 2">
</form>
Code for the second form. I need the file input on this second form to have the files from the previous form in it, which I will then submit at a later stage.
<form class="usp-form" method="post" enctype="multipart/form-data" action=" http://www.aeroe.com/submit/" data-validate="parsley" data-persist="garlic" novalidate>
<input name="usp-files[]" type="file" maxlength="255" data-required="false" placeholder="File(s)" class="usp-input usp-input-files select-file multiple" multiple="multiple" id="usp-multiple-files" />
<input name="usp-file-limit" class="usp-file-limit" value="20" type="hidden" />
<input name="usp-file-count" class="usp-file-count" value="1" type="hidden" />
<div class="usp-preview"></div>
<input type="submit" value="Go To Step 2">
</form>
An unsuccessful solution I thought to include: Its been suggested that I use the following code in between my second form tags:
foreach ($_FILES["usp-files"] as $file) {
echo '<input name="usp-files[]" value="'.$file["usp-files"]["tmp_name"].'" type="hidden" />';
}
along with this code to put in to the index file of http://www.aeroe.com/submit/ (I don't know where to find the index file):
foreach ($_POST["usp_files"] as $file) {
//get the location of the file
$fileslocation= tempnam(sys_get_temp_dir(), $file);
//move the file to somewhere else
move_uploaded_file($file, $destination);
}

Using Jquery/Javascript to send imgsrc value to hidden field

I have a user form where people can update their details and it saves to the database.
I have added the function for people to upload an avatar, crop the image and upload it to the server (using Cropper).
When the user has finished cropping their image the script updates the HTML and replaces the default avatar with their new one, as below:
<div class="avatar-view" title="" data-original-title="Change the avatar">
<img src="../../scripts/cropper/img/20150728143117.png" alt="Avatar">
</div>
Underneath the avatar is the user form with the rest of the details and a save/submit button. I have added a hidden field for the avatar, but I need to send the value of the newly uploaded image to this hidden field. I have looked for various pieces of javascript/jquery to do this but I can't seem to get it to work so far.
<form id="reg-form" name="r_form" method="post" action="/editor/go/user" enctype="multipart/form-data">
<div class="form-group">
<label for="avatar">avatar</label>
<input type="hidden" name="avatar" value="123">
</div>
<div class="form-group">
<label for="first_name"><i class="fa fa-star icon-red"></i> First name</label>
<input id="first_name" name="first_name" class="form-control" value="John">
</div>
<div class="form-group">
<label for="last_name"><i class="fa fa-star icon-red"></i> Last name</label>
<input id="last_name" name="last_name" class="form-control" value="Smith">
</div>
<button type="submit" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>
<input type="hidden" name="user_id" value="41">
</form>

First add an id to the hidden input value,
<input id="avatar-val" type="hidden" name="avatar" value="123">
then execute this code when the button is clicked
$("#avatar-val").val($(".avatar-view>img").prop('src'));

Get the link to current image using query and set it to hidden field.
<div class="form-group">
<label for="avatar">avatar</label>
<input type="hidden" name="avatar" value="123">
</div>
<script>
var src = $('.avatar-view').find('img').attr('src');
$('input[name="avatar"]').attr('src', src)
</script>

Without any modification you can use like
var src=$('img[alt="Avatar"]').attr('src');
$('input:hidden[name=avatar]').val(src);

$(document).ready(function(){
$('#reg-form').submit(function() {
var newSrc = $('#ID_of_your_img').attr('src');
$('[name=avatar]').val(newSrc);
});
});
I hope this will help you. if you face any issue feel free to ask.

Your img tag needs to have an id. Then you can simply use the DOM to change the src. Then you can tie a Javascript function to the onclick attribute of the submit button.
<img id="change" src = "....">
...
<button type="submit" onclick="changeImage()" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>
<script>
function changeImage(){
src = document.getElementById("change").src ;
document.getElementsByName("name")[0].value - src;
}
</script>

Sending one file to two inputs

I have a little problem and i cant solve it. Below is my form. The question is: how can i put image which was put in input where is ajaximage.php to another form to a hidden input. I want the image was firstly send by ajaximage.php and shown and keept by another form and send to upload.php
<div class="kontakt">
<input type="checkbox" name="check" value="1" onclick="document.getElementById('imgfile').style.display = this.checked ? 'block' : 'none';
this.elements['photoimg'].disabled = this.form.elements['nazwa3'].disabled = !this.checked" />
<form id="imageform" name="nazwa2" disabled="disabled"style="display: none" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input id="imgfile" style="display: none" type="file" name="photoimg" id="photoimg" />
<div id='preview'></div>
</form>
<form id="dodaj" method="POST" enctype="multipart/form-data" action="upload.php">
<input type="hidden" name="ok" value="1">
<input type="hidden" name="MAX_FILE_SIZE" value="665600">
<input type="file" style="margin-bottom:30px; margin-top:20px;" name="plik" size="40" />
<textarea rows="4" cols="50" style="margin-bottom:30px;" placeholder="Wpisz swój tekst." required name="tekst" wrap="virtual">
<?php
if(isset($_SESSION['tekst']))
{
$tekst = $_SESSION['tekst'];
echo $tekst;
}
?>
</textarea>
<input type="submit" value="Dodaj" />
</form>
</div>

You can't add a file from one <input type="file"> to another <input type="file">.
This is because you can't set a file inputs value due to security reasons.

You cannot pass uploaded files directly to another form. You need to move it into a temporary location and give it a unique filename which you can then store into a hidden field in the second form. When you submit the second form then you receive the hidden value and you are then able to access the previously uploaded file.
See this: http://php.net/manual/en/function.move-uploaded-file.php

Form post Send data to another page , verify and then post

I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?

Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';

EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.