Question

I am having trouble selecting the unique text boxes that are made when they have selected how many they need. It creates two text input boxes one for width and one for length. I want to select what data they input to these boxes once they have created how many they need but I am not sure how to do this. I have tried adding the value to the ‘name’ when the text inputs are created but can’t figure it out.. Any help would be appreciated.

Javascript:

function processSplashbacks() {

var splashbacks = document.worktopForm.splashbacks.value;           
var splashbackInfo = '<label> Length: </label><input type="text" id="length' + t + '" value="0"/>(cm)<br /><label> Width: </label><input type="text" name="width' + t + '" value="0"/>(cm)';

for (var t = 1; t <= splashbacks; t++){
    document.getElementById("splashWidLen").innerHTML += 'Splashback ' + t + ' dimensions' + splashbackInfo;
} }

function calculate() {
    var lengthOne = document.worktopForm.splashWidLen.length1.value;
    document.worktopForm.getElementById("quote").innerHTML += lengthOne;
}

HTML:

<form name="worktopForm">

<select name="worktops">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<input type="button" value="Add Splashbacks" onClick="processSplashbacks()"/>

<div id="splashWidLen"></div><br/>

<input type="button" value="Calculate quote" onClick="calculate()"/><br/>

<div id="quote"></div>

Answer 1

What do you think about using CoffeeScript and JQuery ?

@addInfo = (splashback) ->
    $("#splashWidLen").append("Splashback #{splashback} dimensions <label> Length: </label><input type='text' id='length#{splashback}' value='0'/>(cm)<br /><label> Width: </label><input type='text' name='width#{splashback}' value='0'/>(cm)<br>")

@processSplashbacks = () -> 
    count = $("select[name='worktops']").val()
    addInfo splashback for splashback in [1..count]

Example of working code on JSFiddle.