We Keep Coding

Using jQuery to insert PHP variable into form input

I have been staring at this problem for hours, but my jQuery skills are quite basic, so please I need some help here.
I have a 3 form inputs.
When I click on one of the inputs it opens a bootstrap modal that contains my image gallery (which is populated by PHP), and below each image is an "Insert" button.
When I click the Insert button I wish to pass the title of that image back into the specific input field that I clicked.
I know this should be done with jQuery using "this" but just cant figure it out.
Here is my code so far:
The form fields
<form>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
</div>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
</div>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter">
</div>
</form>
My image gallery code (with insert button)
<?php
$query = $conn->query("SELECT * FROM images ORDER BY id DESC");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$imageURL = '../../images/'.$row["file_name"];
$imageTitle = $row['file_name'];
$imageID = $row['id'];
?>
<div class="image-gallery-item">
<div class="image-gallery-img">
<img class="gallery-img" src="<?php echo $imageURL; ?>" alt="" />
</div>
<p class="mt-2"><?php echo $imageTitle; ?></p>
<button onclick="insert('<?= $imageTitle; ?>')" class="btn btn-primary" type="button" data-dismiss="modal">INSERT IMAGE</button>
</div>
My ineffective piece of jQuery
$(document).ready(function(){
$(".image_up").click(function insert(image){
$(this).val(image);
});
});
Any help would be greatly appreciated!

$(document).ready(function(){
$(".image_up").click(function insert(image){
$(this).val(image);
});
});
Should be changed to:
function insert(image){
document.querySelector('input[data-caller=' + document.getElementById('exampleModalCenter').dataset.caller + ']').value = image;
}
Also add this:
$('#exampleModalCenter').on('shown.bs.modal', function(e) {
this.dataset.caller = e.relatedTarget.dataset.caller;
});
Then on all of of your form text input add data-caller="". And give each of them a unique value. Like:
<form>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="first">
</div>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="second">
</div>
<div>
<input type="text" class="image_up" data-toggle="modal" data-target="#exampleModalCenter" data-caller="third">
</div>
</form>

HTML TextArea to PHP Array variables

I have a side-projects, I was a little confused about HTML Forms, and it was TextArea to make it array when in PHP Environment (that also making me more confused)
I have file func.php
# define file array
$user_files = isset($_POST['url'])?$_POST['url']:"";
//I dont check for empty() incase your app allows a 0 as ID.
if (strlen($user_files)==url) {
echo 'Error';
exit;
}
$files = explode("\n", str_replace("\r", "", $user_files));
# create new zip object
$zip = new ZipArchive();
also index.html
<form class="download_file" action="func.php" method="post">
<div ng-app="myApp">
<div ng-controller="AppCtrl" align="center">
<textarea id="url" ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="Insert URL (1 URL per Lines)">
</textarea>
</div>
</div><br>
<button type="submit" name="button">
<div class="button">
<div class="container">
<div class="tick">
</div>
</div>
</div>
</button>

php form submit issue with JS button

I have this form
<form role="form" method='post' action='index.php' id='cme'>
<input type="hidden" name="bonval" value="<?php echo $bonval ?>" />
<fieldset>
<h2 class="blink_me" style="color:green;font-size:40px;"><?php echo $bonval ?></h2>
<div class="form-group">
<center>
<div class="g-recaptcha" data-sitekey="siteky"></div>
</center>
</div>
<div class="row">
<center>
<input type="submit" name="claim" class="btn btn-lg btn-success btn-block" value="Claim Now" id="claim">
</center>
</div>
</fieldset>
</form>
I have this javascript to disable button after click
<script>
$(function(){
$('#claim').on('click',function(){
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#cme').submit();
});
});
</script>
and this is my form validation
if(isset($_POST['claim'])) {
$recaptcha = $_POST['g-recaptcha-response'];
if(!empty($recaptcha)) {
# Use the recaptcha function here
$resp = getGoogleRecaptcha();
if($resp['success']) {
# Capture value from the form submit
$bonval = $_POST['bonval'];
# Insert normally
$db->fetchVal("insert into log (`user_id`,`amount`) values (?,?)", array($id, $bonval));
}
} else { ?>
<div class="overlay"><div class="popup" style="background:red;">
<h2>Error</h2>
<a class="close" href="#">×</a>
<div> <center><span class="blink_me">Seems error</span></center></div>
</div></div>
<?php }
}
My issue is button gets disabled but form is not submitted
if user refresh page form keeps getting submitted into database

Edit: sorry, lack of explanation, I read a little fast:
You can completely remove the var $ _POST after insert bdd with unset($_POST['...']);
if(isset($_POST['claim'])) {
//code
$db->fetchVal("insert into log (`user_id`,`amount`) values (?,?)", array($id, $bonval));
unset($_POST['claim']);
//code
}

You should stop the button from submitting form first by replacing the type="submit" by type="button" :
<input type="button" name="claim" class="btn btn-lg btn-success btn-block" value="Claim Now" id="claim">
Hope this helps.

