基于select选项的javascript动态表单生成

I have a small javascript problem ( i don't really know javascript, I just started to learn a little).

我有一个小的JavaScript问题(我真的不知道javascript,我刚开始学习一点)。

So it goes something like this:

所以它是这样的:

• I have a form which should load a specific set of fields according to a selected option inside a html select tag so it should have three options in the select.
  • choose option
  • offer
  • email

我有一个表单应该根据html选择标记内的选定选项加载一组特定的字段,因此它应该在select中有三个选项。选择选项提供电子邮件

Someone I know told me to do something using switch/case but I honestly have no idea where to start from. I've tried to do something with those hide/block thingies in css in order to hide /show a specific form div according to the selected option, but it doesn't work for me giving me the following issues:

我认识的人告诉我使用开关/外壳做一些事情,但老实说我不知道​​从哪里开始。我试图用css中的那些hide / block thingies做一些事情,以隐藏/显示根据所选选项的特定表单div,但它不适用于我给我以下问题:

• when i use the form submit button the whole form disappears so that should not happen

  当我使用表单提交按钮时,整个表单消失,所以不应该发生

• the second thing i have a text field that has the same name in both divs called -url- and because the inputs are hidden yet still present on the page if I write an url in the -offer- part it will set it to blank because the -url- field (hidden at the moment and under the offer part) in the e-mail part of the form is blank.

  第二件事我有一个文本字段在两个div中都有相同的名称叫做-url-并且因为输入被隐藏但仍然存在于页面上如果我在-offer-部分写了一个url它会将它设置为空白因为表单的电子邮件部分中的-url-字段(隐藏在当前和提供部分下面)是空白的。

I hope it's clear, if you have any questions please ask me ! Here's the code :

我希望很清楚,如果您有任何疑问请咨询我!这是代码:

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

Now don't worry about the curly braces in the form as it uses some weird smarty adaptation(made by some guy i know).

I guess it'a long read for a question along the lines : how do i generate the inputs based on a selected option in html select tag in javascript.

我想这是一个长期阅读的问题:如何根据javascript中的html select标签中的选定选项生成输入。

Thanks for taking the time to actually go through all of this mess, and again if you have questions please ask them, I really have to get this done.

感谢您花时间实际处理所有这些混乱,如果您有疑问请再次询问,我真的必须完成这件事。

edit someone asked something: where does this form go?

编辑某人问了一句:这个表格在哪里?

it gows to a controller called links_edit.php which processes the information , I know there is no action specified but it defaults to that controller, so it does the database query and form validations.

它发送到一个名为links_edit.php的控制器来处理信息,我知道没有指定任何操作,但它默认为该控制器,因此它执行数据库查询和表单验证。

Additional code from the controller part(this is how i get the data from the form in the controller:

来自控制器部分的附加代码(这是我如何从控制器中的表单获取数据:

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

from here on end I can do whatever to it

从这里结束,我可以做任何事情

1 个解决方案

#1

Try to follow my example:

试着效仿我的例子:

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>