<html>
<head>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "index2.php";
var fn = document.getElementById("first_name").value;
var ln = document.getElementById("last_name").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<h2>Ajax Post to PHP and Get Return Data</h2>
Your First Name: <input id="first_name" name="first_name" type="text" />
<br /><br />
Your Last Name: <input id="last_name" name="last_name" type="text" />
<br /><br />
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
<br /><br />
<div id="status"></div>
</body>
</html>
<?php
echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file';
?>
The code above works and submits the data and gets the result, along with the result it renders the form again. Image --> http://oi47.tinypic.com/1bt02.jpg
How to fix it?
Thanks in advance.
Don't include the form in the response you send to the Ajax request.
Related
I am trying to create a page whereby you can submit some text and then retrieve it on button press, I have managed to get it to submit to my server, however on retrieval I keep getting the error "unexpected end of JSON input" and have no idea what to do about it, my knowledge of PHP/JSON is very limited, any criticism / pointers are greatly appreciated.
JS:
function writeDoc() {
var xhttp = new XMLHttpRequest();
var url = "gethint.php";
var input = document.getElementById("text").value;
var clicker = document.getElementById("submit");
xhttp.open("POST", "gethint.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
alert("DataSubmitted");
}
}
xhttp.send("input= " + input);
}
function readDoc() {
var xxhttp = new XMLHttpRequest();
xxhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var data = JSON.parse(this.responseText);
alert(data);
}
}
xxhttp.open("GET", "gethint2.php", true);
xxhttp.send();
}
PHP/HTML:
<php? session_start(); ?>
<html>
<script type="text/javascript" src="main.js"></script>
<head>
</head>
<body>
<label>Text Input To Save: </label>
<br></br>
<textarea rows="6" cols="20" id="text" name="textInput"></textarea>
<input type="submit" id="submit" onclick="writeDoc()">
<br></br>
<label>Retrieve Text :</label> <input type="button" id="getText"
onclick="readDoc()">
</body>
</html>
Sending Data:
<?
$_SESSION["input_data"] = $_POST;
echo $_POST["input"];
?>
Retrieving Data:
<?php
$_SESSION["input_data"] = json_encode($_POST);
?>
I have the below code. Currently it submits only the first_name which is exactly what I want and it does that on the fly without the page refreshing.
However I need to parse an ID number along the same ajax request through the hidden id field.
Can anybody suggest any ideas to help me?
Thanks in advance
CODE:
<html>
<head>
<script>
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var vars = "firstname="+fn+;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<h2>Ajax Post to PHP and Get Return Data</h2>
<input type="hidden" name="my_id" value="1234">
First Name: <input id="first_name" name="first_name" type="text" onkeyup="ajax_post();"> <br><br>
<div id="status"></div>
</body>
</html>
Use jquery
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax_post(){
var $elementStatus = $('#status');
$elementStatus.html('processing...');
var url = 'my_parse_file.php';
var data = { firstname : $('#first_name').val() };
var success = function(responseText, textStatus, jqXHR) {
if(jqXHR.status != 200)
return;
$elementStatus.html(responseText);
};
$.post(url, data, success);
};
</script>
</head>
<body>
<h2>Ajax Post to PHP and Get Return Data</h2>
<input type="hidden" name="my_id" value="1234">
First Name: <input id="first_name" name="first_name" type="text" onkeyup="ajax_post();"> <br><br>
<div id="status"></div>
</body>
</html>
Here's a very simple problem I came across today that's been very frustrating to me:
Say I'm uploading a video file through the HTML 'choose file' input, and I have a submit button that calls an onclick java script function for sending the video to a php file and returns data about the video back to the original page, (something simple like echo $_FILES[$myvideoupload]['name'] ) all through XMLhttpRequest().
Is this possible?
As it is right now, the video simply isn't being passed through my ajax function to the php file. Does document.getElementByID("stuff") work for video files? or is it more about how I should format var in send(var)? Any ideas or knowledge on the subject of passing files through XMLHttpRequest() would be awesome.
Here is my not-so-awesome code with the file attempts commented out in the js. Hope this helps.
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript">
function file_upload(){
var hr = new XMLHttpRequest();
var url = "vidcon.php";
if(document.getElementById('preset_mp4').checked) {
pr = document.getElementById("preset_mp4").value;
}else if(document.getElementById('preset_ogg').checked) {
pr = document.getElementById("preset_ogg").value;
}else if(document.getElementById('preset_mov').checked) {
pr = document.getElementById("preset_mov").value;
}else if(document.getElementById('preset_wmv').checked) {
pr = document.getElementById("preset_wmv").value;
}else if(document.getElementById('preset_3gp').checked) {
pr = document.getElementById("preset_3gp").value;
}
//var fd = new FormData();
//fd.append('uploadedfile', document.getElementByID("uploadedfile").files[0]);
var vars = "preset="+pr;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.response;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<input type="hidden"/>
<form enctype="multipart/form-data" action="" method="POST">
Choose pload:<br> <input id="uploadedfile" name="uploadedfile" type="file" /><br />
</form>
Select Output Format for Conversion (changes will be made to conversion settings) <br>
<div class="field form-inline radio">
<input id="preset_mp4" name="preset" type="radio" value="mp4">mp4<br>
<input id="preset_ogg" name="preset" type="radio" value="ogg">ogg<br>
<input id="preset_mov" name="preset" type="radio" value="mov">mov<br>
<input id="preset_wmv" name="preset" type="radio" value="wmv">wmv<br>
<input id="preset_3gp" name="preset" type="radio" value="3gp">3gp<br>
</div>
<input type="submit" value="Upload File" onClick="javascript:file_upload();"/>
<div id="status"></div>
</body>
You need to use a FormData object to upload a file via ajax. Something like
var fd = new FormData();
fd.append('preset', pr);
fd.append('videofile', document.getElementByID("videofileinputid").files[0]);
hr.open("POST", url, true);
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.response;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(fd);
document.getElementById("status").innerHTML = "processing...";
Note that not all browsers support the FormData object but the are js libraries that simulate an ajax file upload.
Hi i'm printing out a radio button list dynamically with php using the following code:
<form method="post">
<p>Name of list:
<label for="name"></label>
<input type="text" name="name" id="name">
</p>
<p>Name of item:
<input id="first_name" name="first_name" type="text" />
<br />
<?php echo $form;?>
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();"></form>
where $form is the variable in which the radio button list is saved.Now i need to pass the selected radio button to an another php file using an ajax function ajax_post().But since my form method is POST my ajax function gets overridden and doesnt get called.
heres my ajax function
function ajax_post(){
var hr = new XMLHttpRequest();
var id = '<?php echo $id; ?>';
var rd = '<?php echo $_POST['radio'];?>';
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var nm = document.getElementById("name").value;
var vars = "todo="+fn+"&name="+nm+"&id="+id+"&rd="+rd;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars); // Actually execute the request
}
I need it to be POST because i want to extract what radio button i press and i also need the ajax function to work...any way around this?
You need to return false; from your function to avoid the form getting submitted the regular way.
hi im trying to access a php variable in an ajax function but apparently it isnt working...i have used an onClick event to activate the ajax function where i pass my local php variable as an argument parameter...
<?php
$name = $_GET['name'];
?>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ajax_post(x){
var nm = x;
var hr = new XMLHttpRequest();
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var vars = "todo="+fn+"&name="+nm;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<?php
$display =' Name of list:;
echo <label for="name"></label>
<input type="text" name="name" id="name">
</p>
<p>Name of item:
<input id="first_name" name="first_name" type="text" />
<br /><br />
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post(' . $name . ');">
</p>
<p>Your list has been succesfully created.</p>
<form name="form1" method="post" action="">
<input type="submit" name="AddItem" id="AddItem" value="Add Items">
</form>
<p><br />
<br />
</p>
<div id="status"></div>
</body>
</html>';
?>
<?php
echo $display;
?>
Echo the var into a hidden span or input an snag it from there when you need it.
It looks like you're sending the request via POST and then trying to access it via GET. Try changing it to:
<?php
$name = $_POST['name'];
?>