How to call PHP value in innerHTML with AJAX

Question

I have dynamically input fields generated by jQuery like this

I would like to know how I can echo a PHP-variable when the innerHTML input got a value-tag.

var x2counter = 1;
var x2data_i = 45;

function addExam2(d2p_1){
    var e = document.getElementById("d2p_1");

    e.innerHTML += "<input name='xdata_" + x2data_i + "' placeholder='type in' type='text' value='<?php echo $value;?>'>";
    x2counter++;
    x2data_i++;
};

I know that AJAX can do this. Let`s say i have a PHP file like

value.php

$value = ('abc' === 'abc') ? 'right' : 'false' ;

How can I call value.php inside innerHTML so that it would be something like:

...
 $(wrapper).append('<div><input type="text" name="something" value="<?php echo $value;?>"/>');
...

I'm an absolute beginner regarding jQuery so I really would appreciate if there is someone who could help me out.

Thanks alot.

Answer 1

Using jQuery it can be like this. Also update your value.php to return/echo the value. If you need specific values based on something being sent use data to send it.

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap");
    var add_button      = $(".add_field_button");
    var x = 1;
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){
            x++;
            $.ajax({
                method: "GET", //or POST whatever you need
                url: "value.php"
                //date: //pass what you want
                ,success: function(value){//If you are successful do 
                                          //this with the value returned.
                    $(wrapper).append("<div><input type='text' name='something' value='"+ value +"' />");
                }
                //can do fail too
            });
        }
    });
});

There is also $.get and $.post that are more specific but lead back to the $.ajax call.