I want to post some data in JSON in a server, but I am having problem . I have done with this way which is working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<h2>Create Sensor</h2>
<form id="form">
<form enctype='application/json'>
<input name='version' value='1.0.1'>
<input name='sensors_sensor' value=''>
<input name='sensors_name' value=''>
<input name='sensors_type' value=''>
<br>
<input id="input" type="submit" name="submit" value="Create Sensor" />
</form>
<script>
$(document).ready(function() {
$('#input').click(function() {
var fromData = {
"version": $('input[name=version]').val(),
"sensors": [{
"sensor": $('input[name=sensors_name]').val(),
"output": [{
"name": $('input[name=sensors_name]').val(),
"type": $('input[name=sensors_type]').val()
}]
}],
};
var fromDatan = JSON.stringify(fromData);
alert(fromDatan);
$.ajax({
url: "abc.com",
headers: {
"x-api-key": "abcd=",
"content-type": "application/json"
},
type: "POST",
data: fromDatan,
success: function(fromData, status, jqXHR) {
alert(JSON.stringify(fromData));
},
error: function(jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
});
return false;
});
});
</script>
</body>
</html>
But I am trying to do this in another way but it is not happening. Please help me out.
This is the code not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<h2>Create Sensor</h2>
<form id="form">
<form enctype='application/json'>
<input name='version' value='1.0.1'>
<input name='sensors_sensor' value=''>
<input name='sensors_name' value=''>
<input name='sensors_type' value=''>
<br>
<button onclick="postSOS();">Create</button>
</form>
<script>
function postSOS() {
postSEN();
}
function postSEN() {
// $('#input').click(function() {
var fromData = {
"version": $('input[name=version]').val(),
"sensors": [{
"sensor": $('input[name=sensors_name]').val(),
"output": [{
"name": $('input[name=sensors_name]').val(),
"type": $('input[name=sensors_type]').val()
}]
}],
};
var fromDatan = JSON.stringify(fromData);
alert(fromDatan);
$.ajax({
url: "abc.com",
headers: {
"x-api-key": "abcd=",
"content-type": "application/json"
},
type: "POST",
data: fromDatan,
success: function(fromData, status, jqXHR) {
alert(JSON.stringify(fromData));
},
error: function(jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
});
return false;
//});
}
</script>
</body>
</html>
By placing your script in the head I got it working on this FIDDLE
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function postSOS() {
postSEN();
}
function postSEN() {
// $('#input').click(function() {
var fromData = {
"version": $('input[name=version]').val(),
"sensors": [{
"sensor": $('input[name=sensors_name]').val(),
"output": [{
"name": $('input[name=sensors_name]').val(),
"type": $('input[name=sensors_type]').val()
}]
}],
};
var fromDatan = JSON.stringify(fromData);
alert(fromDatan);
$.ajax({
url: "abc.com",
headers: {
"x-api-key": "abcd=",
"content-type": "application/json"
},
type: "POST",
data: fromDatan,
success: function(fromData, status, jqXHR) {
alert(JSON.stringify(fromData));
},
error: function(jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
});
return false;
//});
}
</script>
</head>
<body>
<h2>Create Sensor</h2>
<form id="form">
<form enctype='application/json'>
<input name='version' value='1.0.1'>
<input name='sensors_sensor' value=''>
<input name='sensors_name' value=''>
<input name='sensors_type' value=''>
<br>
<button onclick="postSOS();">Create</button>
</form>
</body>
</html>
Can you please try if this works (just add your API key and URL): http://jsfiddle.net/gqLgf4vx/
var sensorForm = $("#form");
sensorForm.on("submit", postSen());
function postSen() {
var formData = {
"version": $('input[name=version]').val(),
"sensors": [{
"sensor": $('input[name=sensors_name]').val(),
"output": [{
"name": $('input[name=sensors_name]').val(),
"type": $('input[name=sensors_type]').val()
}]
}],
},
formDataStr = JSON.stringify(formData);
sendAjax(formDataStr);
}
function sendAjax(formDataStr) {
$.ajax({
url: "abc.com",
headers: {
"x-api-key": "abcd=",
"content-type": "application/json"
},
type: "POST",
data: formDataStr,
success: function (fromData, status, jqXHR) {
//alert(JSON.stringify(fromData));
},
error: function (jqXHR, status) {
alert(JSON.stringify(jqXHR));
}
});
}
I think your first code has extra form tag. So I updated your code.
<form id="form">
<form enctype='application/json'>