Pass JavaScript values to PHP - javascript

I need to pass JavaScript values and insert them in database via PHP. I have tried over the URL but it does not work.
Two variables needs to be inserted.
All values from database are printed in table, then I make selection.
The name of this file is items.php.
<td><input type="text" class="form-control" id="quantity" placeholder="" ></td>
<td><center><button type="submit" onclick="myFunction()" value="<?php echo 'R-' . $id_print ;?>" id="item"> <i class="icon-cart"></i></button></center></td>
I use this script to get values:
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("quantity").value;
var y = document.getElementById("item").value;
window.location.href = "items?w1=" + x + "&w2=" + y;
}
</script>
I do not know why script does not redirect to another URL with values from the script.
I get both values when debugging.

If a <button> element has type="submit", clicking it submits the form, and therefore prevents execution of JavaScript click event handler assigned to this element. You should change its type to button, so it won't submit the form.
Corrected code:
<td><input type="text" class="form-control" id="quantity" placeholder="" ></td>
<td><center><button type="button" onclick="myFunction()" value="<?php echo 'R-' . $id_print ;?>" id="item"> <i class="icon-cart"></i></button></center></td>

You should use html-forms.
Because input-values are sent automatically when submit.
Look like this (not tested):
<!-- your html -->
<form action="items" method="post">
<!-- your table -->
<td><input type="text" class="form-control" id="quantity" name="w1" /></td>
<td><input type="text" class="form-control" id="item" name="w2" value="<?php echo 'R-' . $id_print ;?>" onclick="this.form.submit()" /></td>
</form>

Related

How can i get HTML input to PHP without submitting?

Basically, i got a form/submit form, but it doesn't post to my site since it's a paypal payment gateway but i need a value from one of the text input fields how can i accomplish this without post/get? I heard you can do it with JS, i tried some JS code but it didn't really work
PAYPAL_URL is a defined variable in config_payment.php that's just a PayPal URL.
My code:
<form action="<?php echo PAYPAL_URL; ?>" method="post">
<div class="inform">
<fieldset>
<div class="fakeform">
<table class="aligntop">
<tbody>
<tr>
<th scope="row">Username</th>
<td><input class="payment-field" id="username" type="text" name="username" value="" maxlength="80"></td>
</tr>
<tr>
<th scope="row">User ID</th>
<td><input class="payment-field" id="userid" type="text" name="userid" value="<?php echo $pun_user['id'] ?>" maxlength="80"></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><input class="payment-field" id="email" type="email" name="email" value="" maxlength="80"></td>
</tr>
<tr>
<th scope="row">Plan</th>
<td>
<select name="validity" onchange="getSubsPrice(this);" class="payment-field">
<option value="1" selected="selected">1 Month - $20</option>
</select>
</td>
</tr>
<script type="text/javascript">
var getuserid=document.getElementById('userid').value;
</script>
<?php
$phpVar = "<script>document.writeln(getuserid);</script>";
?>
<!-- Identify your business so that you can collect the payments -->
<input type="hidden" name="business" value="<?php echo PAYPAL_ID; ?>">
<!-- Specify a subscriptions button. -->
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<!-- Specify details about the subscription that buyers will purchase -->
<input type="hidden" name="item_name" value="<?php echo $itemName; ?>">
<input type="hidden" name="item_number" value="<?php echo $itemNumber; ?>">
<input type="hidden" name="currency_code" value="<?php echo PAYPAL_CURRENCY; ?>">
<input type="hidden" name="a3" id="paypalAmt" value="<?php echo $itemPrice; ?>">
<input type="hidden" name="p3" id="paypalValid" value="1">
<input type="hidden" name="t3" value="M">
<!-- Custom variable user ID -->
<input type="hidden" name="custom" value="<?php echo $phpVar; ?>">
<!-- Specify urls -->
<input type="hidden" name="cancel_return" value="<?php echo PAYPAL_CANCEL_URL; ?>">
<input type="hidden" name="return" value="<?php echo PAYPAL_RETURN_URL; ?>">
<input type="hidden" name="notify_url" value="<?php echo PAYPAL_NOTIFY_URL; ?>">
</div>
</tbody>
</table>
<div class="centered">
<input class="buy-btn" type="submit" value="Buy Subscription">
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
As you can see i tried some JS and PHP merging, but it's still 0 when i retrieve it and post it
<script type="text/javascript">
var getuserid=document.getElementById('userid').value;
</script>
<?php
$phpVar = "<script>document.writeln(getuserid);</script>";
?>
Please if anyone can point out what im doing wrong, im eternally greatful thanks.
PHP runs before any JavaScript executes so what you want to do ins not possible.
Seems like you want the value to update another field if it changes.
<input type="hidden" name="custom" value="<?php echo $pun_user['id'] ?>">
and add a simple script
document.querySelector("#userid").addEventListener("change", function(){
document.querySelector('[name="custom"]').value = this.value;
});
Simpler solution, get rid of the hidden element and rename the userid field.
<td><input class="payment-field" id="userid" type="text" name="custom" value="<?php echo $pun_user['id'] ?>" maxlength="80"></td>
A better approach in my opinion would be to use your server as the middle man between the 'User' and 'PayPal'.
That is, instead of the User submitting directly to PayPal, you could have the User submit to your server instead. With that, you have access to that input field you really wanted and you're able to also validate that form.
Finally, your server would resubmit the same request to PayPal, receive the response, perform other necessary operations, and send it back to the User.
i.e
User -- PayPal request ---> Server
Server -- validate form, get that input field you want, resubmit request ---> PayPal
PayPal -- PayPal response---> Server
Server -- perform some operations i.e. saving to database, send PayPal response---> User

