CODEWITHSUNDEEP
phphtmlinnerhtml
Matt Molsberry
Matt Molsberry

Reputation: 45

passing HTML embedded PHP w/ innerHTML

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?

Upvotes: 0

Views: 78

Answers (2)

camcharmar
camcharmar

Reputation: 1

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.

Upvotes: 0

Alex
Alex

Reputation: 713

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

Upvotes: 1

Related Questions