Display multiple input fields on page and change font via radio button

Question

I'm trying to allow customers to customize what they want on their order in WooCommerce. They will have several text fields that they can enter their content into and then be able to select what font they want to use.

The content will display in a DIV on a page so the customer can see what it will look like before they click on Add To Cart.

The text fields and font choice will then be part of the order.

I know how to display a single line of text on a page using jQuery but I'm scratching my head at multiple lines of text and changing the font-family that's displayed.

Any ideas on how to do this?

I have sketched out my code here:

<form id="TheForm">

Line 1: <input type="text" name="Line1"><br>
Line 2: <input type="text" name="Line2"><br>
Line 3: <input type="text" name="Line2"><br>
Line 4: <input type="text" name="Line2"><br>
<br>
<br>
<input type="radio" value="Arial" id="font"><span style="font-family:arial">Arial</span><br>
<input type="radio" value="Verdana" id="font"><span style="font-family:Verdana">Verdana</span><br>
<input type="radio" value="Times New Roman" id="font"><span style="font-family:Times New Roman">Times New Roman</span><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div style="width:300px;height:100px;border:1px solid #000;">
Line 1 Text Here<br>
Line 2 Text Here<br>
Line 3 Text Here<br>
Line 4 Text Here
</div>

I have made some changes and have created this fiddle.Hope this will be helpful http://jsfiddle.net/wckLL69L/ — brk, Sep 28 '15 at 17:31
I think I may have not been clear when asking my question. What I would like to do is have it so when you type into the different fields and choose the desired font, the text in the black box will change, not the way the fields look. If possible, I'd like the display box to update as things are being typed in, without having to hit Submit. — Chris J. Popp, Sep 28 '15 at 17:46
Welcome to [SO]! I have added your code using the built-in code snippets feature which makes it easier for people to help you. — Brian Tompsett - 汤莱恩, Sep 30 '15 at 18:32

score 2 · Accepted Answer · edited May 23 '17 at 12:06

See the code snippet below. Basically, the script listens for a change on the form. When a change occurs the preview div is updated with the values from the text boxes and the font-family from the selected radio button. I edited your HTML to provide better functionality, such as labels connected to the inputs and exclusive radio buttons (they were missing the name attribute).

This example can be further refined, but should be a decent starting place. I adapted this nice function by Quentin to get the radio value.

var theForm = document.querySelector('#TheForm');
var lineInputs = document.querySelectorAll('.line');
var preview = document.querySelector('#preview');

theForm.addEventListener( 'change', updatePreview);
updatePreview();

function updatePreview() {
      preview.innerHTML = '';
      
      for (var i = 0, l = lineInputs.length; i < l; i++) {
        preview.innerHTML += lineInputs[i].value;
        
        i !== l - 1 ? preview.innerHTML += '<br />' : '';
      }
  
    function getFont(radio_group) {
      for (var i = 0, l = radio_group.length; i < l; i++) {
          var button = radio_group[i];
          if (button.checked) {
              return button;
          }
      }
      return undefined;
    }
    var checkedButton = getFont(theForm.elements.font);
    if (checkedButton) {
        preview.style.fontFamily = checkedButton.value;
    }
}

<form id="TheForm">

<label for="Line1">Line 1: </label><input class="line" type="text" id="Line1" name="Line1" value="Line 1 Text Here"><br>
<label for="Line2">Line 2: </label><input class="line" type="text" id="Line2" name="Line2" value="Line 2 Text Here"><br>
<label for="Line3">Line 3: </label><input class="line" type="text" id="Line3" name="Line3" value="Line 3 Text Here"><br>
<label for="Line4">Line 4: </label><input class="line" type="text" id="Line4" name="Line4" value="Line 4 Text Here"><br>
<br>
<br>
<input type="radio" value="Arial" id="font1" name="font"><label for="font1" style="font-family:arial">Arial</label><br>
<input type="radio" value="Verdana" id="font2" name="font"><label for="font2" style="font-family:Verdana">Verdana</label><br>
<input type="radio" value="Times New Roman" id="font3" name="font"><label for="font3" style="font-family:Times New Roman">Times New Roman</label><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div id="preview" style="width:300px;height:100px;border:1px solid #000;">
</div>

@ChrisJ.Popp I hope so. I wish I could help with that part, but I'm not familiar with WooCommerce. — Jacob, Sep 28 '15 at 23:46

Display multiple input fields on page and change font via radio button

1 Answers1