EDIT - Resolved.
Thank you everyone for taking the time to respond. After hours of researching I was directed to CORS, but turns out I should be looking at JSONP the whole time. I read a few tutorials, and I think I understand. Thanks again.
What I'm trying to do is to pass user input from a form to my server, which is different from the server the form is located at. I won't make this too long to read, so I'll jump straight away to code.
In the following javascript code, I'm getting elements by tagName for security issues, I don't want to use name attributes in my html form. Then I'm storing data retrieved into a JSON datatype which I'll then call an ajax function on it.
function processForm() {
var i, userInput, inputType;
var name, creditNo, cvv, month, year;
var inputs = document.getElementsByTagName("input");
for (i=0; i < inputs.length; i++){
inputType = inputs[i].getAttribute('data-tajer');
userInput = inputs[i].value;
if (inputType == 'name') {
name = userInput;
}
else if (inputType == 'cc') {
creditNo = userInput;
}
else if (inputType == 'cvv') {
cvv = userInput;
}
else if (inputType == 'month') {
month = userInput;
}
// year
else {
year = userInput
}
}
var myJASON = {"name": name, "cc": creditNo, "cvv": cvv, "month": month, "year": year};
var strJSON = JSON.stringify(myJASON);
ajaxCall(strJSON);
}
Now the ajax call, which should be trivial. Only difference here is my url is on a different server.
function ajaxCall(param){
var url = 'http://blahbalh';
// jquery code snippet
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Please update your browser biatch!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else {
alert("failed");
}
}
ajaxRequest.open("POST", url, true);
// param is the JSON data.
ajaxRequest.send(param);
}
Basically what happens now is that I get back a status of 0 and readyState of 1. Can you guys spot what I'm doing wrong? Bear in mind, I had it in jQuery first, but it didn't work either. I'm open for any solution and suggestions.
I'll provide the html form for convenience.
<form id="paymentForm">
<h3>Payment Form</h3>
<h4>Please fill in the form below, * are required fields.</h4>
<div>
<label>
<span>Name: *</span>
<input placeholder="Please enter your name as it appears on your credit card." id = "name" type="text" data-tajer="name" tabindex="1" required autofocus>
</label>
</div>
<div>
<label>
<span>Credit Card: *</span>
<input placeholder="Please enter credit card number" type="text" data-tajer="cc" tabindex="2" required>
</label>
</div>
<div>
<label>
<span>CVV: *</span>
<input placeholder="Please enter CVV code found on the back of your card" type="text" data-tajer="cvv" tabindex="3" required>
</label>
</div>
<div>
<label>
<span>Expiry Month: *</span>
<input placeholder="Please enter the expiry month of your credit card" type="text" data-tajer="month" tabindex="4" required>
</label>
</div>
<div>
<label>
<span>Expiry Year: *</span>
<input placeholder="Please enter expiry year of your credit card" type="text" data-tajer="year" tabindex="5" required></input>
</label>
</div>
<div>
<button onclick="processForm()">Process Payment</button>
</div>
</form>
