Using Ajax Success Data in CSS to show Preview with values entered in the form

Question

I have a form with about 80 inputs in type text and select.

All input fields are related to css values. I want to show preview with new values (onChange any input value) in form without submitting form ( may be ajax will needed for this. Ajax with php can be ok.... I am newbie in this field)

Sample form code is as follows

<form id="myform">
    <label>Container Background Color : </label>
    <input type="text" name="container_bgcolor" value=""> // Using jscolor.js with readonly input to select color in html color code format
    <label>Container Color : </label>
    <input type="text" name="container_color" value="">
    <label>Container Width : </label>
    <select name="container_width">
        <option value="">Select Width </option>
        <option value="480">480 Px </option>
        <option value="500">500 Px </option>
        <option value="550">550 Px </option>
    </select>
    <input type="submit" value="Submit Form">

</form>

Now I want to show preview with input fields value. (Expecting OnChange Input Value)

CSS file sample : e.g. mystyle.css / mystyle.php (with header("Content-type: text/css; charset: UTF-8");)

.container {
    background-color: {container_bgcolor}; /* New Value from input */
    color: {container_color}; /* New Value from input */
    padding: 10px; /* Fixed Value  */
    margin : auto;  /* Fixed Value  */
    width : {container_width}px; /* New Value from input */
}

And in Div preview :

 <div class="container"> // here above css will be applied
     Rest Info....

 </div>

Preview can be shown below form / in modal by clicking floating button click.

How can i achieve this ? Thank you in advance...

You say you wish to show a preview - but a preview of what precisely? — Professor Abronsius, Jul 06 '21 at 14:23
I am trying to create age verification for site. And I want to give access to admin to change style / font color etc of age verification popup box — darshan, Jul 06 '21 at 14:25

score 1 · Answer 1 · answered Jul 06 '21 at 14:24

You dont need ajax you can do that with javascript. Ill use jQuery.

Your HTML, i added ID to the select and input

<form id="myform">
<label>Container Background Color : </label>
<input id="container_bgcolor" type="text" name="container_bgcolor" value="">
    <label>Container Color : </label>
    <input id="container_color" type="text" name="container_color" value="">
        <label>Container Width : </label>
        <select name="container_width">
            <option value="">Select Width </option>
            <option value="480">480 Px </option>
            <option value="500">500 Px </option>
            <option value="550">550 Px </option>
        </select>
        <input type="submit" value="Submit Form">
</form>

jQuery:

$('#container_bgcolor').change(function(){
    var container_bgcolor = $('#container_bgcolor').val();
    $('<your element>').css('background-color', container_bgcolor);
});

I have around 80 input fields in form. (above is sample ) so can we use (#myform).serialize(); for it ? — darshan, Jul 06 '21 at 14:27

score 0 · Answer 2 · answered Jul 06 '21 at 14:28

To achieve what you require simply place an input event handler on all the input elements which control the CSS properties of the .container.

To DRY up the code you can place a data attribute on them all which governs which specific CSS property they affect, so that you can use a single event handler for all form controls

let $container = $('.container');

$('.css-property').on('input change', e => {
  let $target = $(e.target);
  $container.css($target.data('css-property-name'), $target.val());
});

label { display: block; }

/* default values */
.container {
  background-color: #FFFFFF;
  color: #000000;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.5/jscolor.min.js" integrity="sha512-YxdM5kmpjM5ap4Q437qwxlKzBgJApGNw+zmchVHSNs3LgSoLhQIIUNNrR5SmKIpoQ18mp4y+aDAo9m/zBQ408g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="myform">
  <label>
    Container Background Color:
    <input type="text" class="css-property" name="container_bgcolor" value="" data-jscolor="{ value: '#FFFFFF' }" data-css-property-name="background-color" />
  </label>

  <label>
    Container Color: 
    <input type="text" class="css-property" name="container_color" value="" data-jscolor="{ value: '#000000' }" data-css-property-name="color" />
  </label>

  <label>
    Container Width:
    <select name="container_width" class="css-property" data-css-property-name="width" >
      <option value="">Select Width </option>
      <option value="480px">480px</option>
      <option value="500px">500px</option>
      <option value="550px">550px</option>
    </select>
   </label>

  <input type="submit" value="Submit Form">
</form>

<div class="container">
  Rest Info....
</div>

Ok..thnx for solution. I will try with it. One more query, I have around 80 input fields in the form. Can we work with less work for all 80 input values ? Or can we send all values to mycss.php file and echo each value there in pre designed css format alogn with these new values ? — darshan, Jul 06 '21 at 14:31
I'm not quite sure what you mean, however you can send all the form values to the server side using AJAX, and you can do whatever you require with them there. — Rory McCrossan, Jul 06 '21 at 14:32
exactly... But I am stuck at how to send all values and reproduce them in mystyle.php file... — darshan, Jul 06 '21 at 14:33
That's a completely separate issue to what you asked above, so I would suggest starting a new question about it. — Rory McCrossan, Jul 06 '21 at 14:34
That said, the approach is as simple as 'method 1' in this answer: https://stackoverflow.com/a/14217926/519413 — Rory McCrossan, Jul 06 '21 at 14:34
ok.... But can u give solution how to send this all data to ajax mystyle.php file ? — darshan, Jul 06 '21 at 14:35
Ok...got it with https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php/14217926#14217926 — darshan, Jul 06 '21 at 14:35

Using Ajax Success Data in CSS to show Preview with values entered in the form

2 Answers2