cant figure out what causing Uncaught TypeError: Converting circular structure to JSON. I have form (1 input field and submit button)
<form id="contact-form" method="post" action="submit_form.php" role="form" target="hiddenFrame">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Author *</label>
<input id="form_name" type="text" name="Author" class="form-control" placeholder="Enter name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<input type="submit" class="btn btn-success btn-send" name="submit">
</div>
</div>
</div>
</form>
<script src="./js/submit_frm.js"></script>
submit_frm.js code:
$(function () {
// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "submit_frm.php";
// POST values in the background the the script URL
var data = JSON.stringify(e);
$.ajax({
type: "POST",
url: url,
data: data,
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
Google chrome console shows, that error originates in var data = JSON.stringify(e); line in js file. I would appreciate any help on solving this error.
This is invalid: var data = JSON.stringify(e);
The e
in an event is usually a reference to that event, and not your data. You should instead do something like:
e.preventDefault();
var data = $(this).serialize();
You cant convert circler objects eg DOM Elements to JSON, and e
has a reference to the form that was submitted, therefore you can't just convert the event to JSON
If you want to get the forms data as JSON, you can create a FormData object from the form and then iterate over it and convert it manually to JSON, like this:
$('#contact-form').on('submit', function (e) {
var formData = new FormData(e.target);
var object = {};
formData.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);
// do something with json ...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.