JS not running inside modal after dynamically change of it's id

I'm using bootstrap modal and I'm calling a autocomplete function inside of it, it all works well when it's set like this:
Button that has a data-target to call the id of the modal:
data-target="#modalAdicao"
And the div with the id set to match the data-target:
id="modalAdicao"
But because it's called inside a PHP foreach and I need keep the information, I have to set the id of the modal like the id of the mysql line I'm dealing with, like this:
data-target="#modalAdicao<?php echo htmlspecialchars($idModal); ?>"
And:
id="modalAdicao<?php echo htmlspecialchars($idModal); ?>"
After this, the information is kept but the js stops working, it's like I never called it, but it's there, like it always been:
<script src="js/procura-paciente.js"></script>
Anyone can help?
When modal opening, the id is changed and the modal is re-drawn. But the js event is defined.
Try to use this
$(document).on('input','.busca', limpaCampos);
The for loop generate many #busca, the id is unique. Change to use class instead. For example
php form
<form id="novoAgendamento" method="POST" action="include/novo_agendamento.php">
<div class="form-inline">
<div class="form-group">
<label for="busca" class="sr-only">Identidade</label>
<input type="text" id="busca" data-id="<?php echo htmlspecialchars($idModal); ?>" placeholder="Identidade" name="rgPaciente" class="mx-sm-69 form-control busca" required>
</div>
<div class="form-group">
<label for="nascimentoPaciente" class="sr-only">Nascimento</label>
<input type="text" id="nascimentoPaciente" placeholder="Nascimento" name="nascimentoPaciente" class="mx-sm-69 form-control" required>
</div>
</div>
<div class="form-group">
<label for="nomePaciente"></label>
<input type="hidden" name="nomePaciente" class="form-control nomePaciente">
<input type="hidden" name="cpfPaciente" class="form-control cpfPaciente">
<input type="hidden" name="horaPaciente" value="<?php echo htmlspecialchars($horarios[$i]); ?>" class="form-control horaPaciente">
<input type="hidden" name="dataPaciente" value="<?php echo htmlspecialchars($data_agendamento_convert); ?>" class="form-control dataPaciente">
<input type="hidden" name="medicoPaciente" value="<?php echo htmlspecialchars($medico_completo); ?>" class="form-control medicoPaciente">
<input type="text" placeholder="Nome do Paciente" class="form-control nomePaciente2" disabled="">
<label for="observacaoPaciente"></label>
<input type="text" name="observacaoPaciente" placeholder="Observação" class="form-control" required>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Fechar</button>
<button type="submit" class="btn btn-primary">Agendar</button>
</div>
</form>
js
$(function() {
$('#tableteste').on('input', '.busca', function(){
var busca = $(this).val();
var form = $(this).parents().eq(2);
if(busca == ""){
form.find('.nomePaciente').val('');
form.find('.nomePaciente2').val('');
form.find('.rgPaciente').val('');
form.find('.nascimentoPaciente').val('');
form.find('.cpfPaciente').val('');
}
});
.....
});

