This is going to be a little long.
I have a form, from which data needs to go to a url. Also 3 parameters need to be present - action = create (which means that the data is going to be added and not updated or deleted, type = school(which means it should go to the school table), and school is going to be the JSON object which contains the form data.
So here is my form
<!-- index.html -->
<!doctype html>
<html>
<head>
<title>Look I'm AJAXing!</title>
<!-- load jquery via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<sccript src="magic.js"></script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Form</h1>
<!-- OUR FORM -->
<form method="POST" enctype="application/json">
<input type="hidden" name="action" value="create">
<input type="hidden" name="type" value="school">
<input type="hidden" name="school" value="response">
<!-- NAME -->
<div id="name-group" class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="name">
<!-- errors will go here -->
</div><br>
<div id="address-group" class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" name="address">
<!-- errors will go here -->
</div><br>
<div id="website-group" class="form-group">
<label for="website">Website</label>
<input type="text" class="form-control" name="website">
<!-- errors will go here -->
</div><br>
<div id="twitter-group" class="form-group">
<label for="twitter">Twitter</label>
<input type="text" class="form-control" name="twitter">
</div><br>
<button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>
</form>
</div>
</body>
</html>
The following is my .js file
// magic.js
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
// get the form data
var school = {
'action' : $('input[name=action]').val(),
'type' : $('input[name=type]').val(),
'school': $('input[name=school]').val(),
'Name' : $('input[name=Name]').val(),
'address' : $('input[name=address]').val(),
'website' : $('input[name=website]').val(),
'twitter' : $('input[name=twitter]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
contentType : 'json',
beforeSend : function(request){
request.setRequestHeader("Access-Control-Allow-Origin","*");
},
url : 'https://your_url.aspx', // the url where we want to POST
data : school, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true,
success: function(data){
console.log(data);
}
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
Despite scouring the internet to find a lot of solutions, I have been getting a lot of errors for Access-Control-Allow origin, etc. I am now getting to see the following error:
XMLHttpRequest cannot load https://your_url.aspx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Any idea where am I going wrong?
If all is right, my console should show like : Object{ status: "ok" , response : "id: the_recent_added_number" }
Any help would be greatly appreciated.
