retreive html data into form input using submit button - javascript

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">

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

Why doesn't my POST variable arrive after this.form.submit();? [duplicate]

This question already has an answer here:
Why does this 'onClick disable=true; this.form.submit();' work on one button but not another?
(1 answer)
Closed 6 years ago.
I have a form that submits after a button is pressed. The problem is - the button that has the this.form.submit() function attached doesn't send the POST variable...
<form method= "post" action="timestable_submit.php">
<input type="hidden" name="b" value="<?php echo $f;?>">
<input type="hidden" name="c" value="<?php echo $s;?>">
<input type="submit" name="sub" id="btn" value="<?php echo $d;?>"
onclick="this.disabled=true; this.form.submit();">
<input type="submit" name="sub" id="btn2" value="<?php echo $w1e;?>">
<input type="submit" name="sub" id="btn3" value="<?php echo $w2e; ?>">
</form>
When I assign a variable from the $_POST['sub'] - I get nothing...
Any ideas? It works if I don't have the onclick="this.disable=true; this.form.submit();" line
Working fiddle.
Change button type to button instead of submit because you're submiting the form programmatically using this.form.submit() :
<input type="button" name="sub" id="btn" value="<?php echo $d;?>" onclick="this.disabled=true; this.form.submit();">
And better if you could separate your logic and use submit event :
<input type="submit" name="sub" id="btn" value="<?php echo $d;?>"/>
var form = document.forms[0];
form.addEventListener("submit", function(e){
document.getElementById('btn').disabled=true;
})
NOTE : .disabled=true; has almost no effect here because the page wil be redirected to timestable_submit.php.
Hope this helps.

Pass JavaScript values to PHP

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>

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).

Confirm function that will contain PHP variables

When my user has completed a booking form I want the form to ask them whether they are sure about booking. I think the best way to do this is with a confirm function? But if its not please do tell.
If it is with a confirm function, how do I get the confirm function to reference the values they have set in the form?
Below is the form:
<form class="submit_date" method="post" action="insert.php" id="submit_date">
<p>Date: <input type="text" name="datepicker" id="datepicker" required></p>
<input type="radio" name="bookperiod" id="bookperiod" value="1" required/>1<br>
<input type="radio" name="bookperiod" id="bookperiod" value="2" required/>2<br>
<input type="radio" name="bookperiod" id="bookperiod" value="3" required/>3<br>
<input type="radio" name="bookperiod" id="bookperiod" value="4" required/>4<br>
<input type="radio" name="bookperiod" id="bookperiod" value="5" required/>5<br>
<select class="dropdown" id="bookroom" name="bookroom" required>
<option selected disabled hidden value=''></option>
<?php
for ($x=0; $x<sizeof($rooms_array); $x++)
{
echo "<option value='$rooms_array[$x]'>".$rooms_array[$x]."</option>";
}
?>
</select>
<input class="submit_btn" value="Submit" type="submit" name="Submit";/>
</form>
I need the confirm function to say something like:
"Are you sure you want to book $rooms_array on bookperiod at submit_date"
I STRESS I KNOW HOW TO MAKE A CONFIRM FUNCTION , BUT HOW DO I MAKE THE CONFIRM FUNCTION ECHO MY PHP VARIABLES AS IT IS A JAVASCRIPT FUNCTION
do this
<input class="submit_btn" value="Submit" type="submit" onclick="checkconfirm()"> name="Submit";/>
<script type="text/javascript">
function check confirm() {
var result= confirm('are you sure?');
if (result==true) {
//Logic to delete the item
}else{
//user pressed cancel. Do nothing
}
}
</script>
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Via: Display confirmation popup with JavaScript upon clicking on a link

Categories