We Keep Coding

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

Set Value for HTML Dropdown based on Another HTML Dropdown Selection

I have an HTML dropdown list, that when a value is selected, it displays a table that corresponds to the selection. I also have an Add Button. Inside the Add Button are 2 fields of information that need filled out, one being a dropdown box. Here is what I need but cannot figure out. I want the selected value on the dropdown in my Add Button to be the number that was already selected in the first dropdown. How can I do this?
Here is the code that I have so far:
<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button><br><br>
<div id="dialog-form" title="Add Supplier ID">
<p class="validateTips">All form fields are required.</p>
<!-- Dialog box displayed after add row button is clicked -->
<form>
<fieldset>
<label for="mr_name">MR_ID</label>
<select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
<?php foreach($user->fetchAll() as $user1) { ?>
<option>
<?php echo $user1['MR_ID'];?>
</option>
<?php } ?>
</select><br><br>
<label for="buyer_id">Supplier ID</label>
<input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<!-- Form -->
<form name="myForm" action="">
<!-- Dropdown List -->
<select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
<option selected value="select">Choose a MR_ID</option>
<?php foreach($users->fetchAll() as $user) { ?>
<option data-name="<?php echo $user['MR_ID'];?>">
<?php echo $user['MR_ID'];?>
</option>
<?php } ?>
</select>
</form>
<!-- Table -->
<p>
<div id="table_div">
<table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
<thead>
<tr class="ui-widget-header">
<td>MR ID</td>
<td>Supplier ID</td>
</tr>
</thead>
<?php foreach($users_one->fetchAll() as $supp) { ?>
<tr>
<td class="mr_id"><div id="dropdown_selection"></div></td>
<td class="supp_id"><?php echo $supp['Supp_ID']?></td>
</tr>
<?php } ?>
</table>
</div>

See Events for Select for info on events with Select tag
This can be done with javascript.
Add a change listener to the first dropdown and remove the onChange from the HTML. You can call the updatetable function from within the javascript.
javascript
function bindListeners() {
var elementToBind = document.querySelector('#mr_id');
// Check if the element has loaded
if(elementToBind === undefined) {
// if not, wait 500ms and retry
setTimeout(bindListeners, 500);
}
else
{
// Add the event listeners
elementToBind.addEventListener('change', updateSelection, false);
elementToBind.addEventListener('click', updateSelection, false);
}
}
bindListeners();
function updateSelection(event) {
// Get the value from this select
var selectedValue = event.target.value;
// find the select object that you want to set the value for
var selectObjectToSet = document.querySelector('#mr_id_dialog');
selectObjectToSet.value = selectedValue;
// Call the function that was in the onChange listener
updatetable(this.form);
}
HTML
Add Supplier ID
<div id="dialog-form" title="Add Supplier ID">
<p class="validateTips">All form fields are required.</p>
<!-- Dialog box displayed after add row button is clicked -->
<form>
<fieldset>
<label for="mr_name">MR_ID</label>
<select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
<?php foreach($user->fetchAll() as $user1) { ?>
<option>
<?php echo $user1['MR_ID'];?>
</option>
<?php } ?>
</select><br><br>
<label for="buyer_id">Supplier ID</label>
<input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<!-- Form -->
<form name="myForm" action="">
<!-- Dropdown List -->
<select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
<option selected value="select">Choose a MR_ID</option>
<?php foreach($users->fetchAll() as $user) { ?>
<option data-name="<?php echo $user['MR_ID'];?>">
<?php echo $user['MR_ID'];?>
</option>
<?php } ?>
</select>
</form>
<!-- Table -->
<p>
<div id="table_div">
<table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
<thead>
<tr class="ui-widget-header">
<td>MR ID</td>
<td>Supplier ID</td>
</tr>
</thead>
<?php foreach($users_one->fetchAll() as $supp) { ?>
<tr>
<td class="mr_id"><div id="dropdown_selection"></div></td>
<td class="supp_id"><?php echo $supp['Supp_ID']?></td>
</tr>
<?php } ?>
</table>
</div>
</p>

PINCODE LOGIN PAGE

Im stuck with a project. This is strictly for a company internal employee login page. Not public! For those that might question the security of this form. Although, I am open to hashing the pincode password (SHA-1).
I've setup the code on my jsfiddle PINCODE LOGIN
<body onLoad="emptyCode()" class="hold-transaction login-page">
<!-- Page Content -->
<div class="login-box">
<div class="login-logo">
<b>PINCODE LOGIN</b>
<p class="login-box-msg">Employee Sign-in</p>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<!--<form action="" method="post">-->
<div class="main_panel">
<form action="" method="post">
<div class="input-group">
<input type="text" name="code" maxlength="4" readonly="readonly" class="form-control" placeholder="Enter PIN...">
<span class="input-group-btn">
<button class="btn btn-danger" type="reset" >X</button>
</span>
</div>
<!-- /input-group -->
<table id="keypad" cellpadding="5" cellspacing="3">
<tbody>
<tr>
<td onclick="addCode('1');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>1</span>
</div>
</td>
<td onclick="addCode('2');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>2</span>
</div>
</td>
<td onclick="addCode('3');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>3</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('4');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>4</span>
</div>
</td>
<td onclick="addCode('5');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>5</span>
</div>
</td>
<td onclick="addCode('6');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>6</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('7');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>7</span>
</div>
</td>
<td onclick="addCode('8');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>8</span>
</div>
</td>
<td onclick="addCode('9');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>9</span>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td onclick="addCode('0');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>0</span>
</div>
</td>
</tr>
</tbody>
</table>
<p id="message">ACCESSIGN...</p>
</form>
</div>
<!--</form>-->
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
My goal for this is:
Allow employees to login using a 4 digit pincode and verify
against DB credentials
BONUS: Hash password in DB
Not sure if i would need a function such as " if(isset($_POST['code'])) {", as a separate file.

