Using jQuery to insert PHP variable into form input - javascript

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>

Related

How to make onkeyup works in next row?How to make Javascript works in next row?

I Make CRUD with Php and success.
as usual for show data PHP use while looping.
In the Edit action I used Popup/Modal didn't make a new page for edit, actually my Edit was running smoothly.
But I have a problem with JavaScript for function automatically, when one form/field is filled, the other form/field is filled (actually only one field is automatic).this automatic problem only works on the first row edit action (works smoothly) but on the next row automatically does not work
Javascript doesn't work in while looping, it only works on the first loop, the next loop doesn't work.
I have done various automation methods with Javascript but the results are the same, only Edit the first row, the next row doesn't work. did I do something wrong?
CODE JS(Javascript)
<script type="text/javascript">
function Sremarks() {
if ($('#result').val() != 0) {
var input = parseInt(document.getElementById('input').value);
var result = parseInt(document.getElementById('result').value);
if(input < result){
document.getElementById('remarks').value = "bad";
}else{
document.getElementById('remarks').value = "Good";
}
} else{
document.getElementById('remarks').value = "0";
}
}
</script>
CODE PHP and HTML
here I am using onkeyup = "Sremarks ()" to pass to Function Js like in line Form/Field Edit Input and result
<form action="editmhs.php" method="post" enctype="multipart/form-data">
<!-- Open Php While Looping -->
<?php
$id = $pecah['id'];
$query_edit = mysqli_query($koneksi, "SELECT * FROM axle1 WHERE id='$id'");
while ($row = mysqli_fetch_array($query_edit)) {
?>
<!-- Form/Field Id hidden -->
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<!-- Form/Field Edit Input -->
<div class="form-group">
<label>Input</label>
<input type="number" name="input" id="input" class="form-control" min="0" max="100" value="<?php echo $row['input']; ?>" onkeyup="Sremarks()">
</div>
<!-- Form/Field Edit Result -->
<div class="form-group">
<label>Result</label>
<input type="number" name="result" id="result" class="form-control" min="0" max="100" value="<?php echo $row['result']; ?>" onkeyup="Sremarks()">
</div>
<!-- Form/Field Edit Remarks -->
<div class="form-group">
<label>Remarks</label>
<input type="text" name="remarks" id="remarks" class="form-control" value="<?php echo $row['remarks']; ?>" readonly>
</div>
<!-- Button submit and Close -->
<div class="modal-footer">
<button type="submit" name="upload_ubah" value="Upload" class="btn btn-success">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- Close PHP While Looping -->
<?php
}
?>
</form>

unable to pass value of textarea using javascript to PHP script ECHO

