I am trying to POST a form to my testexe.php using an Ajax request, however, whenever I add the data type gateway in my Ajax request I get the Uncaught RangeError: Maximum call stack size exceeded error message. Is there something I am doing wrong here? I am able to get the button value successfully but not sure why gateway is giving me problems.
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 450px;
border: 2px solid black;
margin: 0;
display: flex;
}
.col {
display: inline-block;
border-right: 2px solid black;
padding: 5px;
width: 200px;
}
.col:last-child {
border-right: none;
}
input[type=text], select {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="gatewayInput">
<form method="post">
<input type="text" id="gateway" name="gateway" placeholder="Gateway Name"><br><br>
<?php
include("search.php");
?>
</div>
<div class="box1">
<label class="col">Up/Down</label>
<span class="col">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
</span>
<span class="col">
<input type="submit" class="button" name="submit"/>
</span>
</form>
</div>
<script src ="../../../jqueryDir/jquery-3.2.1.min.js"></script>
<script src ="../../../jqueryDir/jquery-ui.min.js"></script>
<script type="text/javascript">
//auto seatch function
$(function() {
$( "#gateway" ).autocomplete({
source: 'search.php'
});
});
//button click function
$(".button").click(function(event){
if ((document.getElementsByName("gateway")[0].value == '')) {
alert('Gateway Required!');
return false;
}
else if (document.querySelectorAll('input[type="radio"]:checked').length < 1) {
alert('Please Choose Value!');
return false;
}
else {
//alert('Sucess!');
event.preventDefault();
$.ajax({
url:"testexe.php",
type: "POST",
data: {
gateway: gateway, //when I add this it give me the error
option: $('input[type=radio]:checked').val()
},
dataType: "text",
success:function(result){
$('#div1').html(result)
}
});
return true;
}
});
</script>
<div id="div1"></div>
</body>
</html>
testexe.php
<?php
//when the submit button is clicked
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "yay I got the POST!";
if(isset($_POST['gateway']){
$gateway = $_POST['gateway'];
echo $gateway;
}
}
(removed code for simplicity)
?>
search.php
<?php
//database configuration
$dbHost = 'localhost';
$dbUsername = 'user';
$dbPassword = '';
$dbName = 'database';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
if(isset($_GET['term'])){
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM table WHERE tablename LIKE '%".$searchTerm."%' ORDER BY tablename ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['tablename'];
}
//return json data
echo json_encode($data);
mysqli_close($db);
}
?>
error message:
Uncaught RangeError: Maximum call stack size exceeded
at Function.type (jquery-3.2.1.min.js:2)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
at Ab (jquery-3.2.1.min.js:4)