retreive html data into form input using submit button

i have created a form for payment and retrieved data from database to the input fields. my html is below:
<table>
<form name="postForm" action="form_process.php" method="POST" >
<tr><td><input type="hidden" name="txnid" value="<?php echo $txnid=time().rand(1000,99999); ?>" /></td></tr>
<tr><td>amount</td><td><input type="text" name="amount" value="<?php echo $_GET['id'];?>" /></td></tr>
<tr><td>Name</td><td><input type="text" name="firstname" value="<?php echo $user_name; ?>" /></td></tr>
<tr><td>email</td><td><input type="text" name="email" value="<?php echo $_SESSION['email']; ?>" /></td></tr>
<tr><td>phone</td><td><input type="text" name="mobile" value="<?php echo $user_mobile; ?>" /></td></tr>
<tr><td>productinfo</td><td><input type="text" name="productinfo" value="" /></td></tr>
<tr><td><input type="hidden" name="surl" value="success.php" size="64" /></td></tr>
<tr><td><input type="hidden" name="furl" value="fail.php" size="64" /></td></tr>
<tr><td><input type="submit" /></td><td><input type="reset" /></td></tr>
</form>
</table>
i have the following design for my website for customers to choose plans. when the user clicks the paynow button, they are redirected to this form.
when the use clicks the button,the corresponding amount should be added to the input field automatically. if its 400 the input should be 400 or 300 if 300. how can i do this inside submit button?
So you need to perform an click function on button. Your 3 buttons may have a data attribute price mentioning the value like
<input type="button" data-price="300">
By acessing the data attribute you fill the input field.
$('.button').click(function(){
$('input[name="amount"]').val($(this).data(price));
});
Instead of Submit You can give input type as Button like plan1,plan2,plan3 and create onClick function for each button for example
<button onclick="plan1()">Plan1</button>
<p id="plan1">Plan1 contents</p>
<script>
function plan1() {
document.getElementById("plan1").innerHTML = "Document Data";
}
like wise
Add the following class to your 3 sections:
class="month"
Give that input field an ID where you want the result to be outputed: e.g: <input type="text" name="productinfo" id="productinfo">
Add following script in your JavaScript file:
const month = document.querySelectorAll('.month');
const productInfo = document.getElementById('productinfo');
month.forEach((m) => m.addEventListener('click', (e) => productInfo.value = m.getAttribute('data-month')));
data-month contrains the value. In this case 100, 200, 300.
const month = document.querySelectorAll('.month');
const productInfo = document.getElementById('productinfo');
month.forEach((m) => m.addEventListener('click', (e) => productInfo.value = m.getAttribute('data-month')));
<input class="month" type="button" value="PLAY NOW" data-month="100">
<input class="month" type="button" value="PLAY NOW" data-month="200">
<input class="month" type="button" value="PLAY NOW" data-month="300">
<input type="text" id="productinfo">

Goes back to modal after pressing submit

