Create a button dynamically in PHP and preview it a new tab

In this tutorial you will learn about how you can create a button dynamically in PHP.

Here you will take button style properties like background color of button, button text color etc from HTML input field and send it to PHP page and show the dynamically created button. 

create a button dynamically in php 
 
 

This is our HTML code -  


  <div class="container p-5">
  <h1>Create Button dynamically </h1>
    <form action="" class="form">
        <div class="form-group">
          <label for="">Button Name</label>
          <input type="text"
            class="form-control w-50" name="button-name" id="button-name"  placeholder="Enter Button name">
        </div>

        <div class="form-group">
          <label for="">Button Color</label>
          <input type="color" name="" id="btn-color">
        </div>

        <div class="form-group">
          <label for="">Button Text Color</label>
          <input type="color" name="" id="btn-text-color">
        </div>

        <!-- <a name="" id="button-preview" class="btn btn-primary" href="#" role="button" type="submit">Button Preview</a> -->
        <div class="form-group">
          
          <input type="submit"  class="btn  btn-primary" name="" id="">
        </div>
        


    </form>
  </div>
 

This is our JavaScript (jQuery Code)

 


  $(".form").on("submit",function(e){
                e.preventDefault();
                var button_name = document.getElementById("button-name").value;
                var button_color = document.getElementById("btn-color").value;
                var button_text_color = document.getElementById("btn-text-color").value;
                var array = [button_name,button_color,button_text_color];
                var formdata = new FormData();
                formdata.append("data",JSON.stringify(array));

                $.ajax({
                      type: 'POST',
                      url: 'result.php',
                      data : formdata,
                      contentType:false,
                      processData:false,
                      success:function(response){
                           var page = window.open("about-blank");
                           page.document.open();
                           page.document.write(response);
                           page.document.close();
                     }
                })                          
             });
 

This is our PHP code

 


<?php

    $data = json_decode($_POST["data"]);
    $button_name = $data[0];
    $button_color = $data[1];
    $button_text_color = $data[2];

  
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <?php

        echo "<button style='color:".$button_text_color.";background-color:".$button_color.";'>".$button_name."</button>";

    ?>
</body>
</html>