We Keep Coding

How to get dynamically created textbox value in javascript

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();
}

checkbox not getting unchecked

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>

AJAX - PHP to Javascript Multi Array and Split

New to JSON/AJAX here but trying...
PHP page appears to be returning [{"id":"1"},{"id":2}] to my javascript.
How would I convert it to something useful like a dropdown in html?
Code:
<script>
function show(str) {
if (str=="") {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[1];
return;
}
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) {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[0];
}
}
xmlhttp.open("GET","get.php?q="+str,true);
xmlhttp.send();
}
</script>
<div id='ajax1'><b>ID dropdown will be listed here.</b></div>

I am not sure why you declared the variables twice, but I think this may help If you are asking what I think.
function showUser(fo,to)
{
if (fo=="")
{
document.getElementById("show").innerHTML="";
return;
}
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)
{
var arr=xmlhttp.responseText.split(":||:");//I used this as the delimiter
document.getElementById('show').innerHTML=arr[0];
document.getElementById('show1').innerHTML=arr[1];
}
}
xmlhttp.open("GET","some.php?q="+ fo + "&w=" + to,true);
xmlhttp.send();
}
And the php side is different than normal, you;ll need something like this.
if (!$result=mysqli_query($con,$sql))
{
die('Could not get data: ' . mysqli_error($sql));
}
$test=mysqli_fetch_all($result,MYSQLI_ASSOC);//this was key to fetching the array properly for display
$length=count($test);
$half_length=$length/2;
//echo $half_length."<br />";/used for testing
$test12=array_chunk( $test,$half_length+.5,false);//here use true to preserve keys, worked both ways for me
$test5=$test12[0];
$test6=$test12[1];
while(list($key,$val)=each($test5))
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want and will list your array in the format you want
}
echo ":||:";//Make sure the delimiter is out of the loop
while(list($key2,$val2)=each($test6) )
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want
//echo "result_count_".count($test)."_-st<br/>";//used for testing
Took me a while to get this, I hope it helps.

Javascript "getElementsByClassName" not working

I have a website with a picture of a tree, I have then used Ajax to remove that tree and insert a number using javascript. What I used for that was;
document.getElementById("cut_oak_tree");
I have now added another tree on the page, which should have the exact same function as the first tree, except that only the tree that you clicked on, shall be removed. To avoid duplicating code, I have tried adding following:
document.getElementsByClassName("cut_oak_tree");
and then changed my div from using id to class. However, nothing happens when I click any of the trees now. My current ajax code right now, looks like this:
function loadXMLDoc()
{
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)
{
var getClass = document.getElementsByClassName("cut_oak_tree").innerHTML=xmlhttp.responseText;//ask for this.
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
}
}
xmlhttp.open("POST","xxx",true);
xmlhttp.send();
}
I have been searching a lot and found that I might need to use a for loop together with the document.getElementsByClassName("cut_oak_tree");
but I can't really get that to work. If I have figured my problem correctly, everything should be good if I could just determine which of the tree images in the div should be removed when it's pressed. Thanks in advance.
EDIT:
Html sample:
<div id "thanks">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
<img class="cut_oak_tree" src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(), myFunction()">
</div>

Try the following:
document.getElementsByClassName("cut_oak_tree")[0];
If you want to apply changes to more than one elements with classname cut_oak_tree then you will have to use for loop
var getClass = document.getElementsByClassName("cut_oak_tree");
for(i=0;i<getClass.length;i++)
{
getClass[i].innerHTML = "";
}
Using your earlier HTML with slight modifications you can do the following:
HTML
<div class="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" />
</div>
Hence change your JS function to :
function loadXMLDoc(h)
{
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)
{
var getEle = document.getElementsByClassName('cut_oak_tree')[0];
getEle.innerHTML = getEle.innerHTML.replace(h,xmlhttp.responseText);
}
}
xmlhttp.open("POST","http://www.pbpixels.com/x/post.php",true);
xmlhttp.send();
}
Demo Fiddle
Response to comment:
Inorder to uniquely identify clicked <img>s with same images just make minor change to the one of the img srcs from the two.Example give space within src src="http://www.pbpixels.com/x/images/oak.png ".Note the space after .png which will make the difference between the two

I would think that the most straightforward way to do it would be to pass the clicked element into the loadXMLDoc() as a parameter, and then get the parent of that element. Something like this:
HTML
<div id="cut_oak_tree">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
<img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this), myFunction()">
</div>
JS
function loadXMLDoc(clickedElement) {
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) {
clickedElement.parentNode.innerHTML = xmlhttpinnerHTML = xmlhttp.responseText; //ask for this.
}
}
xmlhttp.open("POST","xxx",true); //the xxx's represent my website
xmlhttp.send();
}
NOTE: I'm not 100% sure that I have the logic right, since you changed your original post, while I was typing up my answer. :)
UPDATE #2: I found the original code in the edit history . . . my code should be correct now.

Using javascript and ajax to fill an input field

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.