Load same div everytime a button is clicked

Question

I have been troubled on how to load the same div into the same page for days. Been looking for answer in stackoverflow but not found one yet.

Simplified, this is my code so far,

<script>
    function add_fields() {
        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.open("POST", "add_more.php", false);
        xmlhttp.send();

        document.getElementById("add_more1").innerHTML = xmlhttp.responseText;
    }
</script>

<html>
    <body>
        <input type="button" onclick="add_fields()" value="ADD"/>

        <div id="add_more1"></div>
    </body>
</html>

The problem is that when i clicked the button, it will only load add_more.php once. I want it to load everytime the button is clicked. How to do that? Please help.

`XMLHttpRequest` is asynchronous. You'll need to expand you request with a readystate event. — Mouser, Mar 02 '15 at 16:52
What you're doing is you're replacing the content inside your div, because you're using `innerHTML = respone`. You'll get a response every time you click the ADD button. Try appending to the div instead of replacing it. Maybe try using `innerHTML += respone` Hope it helps! @Mouser answered it. :) — sulavvr, Mar 02 '15 at 17:00

score 2 · Accepted Answer · edited May 23 '17 at 12:06

function add_fields() {
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"); //really no need for this anymore these days.
  }

xmlhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200) //success
    {
        document.getElementById("add_more1").innerHTML=this.responseText;   
    }
}

  xmlhttp.open("POST","add_more.php",true); //set the sync to true, modern browsers will block a synchronous request.
  xmlhttp.send();



}

This updated versions contains a readystate event that will fill your div every time the Ajax call is completed.

You were using a XMLHttpRequest with the asynchronous option set to false. This could block the user experience and modern browsers (like Firefox) will block this.

if you would like to add more content to the div, use

document.getElementById("add_more1").innerHTML += this.responseText;

+= adds content to the element instead of replacing it. It's a shorthand for:

 document.getElementById("add_more1").innerHTML = document.getElementById("add_more1").innerHTML + this.responseText;

SIDENOTE: You are using a POST (in this case a GET would be better, since you're retrieving information only). If you want to send post data to the server you need to put the querystring (without the ?) as an argument in the send method.

To continue with this read up on asynchronous coding:

Easy to understand definition of "asynchronous event"? (very simple explanation).
How does Asynchronous Javascript Execution happen? and when not to use return statement? (more comprehensive).

I have tried it..but when the button is clicked, nothing happen. I'm really a newbie in ajax or javascript. — user3513410, Mar 02 '15 at 17:03
@user3513410 the code as it is now should work. Works perfect in my environment. What is you console saying (if you don't know where that is, use the F12 keyboard key in your browser to bring it up). — Mouser, Mar 02 '15 at 17:03
I set the option to true, and try it again. still nothing happened. — user3513410, Mar 02 '15 at 17:08
@user3513410, scusi minor bug. Forgot the `on` at the `readystatechange`. Try the updated code, should work beautifully. — Mouser, Mar 02 '15 at 17:11
ohh.. thanks.now it works great! really2 appreciate it. another simple question, when i load this ,multiple times, the name of the input, for example textbox name, it will be the same right? if i put array symbol([]) just like a simple array, will it worked when i post/get info? — user3513410, Mar 02 '15 at 17:19
Yes, if you're appending multiple inputs with the same name, ``. When you submit, `$_POST['test']` will contain an array of all the values in your input element with the name `test`. — sulavvr, Mar 02 '15 at 17:26

Load same div everytime a button is clicked

1 Answers1