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.

Where is your script with your jQuery stored? If it's stored in a .php file, you can just echo the variable straight in. — James Paterson
– James Paterson, Commented Apr 15, 2016 at 13:01
"I know that AJAX can do this."....yep, have you tried that yet? ;) — Wesley Smith
– Wesley Smith, Commented Apr 15, 2016 at 13:03
Do you have an ajax call yet? If so can we see it or is the question how to set up Ajax? — nerdlyist
– nerdlyist, Commented Apr 15, 2016 at 13:10

nerdlyist · Accepted Answer · 2016-04-15 13:45:45Z

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.

James Paterson · Accepted Answer · 2016-04-15 13:13:14Z

Use AJAX to load the variable from your web server. Have a file value.php that simply echo's your value to an empty page. Then, the function getValue(), seen below, using the XMLHttpRequest object, will fetch that value from the webpage. Then call this function in your ready function and append the value of the variable within the HTML.

<script>
function getValue() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            return xhttp.responseText;
        }
      };
    xhttp.open("GET", "http://example.com/path/to/file.php", true);
    xhttp.send();
}

$(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++;
            $(wrapper).append('<div><input type="text" name="something" value="'+getValue()+'"/>');
        }
    });
});
</script>

Wesley Smith · Accepted Answer · 2016-04-15 13:19:13Z

You show your php file as creating an independent value where the calculations it makes do not recive any input from the front end, if this is really your use case (doubtful, see below) you could just do this:

In value.php:

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

In your jQuery:

$.get( "example.php", function(result) {
  alert( result ); // result = $value here
});

However, a setup like this would not be very practical and it is much more likely that you need to send some data to the php page for it to process $value in which case, youd want something more like:

In value.php:

$sentValue = isset($_GET['input']) ? $_GET['input'] : null;
$value = ('abc' === $sentValue ) ? 'right' : 'false' ;
echo $value;

In your jQuery:

$.get( "example.php", {"input":"some value"}, function(result) {
  alert( result ); // result = $value here
});

Collectives™ on Stack Overflow

How to call PHP value in innerHTML with AJAX

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related