I am trying to get the value of textarea using JavaScript to pass it to PHP without reloading the page.
Please where might I have the issue here ?
This the Javascript to get the value from textarea and transfer it to PHP to be used
function getValue(s){
$.post(
"reply.php",
{
getTxt: s,
},
function(data,status){
$("#ReplyTextField").html(data);
}
);
}
here is the HTML Textarea with reply button
<!-- reply popup -->
<div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<!-- siteModal content-->
<div class="sitemodal-content">
<div class="sitemodal-header">
<button type="button" class="close-popup">×</button>
<h4 class="sitemodal-title">Reply</h4>
</div>
<div class="sitemodal-body">
<form enctype="multipart/form-data" method="Post" action="<?php echo "reply.php?message=" . $row['id'] . "'"; ?>" name="msgform">
<textarea id="ReplyTextField" placeholder="Give your Reply" name="textarea1"></textarea>
</form>
</div>
<div class="sitemodal-footer">
<button type="button" class="popup-btn reply" id="replyButton" name="sendmsg" onclick="getValue()">Reply</button>
</div>
</div>
</div>
</div>
This is the php script in reply.php file i am trying to transfer the data to
<?php
/*include("functions.php");
include("session.php");
require("connection.php");*/
$getTxt= $_REQUEST['getTxt'];
echo $getTxt;
?>
Your PHP is fine. It is the HTML that is the issue. You were not sending the value which throws up an error in php. You have to send the variable in the onclick funtion and then it works.
Here is the Updated HTML file:
function getValue(s){
$.post("reply.php",
{getTxt: s,}, function(data,status){
$("#ReplyTextField").html(data);});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p><div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<!-- siteModal content-->
<div class="sitemodal-content">
<div class="sitemodal-header">
<button type="button" class="close-popup">×</button>
<h4 class="sitemodal-title">Reply</h4>
</div>
<div class="sitemodal-body">
<form enctype="multipart/form-data" method="Post" action="<?php echo `reply.php?message=` . $row['id'] . `'`; ?>" name="msgform">
<textarea id="ReplyTextField" placeholder="Give your Reply" name="textarea1"></textarea>
</form>
</div>
<div class="sitemodal-footer">
<button type="button" class="popup-btn reply" id="replyButton" name="sendmsg" onclick="getValue(document.getElementById('ReplyTextField').value)">Reply</button>
</div>
</div>
</div>
</div>
The issue is that you are not passing any parameter to the getValue() function. I would avoid using the HTML onclick attribute and use a jQuery event handler instead:
$('#replyButton').on('click', function() {
var textareaValue = $('#ReplyTextField').val();
getValue(textareaValue);
};
You should also use the .val() method to set the value of the textarea.
https://api.jquery.com/on/
https://api.jquery.com/val/

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.

How to send href value in tablesorter to dialog modal?

Problem
I have problem in sending/passing href value in tablesorter to my dialog modal.
It's become complicated when the target location is the dialog modal.
Example (table.php)
This is a partial of my code since above it is a PDO PHP query to get my data from database. Important point is at the href code inside foreach
if($stmt->rowCount() > 0){
$r=$stmt->fetchAll();
echo "<table class='tablesorter-dropbox' id='myTable' style='width:97%; table-border: 1'>";
echo "<thead>";
echo "<tr style='text-align: center;'>";
echo "<th style='text-align: center;'>No.</th>";
echo "<th style='text-align: center;'>Conference Name</th>";
echo "<th style='text-align: center;'>Conference Sponsor</th>";
echo "<th style='text-align: center;'>Date (Start)</th>";
echo "<th style='text-align: center;'>Date (End)</th>";
echo "<th style='text-align: center;'>Budget</th>";
echo "<th style='text-align: center;'>Status</th>";
echo "<th style='text-align: center;'>Approve</th>";
echo "<th style='text-align: center;'>Reject</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
//echo "<td><a href='reject.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/remove-icon-png-15.png' width=15px></a></td>";
foreach ($r as $row){
echo "<tr align='center'><td>".$row['id']."</td><td>". $row['conf_name'] ."</td><td>". $row['conf_sponsor'] ."</td><td>". $row['conf_fDate'] ."</td><td>". $row['conf_lDate'] ."</td><td>RM ". $row['conf_budget'] ."</td><td>". $row['conf_status'] ."</td><td><a href='#' onclick='this.href='indexSuperUser.php?idconf=".$row['id']."' role='button' data-toggle='modal' data-target='#login-modal3?idconf=".$row['id']."'><img src='images/good.png' width=15px></a></td><td><a href='#?idconf=".$row['id']."' role='button' data-toggle='modal' data-target='#login-modal4'><img src='pic/remove-icon-png-15.png' width=15px></a></td></tr>";
//$startrow++;
}
echo "</tbody>";
echo "</table>";
}
else{
echo "<p align='center'>Nothing to show you :( I am really sorry for this T_T </p>";
}
Example #2 (dialogmodal.php)
Now here is where i want to display the variable from the table. Just for testing purpose i am trying to display the idconf to see if the id displayed successfully.
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img style="position:relative; LEFT:20px; WIDTH:100px; HEIGHT:100px" id="img_logo" src="images/logofpeNEW2.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Register Super User Form -->
<form id="approved-form">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Approve this event?.</span>
</div>
<input type="text" id="idconf" class="form-control" value="<?php echo $_GET['idconf']; ?>">
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block" style="background-color: green">Approve</button>
</div>
</div>
</form>
<!-- End # Register Super User Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<!--END LOGIN AREAD--------------------------------->
Result
The result? Its either undefined index: idconf or nothing. Means that im trying to send variable like this #?idconf=".$row['id']."....... since if i put like this dialogmodal.php?idconf=".$row['id'].".. my dialog ends up opening another dialog that is weird to say.
Flow
The flow is simple. Start from the table.php where it will grab the data from my database and display using tablesorter plugins. Then it will open at the dialog modal. Right side of the table have approved and rejected. So this two things comes from the href itself. Just like on the picture.
Duplicated?
Maybe yes. but its a little bit different. I give here two link almost the same problem as me:
Dynamically load information to Twitter Bootstrap modal
Send parameter to Bootstrap modal window?
However. My problem a bit slightly difficult i think. Mine is not about show the data when button clicked. But instead, i need to click the button to open the modal dialog first then clicked href button to open each row with unique id.
my stackoverflow account could be blocked at any time since i got many downvoted question. I dont know what happen to people nowadays. So i try to do proper and detailed here. If still downvoted, it will be my last here.. :)
Oh never mind. I got it work out by using from someone. I can't remember the link but credit to him for mentioning about using "data-your variable" and call it using jquery and send it back to the modal dialog id. Like this
<a id='approved' href='#' role='button' data-toggle='modal' data-target='#login-modal3' data-id='".$row['idconf']."' data-confname='".$row['conf_name']."' data-confsponsor='".$row['conf_sponsor']."' data-conffdate='".$row['conf_fDate']."' data-confldate='".$row['conf_lDate']."' data-confbudget='".$row['conf_budget']."' data-confstatus='".$row['conf_status']."' data-useremail='".$row['email']."' data-username='".$row['name']."' data-balanceuser='".$row['balance']."' data-m='".$row['matricNo_fk']."'><img src='images/good.png' width=15px></a>
See how many data i send? Then call it using jquery like this..
$(document).on("click", "#approved", function () {
var idconf = $(this).data('id');
var confname = $(this).data('confname');
var confsponsor = $(this).data('confsponsor');
var conffdate = $(this).data('conffdate');
var confldate = $(this).data('confldate');
var confbudget = $(this).data('confbudget');
var confstatus = $(this).data('confstatus');
var useremail = $(this).data('useremail');
var username = $(this).data('username');
var balanceuser = $(this).data('balanceuser');
var m = $(this).data('m');
After declare this variable, then on the next line of this code, send it to the modal dialog id such as this.
$(".modal-body #idconf").val( idconf );
$(".modal-body #nameconf").val( confname );
$(".modal-body #sponsorconf").val( confsponsor );
$(".modal-body #dateSconf").val( conffdate );
$(".modal-body #dateEconf").val( confldate );
$(".modal-body #budgetconf").val( confbudget );
$(".modal-body #statusconf").val( confstatus );
$(".modal-body #emailuser").val( useremail );
$(".modal-body #nameuser").val( username );
$(".modal-body #balanceuser").val( balanceuser );
$(".modal-body #m").val( m );
$('#addBookDialog').modal('show');
On the modal dialog, use the id mentioned.
<form id="approved-form">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Approve this event?.</span>
</div>
<input type="hidden" id="idconf" class="form-control" value="" disabled>
<input type="text" id="nameconf" class="form-control" value="" disabled>
<input type="text" id="sponsorconf" class="form-control" value="" disabled>
<input type="text" id="dateSconf" class="form-control" value="" disabled>
<input type="text" id="dateEconf" class="form-control" value="" disabled>
<input type="text" id="balanceuser" class="form-control" value="" disabled>
<input type="text" id="budgetconf" class="form-control" value="" disabled>
<input type="text" id="statusconf" class="form-control" value="" disabled>
<input type="text" id="emailuser" class="form-control" value="" disabled>
<input type="text" id="nameuser" class="form-control" value="" disabled>
<input type="hidden" id="m" class="form-control" value="" disabled>
</div>
I am not saying this is efficient in terms of speed or whatever. but it solved my problem and user problem. Case solved

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
}

Categories