Result POST Submit inside php form without refresh - javascript

i just combine some code to generate some random string, searching from stackoverflow and googling.
How do i get result instantly without page going refresh.
when i press button generate.
here is my code
<?php
function randomString($length = 5) {
$str = "";
$characters = array_merge(range('A','Z'), range('0','9'));
$max = count($characters) - 1;
for ($i = 0; $i < $length; $i++) {
$rand = mt_rand(0, $max);
$str .= $characters[$rand];
}
return $str;
}
?>
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
<?php
$randomprivate = randomString();
if (isset($_POST['submit']))
{
$result = $_POST['firstname']."-".$_POST['lockercode']."-".$randomprivate;
}
?>
<form action="#" method="post">
First name:<br>
<input type="text" name="firstname">
<br>
Locker ID:<br>
<input type="text" name="lockercode">
<br><br>
<input type="submit" name="submit" value="Generate Secret">
<br>
Your Secret Identifier:<br>
<input type="text" value="<?php if (isset($result)) echo $result ?>" readonly>
<br><br>
<button onclick="goBack()">Go Back</button>
</form>

<script>
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
document.getElementById("mytext").value = text;
}
</script>
<form action="#" method="post">
First name:<br>
<input type="text" name="firstname">
<br>
Locker ID:<br>
<input type="text" name="lockercode">
<br><br>
<input type="submit" name="submit" value="Generate Secret" onclick="makeid()">
<br>
Your Secret Identifier:<br>
<input id="mytext" type="text" readonly>
<br><br>
<button onclick="goBack()">Go Back</button>
</form>

Related

How can I prevent the second forms submit button from removing data from the first form while using the the window.history.pushState function?

