We Keep Coding

How to get input data without refreshing data with AJAX?

I have a form. It is include two radio button and one input. Radio buttons are name hexadecimal to decimal and decimal to hexadecimal.
When I write text to input I need to show result without page refreshing.
For example 1 result -> 10 12 result->23 directly showing.
So I make a research I need to use AJAX inside PHP. But all examples working click button. I don't want to use button.
Can you give me a example post request same page in AJAX ?

Consider the following jQuery example.
$(function() {
$("#input").keyup(function(event) {
var input = $(this).val();
if ($("#dec").is(":checked")) {
$("#output").val(parseInt(input).toString(16));
} else {
$("#output").val(parseInt(input, 16));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div>
<input type="text" id="input" value="0" />
</div>
<div>
<input type="radio" value="decToHex" name="select" id="dec" checked="true" />
<label for="dec">Decimal to Hex</label>
</div>
<div>
<input type="radio" value="hexToDec" name="select" id="hex" />
<label for="hex">Hex to Decimal</label>
</div>
<div>
<input type="text" id="output" value="0" />
</div>
</form>

Send the value of a javascript funcion, on a HTML form, into a PHP page

I've got a JavaScript function, that as an array, and a HTML form that sends data to a PHP page to later send it by email. But I would also need to send the result of the JavaScript function on the form to the php page. Is this possible?
I'm currently trying the following way, but with no results:
HTML page and script :
function showcartitems() {
var showcart = paypal.minicart.cart.items();
}
<form action="teste4.php" method="post" class="creditly-card-form agileinfo_form" onsubmit="showcartitems()">
<section class="creditly-wrapper wthree, w3_agileits_wrapper">
<div class="information-wrapper">
<div class="first-row form-group">
<div class="controls">
<label class="control-label">Nome Completo: </label>
<input class="billing-address-name form-control" type="text" name="name" placeholder="Nome Completo">
<input type="hidden" name="cart" value="showcart" />
</div>
<div class="w3_agileits_card_number_grids">
<div class="w3_agileits_card_number_grid_left">
<div class="controls">
<label class="control-label">Numero de telemóvel:</label>
<input class="form-control" type="text" name="mobile" placeholder="Numero de telemóvel">
</div>
</div>
<div class="w3_agileits_card_number_grid_left">
<div class="controls">
<label class="control-label">Email:</label>
<input class="form-control" type="text" name="email" placeholder="Email">
</div>
</div>
<div class="w3_agileits_card_number_grid_right">
<div class="controls">
<label class="control-label">Rua: </label>
<input class="form-control" type="text" name="rua" placeholder="Rua">
</div>
</div>
<div class="clear"> </div>
</div>
<div class="controls">
<label class="control-label">Cidade: </label>
<input class="form-control" type="text" name="cidade" placeholder="Cidade">
</div>
<div class="controls">
<label class="control-label">Método de pagamento: </label>
<select name="pagamento">
<option>MBWay</option>
<option>Transferência Bancária</option>
<option>Multibanco (apenas para entregas ao domicílio)</option>
</select>
</div>
</div>
<button class="submit check_out">Verificar disponibilidade!</button>
</div>
</section>
</form>
The PHP page is still quite simple, just checking if the variables are coming correctly, they all are, except the value of the javascript function:
echo $_POST['name'];
echo $_POST['mobile'];
echo $_POST['email'];
echo $_POST['rua'];
echo $_POST['cidade'];
echo $_POST['pagamento'];
echo $_POST['showcart'];
?>
Am I doing something wrong? Is there a better way to do this, or is it just impossible?
EDIT 1:
Following #epascarello suggestion, I've managed to get the value into the PHP side, which is returning the following:
[{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010302","item_image":"images/1010302-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":2,"href":"http://teste/index.html#5"},"_options":[],"_discount":100,"_amount":99,"_total":98,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010575","item_image":"images/1010575-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA 1010707","item_image":"images/1010707-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}},{"_data":{"cmd":"_cart","add":"1","item_name":"FILA SCM00514","item_image":"images/scm00514-1.png","amount":99,"discount_amount":"50.00","submit":"Adicionar ao carrinho","quantity":1,"href":"http://teste/index.html#5"},"_options":[],"_discount":50,"_amount":99,"_total":49,"_eventCache":{"change":[[null,null]]}}]
I've tried several approaches with json_decode, but I'm not getting the result I seek.
I would like to split that array into, for example:
item_name=x;
item_image=x;
quantity=x;
Can someone pin point me into the right direction? Sorry for asking this, I'm new in this languages and despite my research I did not manage to get to a solution on my own.
Thank you in advance.

So you have <input type="hidden" name="cart" value="showcart" /> so you need to set the value of the field. That value does not magically reference the JavaScript value you created.
Give the input element an id, so it is easier to reference
<input type="hidden" name="cart" id="cart" />
and set the value of the input in your method that is called on submit
function showcartitems() {
document.getElementById('cart').value = JSON.stringify(paypal.minicart.cart.items());
}

After #epascarello solution, to be able to decode de JSON string, I've followed #RaymondMutyaba suggestion which works pretty properly:
$item_name = json_decode($_POST['cart'], true)[0]["_data"]["item_name"];
$array_of_items_in_cart = json_decode($_POST['cart'], true);
$first_item_in_cart = array_of_items_in_cart[0];
$name_of_first_item_in_cart = first_item_in_cart["_data"]["item_name"];
$first_item_discount = first_item_in_cart["_discount"];

redirect function doesnt work properly after submitting the form twice

I did a form validation where server checks submitted data. If data passes validation, then redirect to previous page, if not, a modal box will pop up tells user wrong username/password.
The question is, after user resubmit the form, redierct function doesn't work. It only works when user first time successfully input those fields. Can anyone help me with this please?
The html code:
<div id="formInfo">
<form method="post" action="<?PHP echo $_SERVER['PHP_SELF'];?>">
<span class="title">Sign in to urmajesty.net</span><br><br>
<div id="input_container">
<input type="text" name="username" placeholder="username"><img src="Images/icons/user.png" id="input_img"><br><br>
</div>
<div id="psw_container">
<input type="password" name="psw" placeholder="password"><img src="Images/icons/key.png" id="key_img"><br><br>
</div>
<div id="checkbox">
<input type="checkbox" name="RememberUsername" value="Yes"><span class="checkboxtxt">Remember my username</span>
</div><br><br>
<div id="Forget">
<span class="forget1">Forget Password</span><span class="forget2">Forget Username</span>
</div>
<input type="submit" class="button" value="SIGN IN"><br><br>
<div id="hispan"><p class="hip"><span class="hi">New to urmajesty.net?</span></p></div><br>
<input class='disable_me' name="referer" type="hidden" value="<?php echo urlencode($_SERVER['HTTP_REFERER'])?> " />
<button type="button" class="button" id="btn">CREATE ACCOUNT</button>
</form>
</div>
<div id='modal_box'>
<div class='modal_content'>
<span class='close'>×</span><p>username/password is wrong. Please try again!</p>
</div>
</div>
The php code:
if($_SERVER["REQUEST_METHOD"]=="POST"){
$validation=Login();
if($validation==false){
echo"<script>
var modal_box=document.getElementById('modal_box');
modal_box.style.display='block';
modal_box.style.backgroundColor='rgba(0,0,0,0.4)';
var close=document.getElementsByClassName('close')[0];
close.onclick=function(){
modal_box.style.display='none';
}
window.onclick=function(event){
if(event.target==modal_box){
modal_box.style.display='none';
}
}
</script>";
}
else{
if(!empty($_POST['referer']) && !is_array($_POST['referer'])){
header("Location: ".urldecode($_POST['referer']));
exit();
}
}
}
?>

Use javascript to redirect.
if(!empty($_POST['referer']) && !is_array($_POST['referer'])){ ?>
//header("Location: ".urldecode($_POST['referer']));
<script>
window.location.href = "<?=$_POST['referer']?>";
</script>
<?php
exit();
} ?>

Apart from using header() to redirect, you can use meta refresh method, or JS window.location method.
<script>
window.location = "<?=$_POST['referer']?>"
</script>

Show a div after submitting a form and keep the information of the form

I need to show a div after receiving info from a form. I got a good code to show the div after submitting the code, but for this code work, I need to use return false so the page doesn't reload.
Here is the code:
function showHide() {
document.getElementById("hidden").style.display = "block";
}
#hidden {
display: none;
}
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div id="hidden">hello</div>
</body>
</html>
PS: I don't know why the js is not working in here, in codepen it's.
So, here's the thing:
I can't use return: false because I do need to return these values; and
I don't want to use onclick() because when the user clicks on the
button it'll show a blank box.
To explain better, I'll get the infos I got in the form and show them in the previously hidden div. It's a signature generator for email.
There's someway I can do this with javascript or php?

Try this:
<?php
$show ="none";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$show = "block";
}
?>
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div style="display:<?php echo $show;?>">hello</div>
</body>
</html>

how we display the value form database in spacific span or div

i am trying to check my value form database it already enter or not before submitting the form
i have code its display the result in text box how it is possible that result is display in div or span.
my code is as under:
my first file category.php have script and html form
script
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id").keyup(function() {
$.ajax({
type : "POST",
url : "dbscript2.php",
data : "id=" + $("#id").val(),
success : function(html) {
$("#message").val(html);
}
});
});
});
</script>
html form is :
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="category" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="new" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
and last php file message dbscript2.php
<?php
include "config.php";
$id = $_POST['id'];
$q=mysql_query("select * from category where category ='$id'");
$num=mysql_num_rows($q);
if($num==0)
echo "";
else
{
echo "This Category already Entered";
}
?>

Since there are couple of errors in the actual code you shared and the answer you derived, let me put it across here
HTML form
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="id" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="message" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
The core code where you want the data to get inserted to the div
$("#mes").text(html);
Please note that you get the value returned from the php script, and not some html. Hence it is better to rename your expected return value as some other identifier say mydata
$("#mes").text(mydata);
Please let me know if you are looking for something else.
Updated based on OP's further query
Please read jquery API docs, It gives you an idea of the supported functions http://api.jquery.com/.
To your specific question, yes you can hide or show a particular div using the below calls:
//check your condition and show or hide the div accordingly
$("#mydiv").show();
or
$("#mydiv").hide();