Ajax form submission without refresh "not working" - php

Question

I'm trying to submit the form in the same page without refresh the page.
my form:
<?php
if(isset($_POST['transfer'])){
$amount = $_POST['amount'] ? $_POST['amount'] : '';
$from_c = $_POST['from_c'] ? $_POST['from_c'] :'';
$to_c = $_POST['to_c'] ? $_POST['to_c'] : '';
}
?>
<form class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData">
<div class="md-form form-group col-sm-3">
<div class="input-group col-sm-12">
<input type="number" value="1" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control" name="amount">
<span class="input-group-addon" id="natCurrency" style="margin-top: 10%;margin-left: -5;margin-right: 15%;"></span>
</div>
</div>
<div class="">
<label for="from_c">from currency</label>
<select id="natSelect" onchange="let csymbol = $(this).find(':selected').data('symbol');$('#natCurrency').text(csymbol) " name="from_c" class="mdb-select colorful-select dropdown-primary" style="width:200px;" placeholder="select currency" >
<?php foreach ($black_a as $name => $black_p) {
?>
<option value="<?php echo $black_p['name'];?>" data-symbol="<?php echo $black_p['symbol_native']; ?>"><?php echo $black_p['name'];?></option>
<?php } ?>
</select>
</div>
<div class="">
<label for="to_c">to currency</label>
<select class="mdb-select colorful-select dropdown-primary" name="to_c" style="width:200px;" >
<?php foreach ($black_a as $name => $black_p) {
?>
<option value="<?php echo $black_p['name'];?>"><?php echo $black_p['name'];?></option>
<?php } ?>
</select>
</div>
<input name="transfer" value="convert" class="btn btn-elegant" style="margin-top:3%;" id = "ha" />
</form>
And I have this PHP code when the form is submitted:
<?php
if(isset($from_c) &&$from_c ==$to_c && isset($to_c) && $to_c == $from_c){
echo "
<div id='less' class='well'>
<div dir='RTL'>
<ul class='text-right'>
<li><strong>resultل</li>
</ul>
<div class='col-md-4'>
<div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> Error !</div>
</div>
";
}
?>
I tried using AJAX, the page is still refreshing after clicking submit:
$('#ha').on('click', function (e) {
e.preventDefault(); //prevent to reload the page
$.ajax({
type: 'POST', //hide url
url: 'convert.php', //your form validation url
data: $('#frmData').serialize(), //USE THE ID WE SET IN THE FORM
success: function (response) {
$(".mydiv").append(response);
}
});
});
.mydiv:
<div class='mydiv'>
<div dir='RTL'>
<ul class='text-right'>
<li><strong>result</li>
</ul>
<div class='col-md-4'>
<div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> $amount</div>
</div>
I also tried to using iframe but when clicking the submit button nothing happens.
How can I make this works and displaying the message I have in the if statement in my second PHP code?

Answer 1

This will work If this is your submit button
<input type="submit" name="transfer" value="convert" class="btn btn-elegant" style="margin-top:3%;" />
Change it to
<input name="transfer" value="convert" class="btn btn-elegant" style="margin-top:3%;" id = "ha" /> //ADD AN ID TO SPECIFY THE ON CLICK TRIGGER
Then your form
<form class="form-inline" method="post" action="convert.php" >
Change it to
<form class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData"> // ADD AN ID TO YOUR FORM
Then minor adjustment to your script
$('#ha').on('click', function (e) {
e.preventDefault(); //prevent to reload the page
$.ajax({
type: 'POST', //hide url
url: 'convert.php', //your form validation url
data: $('#frmData').serialize(), //USE THE ID WE SET IN THE FORM
success: function (response) {
$(".yourDiv").append(response);
}
});
});

Answer 2

to achieve this you have to make changes in your code first change your form part like this
<form class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData">
change your submit button like this
<input name="transfer" value="convert" class="btn btn-elegant" style="margin-top:3%;" id = "ha" />
then in your ajax function add e.preventDefault(); in first line .