0

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

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

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:

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

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.

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.

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

10
  • So what is supposed to happen when form submits? There is no submit handling code shown so page would reload as it currently stands due to the way form submit process works when no valid action is set
    – charlietfl
    Apr 3, 2016 at 14:22
  • it gows to a controller called links_edit.php which processed the information , I know there is no action specified but it defaults to that controller.
    – PhpJunior
    Apr 3, 2016 at 14:26
  • How? by ajax? Need to understand process better to be able to help solve problem
    – charlietfl
    Apr 3, 2016 at 14:28
  • in the controller it does all the stuff like database query's and form validation
    – PhpJunior
    Apr 3, 2016 at 14:29
  • Well if it's a standard form submit then problem lies in server code if form disappears. You aren't being specific enough
    – charlietfl
    Apr 3, 2016 at 14:30

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.