將jQuery變量連接到一個字符串，以便將ID添加到動態生成的輸入字段

我想根據在單獨的輸入字段中指定的量動態添加輸入字段。我已經設法通過使用在SO上提出的類似問題中的jquery代碼來完成這個工作。我一直無法做的是將'id'var連接到輸入字段的id。將jQuery變量連接到一個字符串，以便將ID添加到動態生成的輸入字段

對不起，我是含糊不清的，我將包括下面的所有代碼，所以你可以看到我正在嘗試做什麼。另外，我使用Laravel框架時，一些html表單代碼不是標準的。

HTML

{{ Form::open(['url' => 'add_columns/' . $page, 'class' => 'pure-form pure-form-stacked']) }} 
        <div class="pure-g"> 
         <div class="pure-u-1-2"> 
          <p><b>Amount of columns to add: </b></p> 
         </div> 

         <div class="pure-u-1-2"> 
          {{ Form::text('qty', null, ['style' => 'width: 3em;', 'id' => 'qty']) }} 
         </div> 
        </div> 

        <div id="newFields"></div> 

        {{ Form::submit('add', ['class' => 'pure-button pure-button-primary']) }} 

       {{ Form::close() }}

的jquery

$(function() { 

//var input = $('{{ Form::text("awe", null, ["placeholder" => "column"]) }}'); 
var newFields = $(''); 
var id = $(1); 

$('#qty').bind('blur keyup change', function() { 
    var n = this.value || 0; 
    if (n+1) { 
     if (n > newFields.length) { 
      addFields(n); 
     } else { 
      removeFields(n); 
     } 
    } 
}); 

function addFields(n) { 
    for (i = newFields.length; i < n; i++) { 
     var newInput = $('{{ Form::text("' + id + '", null, ["placeholder" => "column"]) }}'); 
     newFields = newFields.add(newInput); 
     newInput.appendTo('#newFields'); 
     id++; 
    } 
} 

function removeFields(n) { 
    var removeField = newFields.slice(n).remove(); 
    newFields = newFields.not(removeField); 
}

}）;

這導致當我需要的是

任何和所有幫助將不勝感激。

來源

2014-09-22 Julien Vincent

{{Form：}}是服務器不生成客戶端的東西。如果您在頁面渲染後查看標記，我很確定您將會看到標記。 – Gjohn 2014-09-22 16:43:10

不，我寫的輸入不是由服務器生成的，服務器將它們解釋爲，無論哪種方式，爲什麼這個問題 – 2014-09-22 16:44:11

這很重要，因爲您要求jquery創建一個輸入字段並將其添加到您的頁面，沒有輸入（如標籤）創建。如果將其更改爲var newInput = $（''），並將其添加到newInput，它將被渲染。 {{Form :: Submit}}是AngularJs？ – Gjohn 2014-09-22 16:50:57

function addFields(n) { 
    for (i = newFields.length; i < n; i++) { 
     var newInput = $('<input id="index' + i + '" type="text" placeholder="column">'); 
     newFields = newFields.add(newInput); 
     newInput.appendTo('#newFields'); 
     i++; 
    } 
}

來源

2014-09-22 16:58:18

這是有效的 - 雖然可以輸出{{Form :: text（）}}來代替嗎？ – 2014-09-22 17:12:47

對不起，這是jQuery，所有'{{Form :: text}}'給出'錯誤：語法錯誤，無法識別的表達式'。 – 2014-09-22 17:22:36

在essense朱利安，在{{形式：文字（）}}因爲如果你看看那呈現在您的瀏覽器，你將不會看到HTML最終呈現的任何{{形式：文字（） }}標籤。是否有這樣的特殊原因，或僅僅是爲了保持它的一致性？ {{Form：text（）}}給了你什麼好處？

來源

2014-09-22 17:20:13 Gjohn

只是好奇，如果有可能的話。我將使用您的解決方案來處理我正在處理的內容，但只是想知道是否可以堅持{{Form}}約定。如果這會導致很多亂七八糟的jquery擺弄，那麼這沒關係。 – 2014-09-22 17:25:29

除非有辦法在那裏粘貼{{Form}}約定，並調用任何負責將該約定轉換爲適當的HTML標記的方法。 – Gjohn 2014-09-22 17:29:42

換句話說 - 很多不必要的雜亂代碼。好吧 - 謝謝你的幫助！ – 2014-09-22 17:31:29

將jQuery變量連接到一個字符串，以便將ID添加到動態生成的輸入字段

回答

相關問題