passing HTML embedded PHP w/ innerHTML

Question

I need to be able to add additional rows to the following form group on the click of a button. The PHP statement echos a dynamic list of options for the select input based off records in the database.

  <h3>Check 1:</h3>
  <div class="row" id="check_1">
      <div class = "col-md-4 padding-top-10">
          <label for="checkJobName_1" class="control-label">Job/Client Name:</label>
          <select class="form-control" id="checkJobName_1" name="checkJobName_1">
              <option selected disabled>Choose a Client/Job</option>
              <?php echo $dynamicJobList; ?>
          </select>
      </div>

      <div class = "col-md-4 padding-top-10">
          <label for="checkNumber_1" class="control-label">Check #:</label>
          <input type="text" class="form-control" id="checkNumber_1" name="checkNumber_1" placeholder="Enter Check #"/>
      </div> 

      <div class = "col-md-4 padding-top-10">
          <label for="checkAmount_1" class="control-label">Check Amount:</label>
          <input type="text" class="form-control" id="checkAmount_1" name="checkAmount_1" placeholder="Enter $Amount of Check"/>
      </div>                    
 </div>

This is the javascript function I wrote to do so:

function addCheck()
{
            check_i++;
            var checkDiv = document.createElement('div');
            checkDiv.innerHTML = '<h3>Check '+check_i+':</h3><div class="row" id="check_'+check_i+'"><div class = "col-md-4 padding-top-10"><label for="checkJobName_'+check_i+'" class="control-label">Job/Client Name:</label><select class="form-control" id="checkJobName_'+check_i+'" name="checkJobName_'+check_i+'"><option selected disabled>Choose a Client/Job</option><?php echo $dynamicJobList; ?></select></div><div class = "col-md-4 padding-top-10"><label for="checkNumber_'+check_i+'" class="control-label">Check #:</label><input type="text" class="form-control" id="checkNumber_'+check_i+'" name="checkNumber_'+check_i+'" placeholder="Enter Check #"/></div><div class = "col-md-4 padding-top-10"><label for="checkAmount_'+check_i+'" class="control-label">Check Amount:</label><input type="text" class="form-control" id="checkAmount_'+check_i+'" name="checkAmount_'+check_i+'" placeholder="Enter $Amount of Check"/></div></div>';
            document.getElementById('checks').appendChild(checkDiv);        
    }

But it doesn't work cause if the PHP statement embedded in the HTML I'm trying to append to the "checks" form-group... how would you do it?

you can't run php on the client. php is a purely server-side language. if you want php output to be inserted into whatever JS is inserting, you'll have to do an ajax call to get php output. — Marc B
– Marc B, Commented Jun 2, 2015 at 18:33

Alex · Accepted Answer · 2015-06-02 18:44:48Z

1

Php is a complete server side language, which means no

Your best option is to json_encode your array and send it through ajax call, or in your php top side code area.

file1:

$array = array("data1" => array() ....);
echo json_encode($array);

Your html (with jquery):

$.post("file1 uri" , function(data) {
    var json = JSON.parse(data);
    foreach (var x in json) alert("x: " + x + " json[x]" + json[x]);
});

answered Jun 2, 2015 at 18:44

Alex

7135 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

camcharmar · Accepted Answer · 2015-06-02 18:47:53Z

0

PHP is a server side language, it sends data to the client and responds to requests.

Javascript is a client side language, that alters what the client is looking at, and not what the server knows.

The only way to get them to work together is to use AJAX calls in jQuery.

answered Jun 2, 2015 at 18:47

camcharmar

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

passing HTML embedded PHP w/ innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related