CODEWITHSUNDEEP
javascriptphpjqueryajaxinnerhtml
John
John

Reputation: 261

How to call PHP value in innerHTML with AJAX

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.

Upvotes: 1

Views: 1956

Answers (3)

nerdlyist
nerdlyist

Reputation: 2847

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.

Upvotes: 3

Wesley Smith
Wesley Smith

Reputation: 19571

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

Upvotes: 0

James Paterson
James Paterson

Reputation: 2915

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>

Upvotes: 0

Related Questions