选择由循环创建的文本输入框中写入的值

时间:2012-09-26 12:58:51

标签: javascript html forms web

我在选择他们选择了多少需要的文本框时遇到了问题。它创建了两个文本输入框,一个用于宽度,一个用于长度。我想在他们创建了需要的数量之后选择他们输入这些数据的数据,但我不知道如何做到这一点。我已经尝试在创建文本输入时将值添加到'name'但无法弄清楚..任何帮助将不胜感激。

使用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>

1 个答案:

答案 0 :(得分:1)

您如何看待使用CoffeeScriptJQuery

@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