2017-08-15 83 views
1

我有字符串輸入範圍添加輸入號碼/文字範圍

<input form="send" type="range" min="40" max="300" name="width[]" value="40"> 

它意味着一個部分的寬度。 如果用戶需要某些部分,他會單擊添加按鈕並獲取新的輸入範圍的新字符串。 所以我得到不同的值(零件的大小)的數組。

現在我需要添加重複範圍值的輸入數字/文本,反之亦然。用戶可以輸入一個數字,範圍輸入也會改變。或者他改變輸入範圍和輸入數字也得到這個值。

我知道如何去做,但沒有寬度數組。 例如

<input type="range" name="width" min="40" max="200" value="40" 
oninput="this.form.widthPlus.value=this.value" /> <input 
type="number" name="widthPlus" min="40" max="200" value="40" 
oninput="this.form.width.value=this.value" /> 

有誰能告訴我該怎麼做,要輸入數字reapeat值並且如果用戶用添加按鈕添加新的字符串被克隆。 我想我只能用JS/jQuery來做。

回答

0

最簡單的方法是每次只使用新的value屬性。沒有像width[](不工作),而是width0width1width2,..

所以地方在你的代碼,你有這將創建一個新的輸入元素的功能:

var counter = 0; 
function addElement() { 
    var html = '<input type="range" name="width' +  counter + '" min="40" max="200" value="40" oninput="this.form.widthPlus' + counter + '.value=this.value" />' + 
       '<input type="number" name="widthPlus' + counter + '" min="40" max="200" value="40" oninput="this.form.width'  + counter + '.value=this.value" />'; 
    $(".outerContainer").append(html); 
    counter++; 
} 

每次和用戶點擊一個按鈕,你可以調用這個函數來添加一個新的元素。

還有一些不需要name-attribute向上計數的方法。如果用戶輸入了某些內容,則可以調用JS函數,然後使用jQuery來確定編輯了哪個元素(第n個孩子)。但是這有點複雜,需要更多的代碼。

+0

謝謝。我糾正了一些時刻,並顯示了兩個輸入。但是我的價值觀存在問題。我問了一個新的問題這個話題 – Mikhail

0

此代碼沒問題。我糾正了一點點

var counter = 0; 
    $(document).ready(function(){ 
     var html = $("<input type='range' name='width' + counter + '' min='40' max='200' value='40' oninput='this.form.widthPlus' + counter + '.value=this.value' />" + 
"<input type='number' name='widthPlus' + counter + '' min='40' max='200' value='40' oninput='this.form.width' + counter + '.value=this.value' />"); 
     $(".form-col-2").append(html); 
     counter++; 
    });