At first, you close the form tag at the end of the form, wich means nearly your whole page is posted back to your server. You can minify this:
<form action="secret.php" method="post">
<input name="code">
</form>
Now it is posted to the "secret.php" specified in the action tag.
This would look like this:
Secret.php:
<?php
if(isset($_POST["code"])){
if($_POST["code"]=="5473")){
echo "successfully logged in...";
$_SESSION["logged"]=true;
}else{
echo " wrong code";
}
}else{
echo "404: this is not accessible for you";
}
?>
This checks if the code is posted and if its 5473. if its correct, it sets a session wich helps you identifying the user.
Simply do:
<?php
if(isset($_SESSION["logged"])){
echo " logged in user...";
}else{
echo "not for you.please log in";
die();
}
?>

I updated my code. This function seems to work great!
function loginEmployee() {
global $connection;
$pincode = $_POST["code"];
if(isset($_POST["code"])){
$result = mysqli_query($connection,"SELECT * FROM users WHERE user_pin = '$pincode'");
if(mysqli_num_rows($result) != 0) {
echo "<p class='alert-successs'>successfully logged in...</p>";
header("Location: ../repairs.php");
die();
$_SESSION["logged"]=true;
}else{
header("Location: ../login_fail.php");
die();
}
}else{
echo "404: this is not accessible for you";
}

Load data by "id" for edit form using javascript in codeigniter

I am trying to pass data from a table to edit a form, using JavaScript. The problem is that I am a complete newbie at JavaScript. Can someone at least help me by giving me an example of what the code should be?
I am not doing AJAX, just simple load data with JavaScript
my model :
function edit($a)
{
$d = $this->db->get_where('crud', array('idcrud' => $a))->row();
return $d;
}
my controller :
function edit()
{
$kd = $this->uri->segment(3);
if ($kd == NULL) {
redirect('Chome');
}
$dt = $this->Mcrud->edit($kd);
$data['fn'] = $dt->firstname;
$data['ln'] = $dt->lastname;
$data['ag'] = $dt->age;
$data['ad'] = $dt->address;
$data['id'] = $kd;
$this->load->view('Vhome', $data);
}
And this is the button in the view, "Vhome", that I use as edit button :
<button class="btn btn-warning btn-xs" onclick="edit(<?php echo $row->idcrud; ?>)"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
That button will call JavaScript edit function that should call the data by "idcrud" :
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// I dont know what must i do here to call my data in table crud by "idcrud"
}
And this is the form where the data gets passed to :
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Surat Keluar</h3>
</div>
<div class="modal-body form">
<form action="Chome/edit" method="post" id="form" class="form-horizontal">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label for="fn" class="control-label col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="fn" name="fn" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ln" class="control-label col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ln" name="ln" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ag" class="control-label col-md-3">Age</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ag" name="ag" placeholder="age">
</div>
</div>
<div class="form-group">
<label for="ad" class="control-label col-md-3">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" id="ad" name="ad" placeholder="Address">
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="mit" class="btn btn-primary" value="Submit">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Can someone give me an example of what must I write in the JavaScript function edit?
edit :
This is full code of my view Vhome.php

Ok, it's quite easy. First put some identifiers on this section:
foreach(...){
...
<tr id="idcrud<?php echo $row->idcrud;?>">
<td class="idcrud"><?php echo $row->idcrud; ?></td>
<td class="fn"><?php echo $row->firstname; ?></td>
<td class="ln"><?php echo $row->lastname; ?></td>
<td class="age"><?php echo $row->age; ?></td>
<td class="addr"><?php echo $row->address; ?></td>
...
</tr>
And in your edit() function:
function edit(idcrud)
{
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('.modal-title').text('Edit Data'); // Set Title to Bootstrap modal title
// MY EDIT:
$("input #fn").val($("td #idcrud"+idcrud + " .fn").html());
$("input #ln").val($("td #idcrud"+idcrud + " .ln").html());
//and so on
}
Some observation: Inside your form <input type="hidden" value="" name="id"/> will also need an id attribute : <input id="id" type="hidden" value="" name="id"/>. Then you can update it's value with: $("input #id").val(idcrud); in the edit() function.

keeping bootstrap modal active

hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>

Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>