php get input value without clicking a button or submitting it

I have an html code where the value is stored in an input with hidden as its type. I want to use that value and put it in a php variable without clicking button or anything. Just plainly get the value (because I need it when I am going to get a value from sql). MY AJAX CODE DOESN'T WORK... The value i'm trying to get is the number 45, which can be found inside the code below.
Here is my html code (it's inside a modal and the php code is there also):
<div id="CalenderModalEdit" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Case Details</h4>
</div>
<div class="modal-body">
<form id="antoform2" class="form-horizontal calender" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Hearing #</label>
<div class="col-sm-9">
<p style="margin-top: 8px; text-align: justify" id="title_disp"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Case #</label>
<div class="col-sm-9">
<p style="margin-top: 8px; text-align: justify" id="case_id"></p>
<input type="text" class="form-control" id="id_case" value="45">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Complainant (s)</label>
<div class="col-sm-9">
<?php
include ("config.php");
if(isset($_POST['userID'])) {
$uid = $_POST['userID'];
echo $uid;
// Do whatever you want with the $uid
$view = mysqli_query ($conn, "SELECT idCase, lastName, firstName, Case_idcase, Person_idPerson
FROM complainant, person, bar_case
WHERE Person_idPerson = idPerson AND Case_idCase = idCase AND idCase = '$uid';");
//mysqli_close($conn);
while ($line = mysqli_fetch_array($view)) {
?>
?>
<p style="margin-top: 8px; text-align: justify" id="comp"><?php echo $line['firstName'].' '.$line['lastName']?></p>
<?php }} mysqli_close($conn); ?>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose2" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
AJAX SCRIPT:
<script>
$(document).ready(function() {
var userID = $("id_case").attr('id');
//alert($(this).attr('id'));
$.ajax({
type: "POST",
url: "../1-secretary/calendar-hearing.php",
data: { userID : userID },
success: function(data)
{
alert("success!");
}
});
});
</script>
I want to use it in the same page. How can I do it? Please help me. Your help will be much appreciated. Thank you.

Your (and any other) php script just generates HTML on a server where the script runs and then sends this HTML to a browser which runs on a different machine. To read something from an HTML page (which as you remember is in a browser on a different machine) you need to send some data back to the server where your script can intercept it.
The fact that HTML, php and SQL code are in the same file on the server doesn't mean that generated HTML page and php/SQL code are run on the same machine.
So you can't get the value without sending data back to the server where your script is. People were right - you need either AJAX or form submission to get the value.

Display a hidden div after a html form submit to show output

I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo
My requirement is,
hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.
Here is my HTML code:
<div class="main">
<form id="main" name="main" action="#text" method="post">
<div class="input">
<div id="name">
<div class="block">
<div class="input-quest">Your Name</div>
<div class="input-resp"><span><input class="textbox" id="nm" name="nm" type="text" value="" /></span>
</div>
</div>
</div>
<div id="place">
<div class="block">
<div class="input-quest">Your Place</div>
<div class="input-resp"><span><input class="textbox" id="pl" name="pl" type="text" value="" /></span>
</div>
</div>
</div>
</div>
<div class="submit">
<input id="generate" type="submit" name="script" value="generate" />
<input type="submit" id="clear" name="clear" value="clear" />
</div>
</form>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
</div>
It contain the PHP echo codes at output div section.
I have searched for solution in previous questions and tried below methods mentioned there:
1.Added a inline CSS tag for output div to hide it
<div id="output" style="display: none;">
<!-- echo php here -->
</div>
and added JavaScript to call function during submit
$('main').submit(function(){
$('#output').show();
});
It didn't work.
2.Tried with below JavaScript code
$('main').submit(function(e){
$('#output').show();
e.preventDefault();
});
It didn't work.
3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet
<div id="output">
and in stylesheet
#output{
display:none;
}
and used below JavaScript code on submit
$('main').submit(function(){
$('#output').css({
'display' : 'block'
});
});
It didn't work.
Added a onclick function along with the form submit
and submit button code:
<input id="generate" type="submit" name="script" value="generate" onclick="showoutput()"/>
and JavaScript:
showoutput(){
$('#output').slideDown("fast");
}
and with
showoutput(){
$('#output').show();
}
It didn't work.
Please suggest a solution to do this.

I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):
<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
<div class="output">
Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
</div>
<?php } ?>
If you just want to display the name and place in div.output, without actually submitting the form, you could do:
$('#main').submit(function(e) {
e.preventDefault(); // prevent form from being submitted
$('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});
Here's a fiddle

<?php if(isset($_POST['nm'])) { ?>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
<?php } ?>

Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.
PHP Page:
<?php
$name = $_POST['nm'];
$place = $_POST['pl'];
echo "Hello, I am ".$name." and I am from ". $place;
?>
The javascript/jquery would catch that as responseText and then use innerHTML on your .output div to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output

You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.
First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.
add this to the html:
<input type='hidden' name='display' value='display' />
In your php, add:
if (isset($_POST['display']){
echo "make the div here";
}else{
//don't show the div
}