Hey guys I'm currently having problems with my Modal. As I register a member, it doesn't go back to the modal after successfully registering it. I believe it has something to do with scripts. Here's the code:
Add Member
<!-- Add Member Modal -->
<div id="addMemberModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Member</h4>
</div>
<div class="modal-body">
<div class="col-md-6 col-sm-6 no-padng">
<div class="model-l">
<form name="registration" method="post">
<table border="0" width="500" align="center" class="demo-table">
<div class="message"><?php if(isset($message)) echo $message; ?></div>
<tr>
<td><p class="textColor">First Name:</p></td>
<td><input type="text" class="demoInputBox" name="firstName" placeholder="First Name" value="<?php if(isset($_POST['firstName'])) echo $_POST['firstName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Family Name:</td>
<td><input type="text" class="demoInputBox" name="lastName" placeholder="Family Name" value="<?php if(isset($_POST['lastName'])) echo $_POST['lastName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Contact</td>
<td><input type="text" class="demoInputBox" name="contact" placeholder="Contact No." value="<?php if(isset($_POST['contact'])) echo $_POST['contact']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Email</td>
<td><input type="text" class="demoInputBox" name="email" placeholder="Email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Gender</td>
<td><input type="radio" name="gender" value="M" <?php if(isset($_POST['gender']) && $_POST['gender']=="Male") { ?>checked<?php } ?>><p class="textColor"; required>Male</p>
<br><input type="radio" name="gender" value="F" <?php if(isset($_POST['gender']) && $_POST['gender']=="Female") { ?>checked<?php } ?>><p class="textColor"; required>Female
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div>
<input type="submit" name="submit" value="Add Member" class="btnRegister">
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm open to receiving answers and learning lessons from you guys as well because Boostrap Modal isn't being taught in our school. I'll be very happy if somebody will help me with this. Thank you so much! :)
First thing:
I really don't understand why you have used value="<?php echo $_POST['value']?>" with every input type what it does is, it fills form input with the submitted data. If you remove this value="<?php echo $_POST["firstName"] ?>" from every input type, you will only need to trigger the modal using the following code.
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
//check if form is submmited
if(test){
$("#addMemberModal").modal("show");
}
});
</script>
If You still don't want to remove value="<?php echo $_POST['value']?>".Then try the following:
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
// function for clearing input
$.clearInput = function (modal) {
$(modal).find('input[type=text], input[type=radio]').val("");
};
//check if form is submmited
if(test){
// //show the modal
$("#addMemberModal").modal("show");
//on modal show clear the inputs
$("#addMemberModal").on("shown.bs.modal",function(){
$.clearInput(this);
});
}
});
</script>
For any of the above case to work you also need to include Jquery in head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
NOTE: Above code should work as per your requirement but this is not a recommended method. If you want to add new member information again and again, you should submit the data via JQuery or Ajax post and on successful submission should reset the form, instead of reloading the entire page.

How to get value of an input (checkbox input) in auto generated forms that displayed as table rows?

I generate table from database, assign each cell as checkbox value, group each row as form and display them all as table refer to [this].1 How I can get particular cell value when i click on the button since each form (row) have a same id. I want to pass the value as query parameter to update the database table. I have searched for similar technique and still not find the solution.
This code is within a cursor fetching loop:
<form class="tr" id="barisn" method="post" action="">
<span class="td"><input type="checkbox" name="id" value="<?php $data[0]?>"/><label for="id"><?php echo $data[0]?></label></span>
<span class="td"><input type="checkbox" name="name" value="<?php $data[1]?>" /><label for="name"><?php echo $data[1]?></label></span>
<span class="td"><input type="checkbox" name="gender" value="<?php $gender?>" /><label for="gender"><?php echo $gender?></label></span>
<span class="td"><input type="checkbox" name="sender" value="<?php $data[8]?>" /><label for="sender"><?php echo $data[8]?></label></span>
<span class="td"><input type="checkbox" name="date" value="<?php $data[5]?>" /><label for="date"><?php echo $data[5]?></label></span>
<span class="td"><input type="checkbox" name="time" value="<?php $data[6]?>" /><label for="time"><?php echo $data[6]?></label></span>
<span class="td"><input type="checkbox" name="state" value="<?php $state?>" /><label for="state"><?php echo $state?></label></span>
<div class="td">
<button class="btn-rawuh" type="submit" form="barisn" value="Rawuh">Rawuh</button>
<button class="btn-tundha" type="submit" form="barisn" value="Tundha">Tundha</button>
<button class="btn-mlebet" type="submit" form="barisn" value="Mlebet">Mlebet</button>
</div>
</form>
You have to put anchor tag instead of button like this
Edit
when you click on edit button then page will redirect to edit.php(you have to create new php file) then get the id from url :
echo $_GET method
then u will get the details of that particular row using id (using query).

Categories