i am having 4 checkboxes and with the help of ajax am toggling between inserting data on checked and deleting it on unchecked. I am able to insert data successfully but the problem lies in the first checkbox as am unable to uncheck it once it gets checked
<form>
<fieldset>
<input id="prof" type="checkbox" onclick="insdel('Cricket')" value="Cricket" /><span>Cricket</span>
<input id="prof" type="checkbox" onclick="insdel('Football')" value="Football" /><span>Football</span>
<input id="prof" type="checkbox" onclick="insdel('Hockey')" value="Hockey" /><span>Hockey</span>
</fieldset>
</form>
Here is my javascript
function insdel(answer) {
if(document.getElementById("prof").checked = true){
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","pop.php?q="+answer,true);
xmlhttp.send();
}
}
else{
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","del.php?q="+answer,true);
xmlhttp.send();
}
}
}
Thanks in advance
Try this sample code to make it clear
var insdel = function(chk) {
console.log(chk.value, chk.checked, chk.id);
if (chk.checked) {
console.log('insert ', chk.value);
//do the rest
} else {
console.log('delete ', chk.value);
//do the rest
}
//do the rest
};
<form>
<fieldset><!-- updated ids, also the onclick parameter -->
<input id="prof1" type="checkbox" onclick="insdel(this)" value="Cricket" /><span>Cricket</span>
<input id="prof2" type="checkbox" onclick="insdel(this)" value="Football" /><span>Football</span>
<input id="prof3" type="checkbox" onclick="insdel(this)" value="Hockey" /><span>Hockey</span>
</fieldset>
</form>
Related
My code does not show the correct value
function showOffice(str) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("selectOffice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","officeData.php?office_id="+str,true);
xmlhttp.send();
}
this is my function for show office.
<table style="width: 100%;">
<tr >
<td><input style="width: 50%;"type="text" id="searchOffice" class="form-control" onkeypress="showOffice(this.value)" placeholder="Search Office..."></td>
</tr>
</table>
<div id="selectOffice"></div>
and I will be using the jquery for this. selectOffice table is in a different file.
If my code or question is insufficient, please message me and I will send the files. Thank you so much
I think you need to set respond text to value of the text box.
document.getElementById("selectOffice").value = xmlhttp.responseText;
hi friends Actually i have 2 questions..
I am creating a social website like facebook...
In this website i have multiple posts which are coming from database
If anyone want to give comment on this post then only first post is working..but the comment of first post is going to the last post..
<%String sql="select * from post ORDER BY id DESC";
st = con.createStatement();
rs=st.executeQuery(sql);%>
<input type="text" id="postboxwritereview" name="postboxwritereview" placeholder="write a review" onkeypress="loadXMLDoc2()"/>
<script type="text/javascript">
document.getElementById("postboxwritereview").onkeypress = function(event){
if (event.keyCode == 13 || event.which == 13){
var xmlhttp;
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("postbox_bottom_my_review").innerHTML=xmlhttp.responseText;
}
}
var x = document.getElementById("postboxwritereview").value;
xmlhttp.open("GET", 'insertReview.jsp?user='+x+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>&author_uid=<%=u_id%>', true);
xmlhttp.send();
document.getElementById("postboxwritereview").value="";
}
};
</script>
And second problem is that..
I am getting ajax response from servlet and showing that resppnse into a div
But there are many divs created dynamically with same id..so ajax response from first post is going to the last post..Plz help me
Here is the code..
AJAX CODE
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showRating").innerHTML=xmlhttp.responseText;
}
}
var username=$('input:radio[name=rating_blog]:checked').val();
xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
xmlhttp.send();
}
</script>
HTML CODE
<div id="submit" onclick="loadXMLDoc()">
<div>
<input id="rating1" type="radio" name="rating_blog" value="1" onclick="this.form.submit()">
<input id="rating2" type="radio" name="rating_blog" value="2" onclick="this.form.submit()">
<input id="rating3" type="radio" name="rating_blog" value="3" onclick="this.form.submit()">
</div>
Id should be unique on page!
If You use jQuery why don't use '$.ajax()'?
You can try this:
function loadXMLDoc(event){
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
$(event.target).find("#showRating").text = xmlhttp.responseText
}
}
var username=$('input:radio[name=rating_blog]:checked').val();
xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
xmlhttp.send();
}
I am sending post request through AJAX as below.
I am always getting xmlhttp.readyState = 1 and xmlhttp.status= 0 . xmlhttp.responseText is always empty.
Could you please tell me what could be the problem ?
I expect xmlhttp.readyState==4 && xmlhttp.status==200
<script>
//Ajax to send request..
function sendPayment()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.readyState);// this always returns = 1
alert(xmlhttp.responseText) ; //this is always empty.
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (xmlhttp.responseText=='1')
{
alert('success');
}
}
}
xmlhttp.open("POST","payments/callSSL.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(Id=100);
return false;
}
</script>
HTML PART
<input name="button" type="submit" id="button" value="Confirm" onclick="sendPayment()" />
If you are calling to your own another site,you have to give permission in your another site ie(http://my-other-site.com/payments/callSSL.php) to be accessed.
Put this header in your http://my-other-site.com/payments/callSSL.php
header('Access-Control-Allow-Origin: *');
for specific page
header('Access-Control-Allow-Origin: http://www.yourxmlrequestpage.php');
Hope this helps ,
thank you
you need to add a var as xmlhttp; on starting to get the status result please use below code i modify it,
<script>
//Ajax to send request..
function sendPayment()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.readyState);// this always returns = 1
alert(xmlhttp.responseText) ; //this is always empty.
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (xmlhttp.responseText=='1')
{
alert('success');
}
}
}
xmlhttp.open("POST","payments/callSSL.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(Id=100);
return false;
}
</script>
I have the following javascript which is intended to be used to dynamically fill another input field with the data retrieved via ajax. If I set it to fill a div it works, but changing to an input, it stops working.
My javascript is:
function showCD(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('txtHint').value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","script.php?q="+str,true);
xmlhttp.send();
}
Html is:
<input type="text" name="cds" value="" onKeyUp="showCD(this.value)">
<input type="text" name="txtHint" id="txtHint" />
As I say, if i replace the latter input with a div with the id of "txtHint" and alter the javascript to:
document.getElementById('txtHint').innerHTML=xmlhttp.responseText;
it works.
Thanks.
I have two inline java script functions, one intended to get a token value using xhr and second one will use that value to get the full response from server. But when i uploaded the same on server nothing happened.
Here goes the sample code:
function getUser(user)
{
var xmlhttp;
var result,x,i;
var uservalue=user;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
///here starts the getToken method..
var tokensave=function getToken(uservalue)
{
var xmlhttp;
var token,a,b;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
var data="op=login&pass=" +uservalue;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
token="";
a=xmlDoc.getElementsByTagName("token");
token=token + a.childNodes.nodeValue;
document.getElementById("myDiv").innerHTML=token;
}
};
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.send(data);
return token;
}
var header="Xyz-Authorization: "+tokensave;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
result="";
x=xmlDoc.getElementsByTagName("response");
for (i=0;i<x.length;i++)
{
result=result + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myNewDiv").innerHTML=result;
}
};
xmlhttp.setRequestHeader("Xyz-Authorization: ", +tokensave);
xmlhttp.send();
}
HTML CODE:
<div id="myDiv"></div>
<br />
<br />
<div id="myNewDiv"></div >
<br />
<form>
<input name="textbox" id="textbox" type="text" />
<input name="buttonExecute" onclick="getUser(document.getElementById('textbox').value)" type="button" value="Get User" />
</form>
What's wrong with this apparoach?
Thanks in advance for your valuable help...
mrana
You need to use a return token in the first function and use it like this getUser(getToken(user))
Just create a global variable, and you set change the value inside de function but it's still accesible from a global scope for all the functions you want.
var data = false;
function getData() {
// some ajax...
data = {cool:true};
}
function foo () {
if(data.cool) {
alert (data.cool)
}
}