How to pass input values to ajax - javascript

Okay, I'm new to Ajax. My problem is that I'm not sure how to retrieve data which is in the <input> tag and send it to Ajax. I have tried searching on the internet, but most of the solutions are using jQuery Ajax, which is what I'm not looking for at the moment.
Here is my code.
I want to save this value so that my Ajax can read it...
<input id="IDValue" name="IDValue" value="<?php echo $row['exist']?>" >
This is my Ajax script...
function message(){
var ID=$(".IDValue").val();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","retrieveMsg.php?q=" +ID,true);
xmlhttp.send();
}
Please help me, guys. The reason I am doing this method is because (My previous post) Send input value to php using ajax with result printed to div

Replace it
var ID=$(".IDValue").val();
With
var ID = document.getElementById("IDValie").value;

i am confused about your $row['exist'] returns value or not and what html control you used for id="txtHint". here i have provided demo which same as your code in some way...try and have an idea and make changes as per your requirement...
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<input id="IDValue" name="IDValue" value="<?php echo 'hello';?>" >
<textarea id="txtHint"></textarea>
<input type="button" value="Click" onClick="message()"/>
<script>
function message(){
var ID=$("#IDValue").val();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","login.php?q=" +ID,true);
xmlhttp.send();
}
</script>
</body>
</html>

Related

Ajax To PHP converter get value from ajax

i need help, here my code :
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getstok.php?secretkey=123&sku=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Masukkan kode barang / SKU:</b></p>
<form>
Kode Barang: <input type="text" onkeyup="showHint(this.value)">
</form>
<div id="txtHint"></span>
</body>
</html>
What I need is:
I want to hide this "secretkey=123" so visitor cannot see my secret key
when call "xmlhttp.send();" return the value and I want to convert it to php like example
$getxmlhttp = xmlhttp.send();
when I type something it will be call function, but when I press enter that refresh, how to disable the enter or what the best suggestion for me.
this is my site sample:
http://stok.tk
for example type "YI 067"
1 : You can't. The browser (and so the visitor) can always know wich page is called with wich URL and parameters
2 : You can't do it like that. You need to get the value of your request into getstok.php with the super global variables $_GET['your var']
3 : It's reloading the page because it's sending your form. By default it send it to the same page. Just remove your <form>

Single ajax request to update 2 different <DIV>

Is it possible to update 2 different targeted DIV simultaneously using 1 ajax?
Let say I have index.html below:
<script>
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("main_body").innerHTML = xmlhttp.responseText;}
}
xmlhttp.open("GET","some_page.php",true);
xmlhttp.send();
</script>
<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>
In above case, all I know is the some_page.php has to be written like below:
<php
echo "<div id="update_1"><h1>Apple</h1></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"><h1>Orange</h1></div>";
?>
I don't want the some_page.php to load the content of id="dont_ajax" due to its large html content. I am looking for some kind of solution like:
<script>
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("update_1").innerHTML = xmlhttp.responseText(1);
document.getElementById("update_2").innerHTML = xmlhttp.responseText(2);}
}
xmlhttp.open("GET","some_page.php",true);
xmlhttp.send();
</script>
<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>
so that the some_page.php can be as simple as:
<php
echo "<h1>Apple</h1>"; //(become respondtext(1))
echo "<h1>Orange</h1>"; //(become respondtext(2))
?>
I know my example above won't work, I just want to show you the problem and what I want to achieve. Pls give me some ideas, thanks. Or if u have other way to achieve this, pls suggest.
I need solution in native JS.
Yes, it's possible. You can update any number of elements.
It depends on the way you're preparing and parsing your response.
This code is awful as ajax response has only one responseText:
<php
echo "<h1>Apple</h1>"; //(become respondtext(1))
echo "<h1>Orange</h1>"; //(become respondtext(2))
?>
You'll receive <h1>Apple</h1><h1>Orange</h1> in the response and you'll produce more ugly code trying to split it in parts.
The best solution is preparing JSON string:
<php
echo "{update_1: '<h1>Apple</h1>', update_2: '<h1>Orange</h1>'}";
?>
Then parsing the response and updating the document:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
['update_1', 'update_2'].forEach(function(i){
document.getElementById(i).innerHTML = data[i];
});
}

How to check if a session is empty using javascript inside php

Also, how do i unset the session through javascript?
I have made this code with PHP:
if(isset($_SESSION) && !empty($_SESSION)) {
unset($_SESSION['Plan1']);
unset($_SESSION['excel_array']);
$_POST['excel_name']['Main'] = "Main".date("y_m_d_Hi");
$_POST['excel_array']['Main']['Plan1'] = array();
}
else{
$_SESSION['excel_name']['Main'] = "Main".date("y_m_d_Hi");
$_SESSION['excel_array']['Main']['Plan1'] = array();
}
So here i check if there is a session. If there is, i unset it and send the $_POST data instead. however, if there isn't one, i create it.
The problem is, i might want to call this on a button click. How would i make a code with the same functionality, but using a javascript function?
Put your php in a file on its own, called set_session.php for example:
<?php
session_start();
unset($_SESSION['Plan1']);
echo 'unset';
?>
Call it in javascript:
<script>
function unset() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhttp.open("GET", "set_session.php", true);
xhttp.send();
}
</script>
<button type="button" onclick="unset()">Unset</button>
<div id="result"></div>

ajax can't display hash sign

i have this code of HTML
<textarea cols="120" rows="4" name="editor" id="editor" onkeyup="sendData()"></textarea>
<span id="container" name="container"></span>
and this one in JS
function sendData(){
var hc = document.getElementById('editor').value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("container").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "w.php?h=" + hc, true);
xmlhttp.send();
}
also this one in w.php
<?php
$h = $_REQUEST['h'];
echo $h;
?>
when i use this code it's work very fine but there is a problem with tow letters first one "#" and second one "&" so how can i fix this problem :)
thank you
You have to encode your data for a URI. Simply use
encodeURIComponent(/* The data to encode here. */)
before creating your request URL.

submit a form with ajax and js

so i tried to "parse" the form object with js and pass stuff that was supposed to be used to URL and submit a form with ajax.the code did not work.both A and B parameters were not successfully passed to server and response as i thought at the first place.
<html>
<head>
<script type="text/javascript">
function ajaxForm(form){
form = document.getElementById(form);
var elements = form.elements;
var content="";
var element;
for(i=0;i<elements.length;i++){
element = elements[i];
if(element.type=="text"){
content += encodeURIComponent(element.name)+"="+encodeURIComponent(element.value)+"&";
}
}
ajaxSubmit(content);
}
function ajaxSubmit(content){
if(content.length==0){
document.getElementById("txtinput").innerHTML="";
}
if(windows.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("txtinput").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","process.php?"+content,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form id="ajax_form">
A:<input type="text" name="A" />
<br/>
B:<input type="text" name="B" />
<input type="submit" onsubmit="ajaxForm('ajax_form')" />
</form>
<p>Elevator:<span id="txtinput" ></span><br/></p>
</body>
</html>
process.php:
<?php
$response = "This is simply an example for debugging purposes";
echo $response;
?>
AjaxForm and AjaxSubmit are never getting called, instead the form is getting submitted in the normal way. You need something like
<form id="ajax_form" onsubmit="ajaxForm('ajax_form');return false;">
try changing encodeURLComponent to ecodeURIComponent

Categories