表單字段值都沒有得到傳遞到JSON對象正確

這是我的jsfiddle：https://jsfiddle.net/inchrvndr/7pwh9p8g/表單字段值都沒有得到傳遞到JSON對象正確

The bordered form elements get cloned on click of "+" button.

所有的克隆形式元素的值越來越傳遞到JSON除了其克隆正在取得父。

單擊「保存」按鈕後，您可以看到除第一個有邊距的div之外的所有表單字段值的JSON對象警報。

這是爲什麼？請幫忙。謝謝:)

來源

2017-05-30 Inchara Raveendra

而不是避免_「鏈接到jsfiddle.net必須伴隨代碼...」警告通過縮進你應該發佈一個[最小，完整和可驗證的示例]的問題（https：// stackoverflow。 com/help/mcve）在這個問題本身 – Andreas

@Andreas這個問題需要我發佈整個代碼本身，這就是爲什麼我選擇JS小提琴。我一直在努力，並沒有發現什麼是錯誤的，我在這裏尋求幫助。感謝您的建議:) –

_「發佈整個代碼本身」_不，只是一個[最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve）。你應該首先解決標記中的錯誤（那些明亮的紅色「東西」在小提琴中） – Andreas

我有溶膠ved這個問題。

這裏是回答小提琴：AnswerFiddle

I added the Join Operator into the same "to-be-cloned" div and hid its div before cloning.

它克隆後變得可見，也就是點擊後，「+」按鈕。現在，克隆之前和克隆表單字段的值都傳遞給JSON。

來源

2017-05-30 05:37:56

你的網頁還有重複的ID嗎？ –

它動態生成ID。沒有重複的ID，你可以「檢查」 –

試試這個..

UPDATE：

您有重複的元素，像這樣的：id="op"只能有一個ID獨特的頁面上。我建議你滴ID或產生這些

$(document).ready(function() { 
 
$('#deleteRow').closest('.form-group').hide(); 
 
$('#addRow').on('click', function (e) { 
 
    var len = $('.child-border').length; 
 
    $('.parent-border-repeat').clone().find(':input').each(function (idx, ele) { 
 
     ele.name = ele.name + len; 
 
     ele.id = ele.id + len; 
 
     ele.value = ''; 
 
    }).end().find('.form-group').toggle(true).end() 
 
      .toggleClass('parent-border-repeat child-border').hide() 
 
      .appendTo('#container').slideDown('slow'); 
 
}); 
 

 
$('button.btn:contains("Save")').on('click', function (e) { 
 
    var jsonData = $('form.form-horizontal') 
 
      .find(':input:not(button)').get() 
 
      .reduce(function (acc, ele) { 
 
       acc[ele.id] = ele.value; 
 
       return acc; 
 
      }, {}); 
 
    // console.log(jsonData); 
 
\t alert(JSON.stringify(jsonData, null, 4)); 
 
}); 
 

 
$('#container').on('click', '[id^=deleteRow]', function(e) { 
 
    var jsonData = $(this).closest('.child-border, .parent-border-repeat') 
 
      .find(':input:not(button)').get() 
 
      .reduce(function (acc, ele) { 
 
       acc[ele.name || ele.id] = ele.value; 
 
       return acc; 
 
      }, {}); 
 
    $(this).closest('.child-border, .parent-border-repeat').remove(); 
 
    console.log(jsonData); 
 
}); 
 
});

.navbar-nav li { 
 
    margin-top: 8px; 
 
    margin-bottom: 8px; 
 
} 
 
.tabs-container { 
 
    margin-top: 100px; 
 
\t margin-bottom: 75px; 
 
} 
 

 
.parent-border-repeat{ 
 
\t display: none; 
 
} 
 
.parent-border, .child-border { 
 
    border: 1px solid #CCC; 
 
    border-radius: 4px; 
 
    padding: 15px; 
 
    margin-bottom: 15px; 
 
} 
 
.btn-circle.btn-lg { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 10px 16px; 
 
    font-size: 18px; 
 
    line-height: 1.33; 
 
    border-radius: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <button class="btn btn-md btn-success">Login</button> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row tabs-container"> 
 
    <div class="col-sm-offset-2 col-sm-8"> 
 
     <div class="panel with-nav-tabs panel-default"> 
 
     <div class="panel-heading"> 
 
      <ul class="nav nav-tabs"> 
 
      <li class="active"> 
 
       <a href="#tab1default" data-toggle="tab">Rules</a> 
 
      </li> 
 
      <li> 
 
       <a href="#tab2default" data-toggle="tab">Events</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="tab-content"> 
 
      <div class="tab-pane fade in active" id="tab1default"> 
 
       <form class="form-horizontal"> 
 
       <div class="form-group"> 
 
        <label class="control-label col-sm-2" for="nameRules">Name:</label> 
 
        <div class="col-sm-10"> 
 
        <input type="text" class="form-control" id="nameRules" name="nameRules" placeholder="Enter name"></div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="control-label col-sm-2" for="typeRules">Type:</label> 
 
        <div class="col-sm-10"> 
 
        <select class="form-control" id="typeRules" name="typeRules"> 
 
         <option>Type1</option> 
 
         <option>Type2</option> 
 
         <option>Type3</option> 
 
         <option>Type4</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="control-label col-sm-2" for="descriptionRules">Description:</label> 
 
        <div class="col-sm-10"> 
 
        <textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ</textarea> 
 
        </div> 
 
       </div> 
 
       <div class="parent-border col-sm-offset-2 col-sm-10"> 
 
        <div class="form-group"> 
 
        <div class="col-sm-offset-10"> 
 
         <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i> 
 
         </button> 
 
        </div> 
 
        </div> 
 
        <div class="form-group"> 
 
        <label class="control-label col-sm-2" for="elhs">Expression LHS:</label> 
 
        <div class="col-sm-10"> 
 
         <input type="text" class="form-control" id="elhss" name="elhs" placeholder="Enter LHS" name="lhs"></div> 
 
        </div> 
 
        <div class="form-group"> 
 
        <label class="control-label col-sm-2" for="op">Operator</label> 
 
        <div class="col-sm-10"> 
 
         <select class="form-control" id="opp" name="op"> 
 
         <option> 
 
          <=</option> 
 
          <option>>=</option> 
 
          <option>!==</option> 
 
          <option> 
 
           <</option> 
 
           <option>></option> 
 
           <option>==</option> 
 
           </select> 
 
          </div> 
 
          </div> 
 
          <div class="form-group"> 
 
          <label class="control-label col-sm-2" for="erhs">Expression RHS:</label> 
 
          <div class="col-sm-10"> 
 
           <input type="text" class="form-control" id="erhss" name="erhs" placeholder="Enter RHS" name="rhs"></div> 
 
          </div> 
 
          <div class="form-group"> 
 
          <label class="control-label col-sm-2" for="datatype">Datatype:</label> 
 
          <div class="col-sm-10"> 
 
           <input type="text" class="form-control" id="datatypee" name="datatype" placeholder="Enter datatype" name="datatype"></div> 
 
          </div> 
 
         </div> 
 
         <div class="parent-border-repeat col-sm-offset-2 col-sm-10"> 
 
          <div class="form-group"> 
 
          <div class="col-sm-offset-10"> 
 
           <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg"> <i class="glyphicon glyphicon glyphicon-trash"></i> 
 
           </button> 
 
          </div> 
 
          </div> 
 
          <div class="form-group"> 
 
          <label class="control-label col-sm-2" for="joinop">Join Operator</label> 
 
          <div class="col-sm-10"> 
 
           <select class="form-control" id="joinopp"> 
 
           <option>&&</option> 
 
           <option>||</option> 
 
           </select> 
 
          </div> 
 
          </div> 
 
          <div class="form-group"> 
 
          <label class="control-label col-sm-2" for="elhs">Expression LHS:</label> 
 
          <div class="col-sm-10"> 
 
           <input type="text" class="form-control" id="elhs" name="elhs" placeholder="Enter LHS" name="lhs"></div> 
 
          </div> 
 
          <div class="form-group"> 
 
          <label class="control-label col-sm-2" for="op">Operator</label> 
 
          <div class="col-sm-10"> 
 
           <select class="form-control" id="opp" name="op"> 
 
           <option> 
 
            <=</option> 
 
            <option>>=</option> 
 
            <option>!==</option> 
 
            <option> 
 
             <</option> 
 
             <option>></option> 
 
             <option>==</option> 
 
             </select> 
 
            </div> 
 
            </div> 
 
            <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="erhs">Expression RHS:</label> 
 
            <div class="col-sm-10"> 
 
             <input type="text" class="form-control" id="erhs" name="erhs" placeholder="Enter RHS" name="rhs"></div> 
 
            </div> 
 
            <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="datatype">Datatype:</label> 
 
            <div class="col-sm-10"> 
 
             <input type="text" class="form-control" id="datatype" name="datatype" placeholder="Enter datatype" name="datatype"></div> 
 
            </div> 
 
           </div> 
 
           <div id="container"></div> 
 
           <div class="form-group"> 
 
            <div class="col-sm-offset-6"> 
 
            <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"> 
 
             <i class="glyphicon glyphicon-plus"></i> 
 
            </button> 
 
            </div> 
 
           </div> 
 
           </form> 
 
          </div> 
 
          <div class="tab-pane fade" id="tab2default"> 
 
           <form class="form-horizontal"> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="nameEvents">Name:</label> 
 
            <div class="col-sm-10"> 
 
            <input type="text" class="form-control" id="nameEvents" name="nameEvents" placeholder="Enter name"></div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="typeRules">Type:</label> 
 
            <div class="col-sm-10"> 
 
            <select class="form-control" id="typeRules" name="typeRules"> 
 
             <option>Type1</option> 
 
             <option>Type2</option> 
 
             <option>Type3</option> 
 
             <option>Type4</option> 
 
            </select> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label class="control-label col-sm-2" for="descriptionEvents">Description:</label> 
 
            <div class="col-sm-10"> 
 
            <textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ</textarea> 
 
            </div> 
 
           </div> 
 
           </form> 
 
          </div> 
 
          </div> 
 
         </div> 
 
         </div> 
 
        </div> 
 
        </div> 
 
        <!-- /.container --> 
 
        <div class="navbar navbar-inverse navbar-fixed-bottom"> 
 
        <div class="container"> 
 
         <div class="navbar-footer pull-right"> 
 
         <ul class="nav navbar-nav"> 
 
          <li> 
 
          <button class="btn btn-md btn-success">Save</button> 
 
          </li> 
 
         </ul> 
 
         </div> 
 
        </div> 
 
        </div> 
 
       </div>

來源

2017-05-30 05:16:17

Umm no。 **第一次**表達式LHS數據類型'值在邊界內仍然沒有進入JSON對象 –

我想'減少'它是那個責怪 –

感謝您的時間和精力。我現在已經發布了答案。你可以參考:)非常感謝！ –

表單字段值都沒有得到傳遞到JSON對象正確

回答

相關問題