基於選擇選項的JavaScript動態表單生成

Question

我有一個小的javascript問題（我不知道JavaScript，我剛開始學習一點）。

因此，它是這樣的：

• 我有應該根據HTML選擇標籤中選擇一個選項，它應該有在選擇三個選項加載一組特定字段的形式。
  • 選擇選項
  • 報價
  • 電子郵件

我認識的人告訴我，使用交換機/案例做一些事情，但說實話，我不知道從哪裏開始改變。 我試圖做一些與隱藏/塊東西在CSS爲了隱藏/顯示特定的表格div根據選定的選項，但它不適用於我給我以下問題：

• 當我使用的形式提交按鈕整個表單消失，這樣是不應該發生

• 我有了兩個div的同一名稱的文本字段，第二件事-url-而且由於輸入被隱藏但如果我在-offer部分中寫入url，它仍會出現在頁面 中，它會將其設置爲空白，因爲em中的-url-字段（隱藏在當前和提供部分之下）表單的所有部分都是空白的。

我希望很清楚，如果您有任何問題，請問我！ 下面的代碼：

<script type="text/javascript" > 
 
     
 
$(document).ready(function(){ 
 
     $("select").change(function(){ 
 
      $("select option:selected").each(function(){ 
 
       if($(this).attr("value")=="offer"){ 
 
        $(".choose").hide(); 
 
        $(".offer").show(); 
 
        alert(attr("value")); 
 
       } 
 
       if($(this).attr("value")=="email"){ 
 
        $(".choose").hide(); 
 
        $(".email").show(); 
 
       } 
 
       if($(this).attr("value")=="choose"){ 
 
        $(".choose").hide(); 
 
        $(".choose1").show(); 
 
       } 
 
      }); 
 
     }).change(); 
 
    }); 
 
    
 
</script>

<style> 
 
.choose{ 
 
     padding: 0px; 
 
     display: none; 
 
     margin-top: 0px; 
 
     /*border: 1px solid #000; */ 
 
    } 
 
    .offer{ } 
 
    .email{ } 
 
    
 
    .choose1{background: #ffffff;} 
 

 
</style>

<form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin"> 
 
    <input type="hidden" name="id" value="{- $item.id -}" /> 
 
    <input type="hidden" name="save" value="1" /> 
 
    <input type="hidden" name="store" value="1" /> 
 
     <select name="is_type"> 
 
      <option value="choose">Choose option</option> 
 
      <option value="offer">Offer</option> 
 
      <option value="email">E-mail</option> 
 
     </select> 
 
    </div> 
 
    <div class="choose choose1">choose your option</div> 
 
    <div class="choose offer"> 
 
     <!-- offer option start --> 
 
       
 
    
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" /> 
 
     {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
      <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea> 
 
     {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 

 

 
     
 
     <!-- offer option end --> 
 
    
 
    </div> 
 
    <div class="choose email"> 
 
    <!-- email option start --> 
 
     
 
     
 
    <div class="form-group row"> 
 
     <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
      
 
     
 
    <!-- email option end --> 
 
    </div> 
 

 
    
 
    {- if $item.id -} 
 
    <button class="btn btn-default" type="submit">{- "Modify"|translate -}</button> 
 
    {- else -} 
 
    <button class="btn btn-default" type="submit">{- "Add"|translate -}</button> 
 
    {- /if -} 
 

 
    <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
 
    
 
</form>

現在不用擔心的形式大括號，因爲它使用了一些奇怪的智者適應（有些人我知道製造）。

我想這是一個長時間閱讀的問題：我如何根據javascript中的html選擇標記中的選定選項生成輸入。

感謝您抽出寶貴的時間來解決所有這些問題，如果您有問題，請再問一次，我真的必須完成這件事。

編輯某人問某事：這種形式去哪裏？

它發送到一個名爲links_edit.php的處理信息的控制器，我知道沒有指定任何操作，但默認爲該控制器，所以它執行數據庫查詢和表單驗證。

從控制器部分附加代碼（這是我怎麼從控制器的形式獲取數據：

<?php 
    $id  = $dbt->varGetFromInput('id'); 
    $store = $dbt->varGetFromInput('store'); 
    $save  = $dbt->varGetFromInput('save'); 
    $is_type = $dbt->varGetFromInput('is_type'); 
    ?> 

從這裏結束我可以做任何它

Answer 1

嘗試按照我的例如：

jQuery(document).ready(SwitchFormCtrl); 
 

 
function SwitchFormCtrl($) { 
 
    var self = this; 
 
    
 
    var select = $('select[name="is_type"]'); 
 
    var offerFieldset = $('.choose.offer'); 
 
    var emailFieldset = $('.choose.email'); 
 

 
    self.showEmailFieldset = function() { 
 
    return offerFieldset 
 
     .fadeOut() 
 
     .promise() 
 
     .then(function() { 
 
     return emailFieldset 
 
      .fadeIn() 
 
      .promise() 
 
     ; 
 
     }) 
 
    ; 
 
    }; 
 
    
 

 
    self.showOfferFieldset = function() { 
 
    return emailFieldset 
 
     .fadeOut() 
 
     .promise() 
 
     .then(function() { 
 
     return offerFieldset 
 
      .fadeIn() 
 
      .promise() 
 
     ; 
 
     }) 
 
    ; 
 
    }; 
 
    
 
    select.change(function() { 
 
    
 
    switch((this.value || '').toLowerCase()) { 
 
     case "offer": 
 
     self.showOfferFieldset(); 
 
     break; 
 
     
 
     case "email": 
 
     self.showEmailFieldset(); 
 
     break; 
 
    } 
 
    
 
    }); 
 
}

.choose { margin: 5px; border: 1px solid green; padding: 5px; } 
 
.choose.email { background: yellow; } 
 
.choose.offer { background: cyan; } 
 

 
/** hide both email and offer fieldset **/ 
 
.choose.offer, 
 
.choose.email { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin"> 
 
    <input type="hidden" name="id" value="{- $item.id -}" /> 
 
    <input type="hidden" name="save" value="1" /> 
 
    <input type="hidden" name="store" value="1" /> 
 
     <select name="is_type"> 
 
      <option value="choose">Choose option</option> 
 
      <option value="offer">Offer</option> 
 
      <option value="email">E-mail</option> 
 
     </select> 
 
    
 
    <div class="choose choose1">choose your option</div> 
 
    <div class="choose offer"> 
 
     <!-- offer option start --> 
 
       
 
    
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" /> 
 
     {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
      <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea> 
 
     {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 

 

 
     
 
     <!-- offer option end --> 
 
    
 
    </div> 
 
    <div class="choose email"> 
 
    <!-- email option start --> 
 
     
 
     
 
    <div class="form-group row"> 
 
     <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
      
 
     
 
    <!-- email option end --> 
 
    </div> 
 

 
    
 
    {- if $item.id -} 
 
    <button class="btn btn-default" type="submit">{- "Modify"|translate -}</button> 
 
    {- else -} 
 
    <button class="btn btn-default" type="submit">{- "Add"|translate -}</button> 
 
    {- /if -} 
 

 
    <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
 
    
 
</form>