I was advised to use the windows.history.pushState function in order to be able to sustain the information the user enters into the text boxes and be able to use the browser's reload this page button if they elected to do so, this function works just fine with just one form, but I've added a second form and the submit button on the second form removes the data from the first form once the user presses it.
<?php
function getDistance($addressFrom, $addressTo, $unit){
//Change address format
$formattedAddrFrom = str_replace(' ','+',$addressFrom);
$formattedAddrTo = str_replace(' ','+',$addressTo);
//Send request and receive json data
$geocodeFrom = file_get_contents('http://maps.google.com/maps/api/geocode/json?
address='.$formattedAddrFrom.'&sensor=false');
$outputFrom = json_decode($geocodeFrom);
$geocodeTo = file_get_contents('http://maps.google.com/maps/api/geocode/json?
address='.$formattedAddrTo.'&sensor=false');
$outputTo = json_decode($geocodeTo);
//Get latitude and longitude from geo data
$latitudeFrom = $outputFrom->results[0]->geometry->location->lat;
$longitudeFrom = $outputFrom->results[0]->geometry->location->lng;
$latitudeTo = $outputTo->results[0]->geometry->location->lat;
$longitudeTo = $outputTo->results[0]->geometry->location->lng;
//Calculate distance from latitude and longitude
$theta = $longitudeFrom - $longitudeTo;
$dist = sin(deg2rad($latitudeFrom)) * sin(deg2rad($latitudeTo)) +
cos(deg2rad($latitudeFrom)) * cos(deg2rad($latitudeTo)) *
cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.8515;
$unit = strtoupper($unit);
if ($unit == "K") {
return round($miles * 1.609344, PHP_ROUND_HALF_UP).' km';
}
else if ($unit == "N") {
return round($miles * 0.8677, PHP_ROUND_HALF_UP).'';
}
else {
return round ($miles).'';
}
}
$distanceTotal = null;
$addressFrom = null;
$addressTo = null;
if(!empty($_GET['addrFrom'])) {
$addressFrom = $_GET['addrFrom'];
}
if(!empty($_GET['addrTo'])) {
$addressTo = $_GET['addrTo'];
}
if(!empty($_GET['distanceTotal'])) {
$distanceTotal = $_GET['distanceTotal'];
}
if (!empty($_GET['addrFrom']) && !empty($_GET['addrTo'])) {
$distanceTotal = getDistance($addressFrom, $addressTo, "N");
$distanceTotal = sprintf('%0.2f',round($distanceTotal,2));
}
$success = false;
?>
<?php
$selected='';
function get_options($select){
$rate=array('Economic Rate'=>3.00,'Standard Rate'=>4.00,'Express
Rate'=>5.00,'Quantumtheory'=>6.00);
$option='3.00';
foreach ($rate as $key_rate => $value_rate){
if($select==$value_rate){
$option.='<option value="'.$value_rate.'"selected>'.$key_rate.'</option>';
}
else{
$option.='<option value="'.$value_rate.'">'.$key_rate.'</option>';
}
}
return $option;
}
if(isset($_POST['rate'])){
$selected=number_format((float)$_POST ['rate'], 2,'.','');
}
?>
<!DOCTYPE html>
<html>
<head></head>
<body>
<div align="center">
<script>
if(typeof window.history.pushState == 'function') {
window.history.pushState({}, "Hide", "<?php echo
$_SERVER['PHP_SELF']; ?>");
}
</script>
<form method="get" name"lion" id"blue" >
<p class="distanceTotal">
<div id="d">
<p><b>Adress From<b>
<input type="text" name="addrFrom" id"fred" value="<?php echo $addressFrom;
?>" />
</p>
<p><label>Adress To</label><b>
<input type="text" name="addrTo" id="chris" value="<?php echo $addressTo; ?
>" />
</p>
<label>Total Miles<label><b>
<input type="text" id="distanceTotal" name="distanceTotal" value="<?php echo
$distanceTotal; ?>" >
<p>
<input type="submit" name="calc_1" value="Calculate Distance" />
</p>
</div>
</p>
</form>
<form method="POST" name"tiger" id="black" />
<p>
<div>
<select name="rate">
<option value="<?php echo get_options($selected); ?>" /></option>
</select>
<input type='submit' id='submit_2' name="calc_2" value='Submit' />
<input type="text" id="rateTotal" name="rat" width="110px" value="<?php echo
$selected; ?>" /><b><b><label>Per Mile</label>
</div>
</p>
</form>
</div>
</body>
</html>

not insert into particular field and parrticular name

i want to insert picture in particular name but there is no insert and some facing error
my table like this
how can insert pic in front of particular name
config.php file is
<?php
session_start();
$db = new mysqli('localhost','root','','dharmesh');
?>
and code is here :
<?php
include_once('config.php');
if(isset($_POST['family_member_btn'])) {
$family_member = $_POST['family_member'];
}
if(isset($_POST["submit4"])) {
for($i=0;$i<$_POST['num'];$i++) {
$insert = $db->query("INSERT into `multiple_insert` (`f_name`,`m_name`,`l_name`,`birth_date`) values ('".$_POST['f_name'][$i]."','".$_POST['m_name'][$i]."','".$_POST['l_name'][$i]."','".$_POST['b_date'][$i]."')");
if($insert) {
echo "<script>alert('insert successfully');</script>";
} else {
echo "<script>alert('!!!insert unsuccessfully');</script>";
}
}
}
if(isset($_POST["upload"])) {
for($i=0; $i<$_POST['img'];$i++) {
$imag = $_FILES['f_name_pic']['name'][$i];
$tmp = $_FILES['f_name_pic']['tmp_name'][$i];
$dir = "images/".$imag;
move_uploaded_file($tmp,$dir);
$query = $db->query("UPDATE `multiple_insert` SET `picture`='$dir' WHERE f_name='".$_POST['f_name'][$i]."' where user_id='1'");
}
}
?>
<html>
<head>
<title>
</title>
</head>
<body>
<form method="post" action="">
<?php
$select = $db->query("SELECT * from multiple_insert where user_id='1'");
while($select_f_name = $select->fetch_assoc()){
echo "<input type='hidden' value='1' name='img' />";
echo "<p style='background-color:red;color:yellow;width:5%;'>".$select_f_name['f_name']."</p>";
echo "<span><input type='file' name='f_name_pic[]' /></span><br><br>";
}
echo "<button name='upload'>Uplaod</button><br><br>";
?>
<label><font size="2">HOW MANY MEMBER IN YOUR FAMILY ?</font></label><br><br>
<input type="text" name="family_member" class="form-control" />
<button type="submit" name="family_member_btn" class="btn btn-lg btn-info" /><span>SUBMIT</span></button><br><br>
<?php
for($i=1;$i<=$family_member;$i++) {
?>
<input type="hidden" value="<?php echo $family_member;?>" name="num" />
<label><b><?php echo "RECORED # ".$i;?></b></label><br>
<label><font size="2">First Name</font></label>
<input type="text" name="f_name[]" class="form-control" /><br>
<label><font size="2">Middle Name</font></label>
<input type="text" name="m_name[]" class="form-control" ><br>
<label><font size="2">Last name</font></label>
<input type="text" name="l_name[]" class="form-control" /><br>
<label><font size="2">birthdate</font></label>
<input id="datepicker3" class="form-control" name="b_date[]" type="text" />
<hr style="border:solid 2px rgba(0,0,0,0.2);">
<?php } ?>
<button class="btn btn-info btn-cons from-left pull-right" type="submit" name="submit4">
<span>SUBMIT</span>
</button>
</form>
</body>
</html>
how can i done this please send me updated code for this...
You cannot do that! The interface you are looking at, is phpMyAdmin---unless you are willing to hack the core code (HIGHLY NOT RECOMMENDED TO MODIFY CORE CODE OF ANY PROJECT!).

How to call php function on submit on the same page while action redirects to another page

i have a problem. I want to execute a php function on submit but the php function HAS to be on the same page because of a multi dimensional array foreach loop. So in easy terms input type="submit" action="post only $orderid to ideal.php" onclick="phpFunction on same page"
Here is my code:
$total =0;
$b = 0;
$items = array();
foreach ($_SESSION["cart_products"] as $cart_itm)
{
$product_qty = $cart_itm["product_qty"];
$pid = $cart_itm["product_code"];
$results = mysql_query("SELECT * FROM Products WHERE ProductID = '".$pid."'");
while($row = mysql_fetch_array ($results)) {
$naam = $row["ProductName"];
$liters = $row["ProductLiters"];
$kleur = $row["ProductColor"];
$product_price = $row["ProductPrice"];
$beschrijving = $row["ProductDescription"];
$image = $row["ProductImage"];
$merk = $row["SupplierID"];
}
$items[] = array('pid' => $pid, 'qty' => $product_qty);
$subtotal = ($product_price * $product_qty);
$total = ($total + $subtotal);
?>
<div class="'.$bg_color.'">
<h1 class="ptitel" id="ptitel"><?= $naam ?></h1>
<p class="prijs" id="prijs">€<?= $product_price ?> x <?= $product_qty ?></p>
<p class="verzenden">Geen verzendkosten binnen Nederland</p>
<p id="pinfo"><?= $beschrijving ?></p>
<div id="liter">
<p class="text">Liters: <?= $liters ?></p>
</div>
<div id="kleur">
<p class="text">Kleur: <?= $kleur ?></p>
</div>
</div>
<?php
}
?>
</div>
<div class="left">
<?php
---------THIS HAS TO BE EXECUTED-----------
$orderid = mt_rand(100000,900000);
foreach ($items as $key => $value) {
mysql_query("INSERT INTO Bestellingen (pid, qty, orderid) VALUES ('".$value['pid']."', '".$value['qty']."', '".$orderid."')");
}
------------------END----------------------
?>
<form method="post" action="test.php">
<input type="text" name="realname" id="name" placeholder="Volledige naam" required/>
<input type="text" name="postcode" id="postcode" placeholder="Postcode" required/>
<input type="text" name="adres" id="adres" placeholder="Straatnaam+huisnummer" required/>
<input type="text" name="plaats" id="plaats" placeholder="Plaats" required/>
<input type="tel" name="telefoon" id="telefoon" placeholder="Mobiel nummer" required/>
<input type="email" name="email" id="email" placeholder="mail#voorbeeld.com" required/>
<textarea name="Message" placeholder="Heeft u wat te vertellen?"></textarea>
<input type="text" name="discount" id="discount" placeholder="Kortingscode"/>
<input type="submit" name="betaal" class="knop" value="BETALEN €<?= $total ?>" />
</form>
1. you can use ajax to post form date to any page.
2. you can use js to update action in form tag according to you convenience.
Extra suggestion : use tag <?php ?>

JavaScript add remove fields in dynamically generated forms

One example on how to use JavaScript to add remove fields in dynamically generated forms.
<h3>javascript add remove fields in dynamically generated forms</h3>
<br>
modification of http://www.quirksmode.org/dom/domform.html
<br>
<br><br>
<?
$action_url = {form action here};
?>
<script type="text/javascript">
var i = 1;
function addCost(cost_no){
cn = cost_no;
//max nubmer of fields, for all cases together
if (i <= 300){
i++;
ident = 'cost['+cn+']['+i+']';
var div = document.createElement('div');
//div.style.width = "300px";
//div.style.height = "50px";
//div.style.color = "white";
div.setAttribute('class', 'myclass');
div.innerHTML = '<input type="text" \n\
name="'+ident+'" \n\
id="'+ident+'" \n\
> \n\
<input type="button" \n\
value="-" \n\
onclick="removeKid('+cn+', this)"\n\
>';
document.getElementById('kids'+cn+'').appendChild(div);
}
}
function removeKid(cost_no, div) {
//alert(test);
cn = cost_no;
document.getElementById('kids'+cn+'').removeChild( div.parentNode );
i--;
}
</script>
<form action="<?= $action_url;?>" method="post" >
<?
for ($cost_id=0; $cost_id<=10; $cost_id++)
{
echo "The form id is : $cost_id <br>";
?>
<div id="kids<?= $cost_id; ?>">
<input type="button"
id="add_cost<?= $cost_id; ?>"
onClick="addCost(<?= $cost_id; ?>)"
value="Add field:<?= $cost_id; ?>"
/>
</div>
<br>
<?
}
?>
<br>
<input type="submit" name="submit" value="submit" />(limit 300)
</form>

Javascript Add New Input Field in Increasing Order

I'm having trouble getting my javascript to add a variable to getElementById. What I'm doing is allowing the users to have 10 authors per post. The script shows the authors already entered in the system and now I'm trying to allow them to add more input fields only to the point that 10 fields show up. Here is the code I have so far:
$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
$showauthor = $getauthorsrow['author'];
$authorid = $getauthorsrow['ID'];
echo "<input type='text' value='$showauthor' name='authorname[]'>
<input type='hidden' value='$authorid' name='authorid[]'><br><br>";
$y++;
}
$newy=$y-1;
?>
//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
function addInput<?php echo $i; ?>() {
if (fields != 10) {
//HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
//So if it's the first post and the new field divs start a 5
//Then it should getElementByid('text05') and continue on.
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
}
</script>
//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
echo "<div id='text".$i.$w."'></div>";
$w++;;
}
//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>
$i is the post number starting from 0. The php to make the divs works fine. I'm just getting null for the getElementById in the javascript. What am I getting wrong here?
HTML Output Example:
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform0.add0.disabled=true;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
</form>
Try assigning that concatenated string to a JS variable first, then calling the function:
if (fields != 10) {
var currentText = 'text<?php echo $i; ?>' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
I need to add the $i to the fields variable in the javascript. With multiple files it was doing multiples of the same variable...i works.
Hi I have modified your code for html and JavaScript.
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
<input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
<input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
<input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
<input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
<input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
function addInput0() {
if (fields != 10) {
var currentText = 'text0' + fields;
document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
fields += 1;
} else {
var myout = "Only 10 authors allowed.";
document.getElementById("stat").innerHTML = myout;
}
}
</script>
<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">
Check it and let me know, if it is solved.

Categories