javascript - Show/hide areas of form (im using bootstrap) -

-

i show different areas on form dependent on selected. can javascript use jquery effects better.

i've seen lots of jquery examples on net cannot see how implement form.

would possible show me 1 example on form , able rest.

<!doctype html>  <html lang="en">      <head>    <meta charset="utf-8">  <meta http-equiv="x-ua-compatible" content="ie=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">    <title>basic form</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxazxuh4hwsyylfb+j125mxis6mr5fohampbg064zb+afewh94ndvacbm8qnd" crossorigin="anonymous">      </head>  <body>      <div class="container">      <div class="row">        <div class="content-main col-md-12">          <form>	          <img src="img/logo.png">          <br><br>          metsa wood quick estimation tool          <br><br>  <div class="col-md-9">	       <fieldset class="form-group">      <label for="exampleselect1">type of construction</label>      <select class="form-control" id="typeofconstruction">        <option>traditional masonry</option>        <option>timber frame</option>        </select>    </fieldset>      <!-- below show if timber frame selected -->        <fieldset class="form-group">      <label for="partywalls">which walls party walls?</label>  	   <br><input type="checkbox"> w1  	   <br><input type="checkbox"> w2  	   <br><input type="checkbox"> w3  	   <br><input type="checkbox"> w4    </fieldset>  <!-- above show if timber frame selected -->          <fieldset class="form-group">      <label for="floorwidtha">floor width a(x)</label>      <input type="text" class="form-control" id="floorwidtha" placeholder="enter in mm">      <!--<small class="text-muted">this text a</small>-->          <label for="floorwidthb">floor width b(x)</label>      <input type="text" class="form-control" id="floorwidthb" placeholder="enter in mm">     <!-- <small class="text-muted">this text a</small>-->    </fieldset>              <fieldset class="form-group">      <label for="floorwidtha">is there stair opening?</label>    <br><input type="checkbox">    </fieldset>          <!-- below show if stair opening checked -->     <fieldset class="form-group">      <label for="floorwidtha">opening width c(x)</label>      <input type="text" class="form-control" id="doorwidthc" placeholder="enter in mm">      <!--<small class="text-muted">this text a</small>-->      <label for="floorwidtha">opening width d(x)</label>      <input type="text" class="form-control" id="doorwidthd" placeholder="enter in mm">    </fieldset>  <!-- above show if stair opening checked -->                   <button type="submit" class="btn btn-primary">submit</button>  </form>  </div>          <div class="col-md-3">          <img src="img/drawing.jpg">        </div>      </div>    </div>  </div>                        <!--        <fieldset class="form-group">      <label for="exampleinputpassword1">password</label>      <input type="password" class="form-control" id="exampleinputpassword1" placeholder="password">    </fieldset>    <fieldset class="form-group">      <label for="exampleselect1">example select</label>      <select class="form-control" id="exampleselect1">        <option>1</option>        <option>2</option>        <option>3</option>        <option>4</option>        <option>5</option>      </select>    </fieldset>    <fieldset class="form-group">      <label for="exampleselect2">example multiple select</label>      <select multiple class="form-control" id="exampleselect2">        <option>1</option>        <option>2</option>        <option>3</option>        <option>4</option>        <option>5</option>      </select>    </fieldset>    <fieldset class="form-group">      <label for="exampletextarea">example textarea</label>      <textarea class="form-control" id="exampletextarea" rows="3"></textarea>    </fieldset>    <fieldset class="form-group">      <label for="exampleinputfile">file input</label>      <input type="file" class="form-control-file" id="exampleinputfile">      <small class="text-muted">this placeholder block-level text above input. it's bit lighter , wraps new line.</small>    </fieldset>    <div class="radio">      <label>        <input type="radio" name="optionsradios" id="optionsradios1" value="option1" checked>        option 1 , that&mdash;be sure include why it's great      </label>    </div>    <div class="radio">      <label>        <input type="radio" name="optionsradios" id="optionsradios2" value="option2">        option 2 can else , selecting deselect option 1      </label>    </div>    <div class="radio disabled">      <label>        <input type="radio" name="optionsradios" id="optionsradios3" value="option3" disabled>        option 3 disabled      </label>    </div>    <div class="checkbox">      <label>        <input type="checkbox"> check me out      </label>    </div>            -->       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vz2wrjmwsjrmw/8u7i6pwi6alo1l79snbrmgidpgiwj82z8ea5lenwvxbmv1pah7" crossorigin="anonymous"></script>    </body>    </html>​

do this.this you

<!doctype html>  <html lang="en">      <head>    <meta charset="utf-8">  <meta http-equiv="x-ua-compatible" content="ie=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">    <title>basic form</title>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxazxuh4hwsyylfb+j125mxis6mr5fohampbg064zb+afewh94ndvacbm8qnd" crossorigin="anonymous">    <style type="text/css">    .wfiedls{      display: none;          }      ba  </style>    </head>  <body>      <div class="container">      <div class="row">        <div class="content-main col-md-12">          <form>	          <img src="img/logo.png">          <br><br>          metsa wood quick estimation tool          <br><br>  <div class="col-md-9">	       <fieldset class="form-group">      <label for="exampleselect1">type of construction</label>      <select class="form-control" id="typeofconstruction">        <option>traditional masonry</option>        <option>timber frame</option>        </select>    </fieldset>      <!-- below show if timber frame selected -->        <fieldset class="form-group wfiedls">      <label for="partywalls">which walls party walls?</label>  	   <br><input type="checkbox"> w1  	   <br><input type="checkbox"> w2  	   <br><input type="checkbox"> w3  	   <br><input type="checkbox"> w4    </fieldset>  <!-- above show if timber frame selected -->          <fieldset class="form-group">      <label for="floorwidtha">floor width a(x)</label>      <input type="text" class="form-control" id="floorwidtha" placeholder="enter in mm">      <!--<small class="text-muted">this text a</small>-->          <label for="floorwidthb">floor width b(x)</label>      <input type="text" class="form-control" id="floorwidthb" placeholder="enter in mm">     <!-- <small class="text-muted">this text a</small>-->    </fieldset>              <fieldset class="form-group">      <label for="floorwidtha">is there stair opening?</label>    <br><input type="checkbox">    </fieldset>          <!-- below show if stair opening checked -->     <fieldset class="form-group">      <label for="floorwidtha">opening width c(x)</label>      <input type="text" class="form-control" id="doorwidthc" placeholder="enter in mm">      <!--<small class="text-muted">this text a</small>-->      <label for="floorwidtha">opening width d(x)</label>      <input type="text" class="form-control" id="doorwidthd" placeholder="enter in mm">    </fieldset>  <!-- above show if stair opening checked -->                   <button type="submit" class="btn btn-primary">submit</button>  </form>  </div>          <div class="col-md-3">          <img src="img/drawing.jpg">        </div>      </div>    </div>  </div>           <script type="text/javascript">     $(document).ready(function(){      $("#typeofconstruction").on('change',function(){        var selectedbalue = $("#typeofconstruction").val();        if (selectedbalue == "timber frame")         {          $(".wfiedls").slidedown(500);        }        else{          $(".wfiedls").slideup(500);        }      });                                 });   </script>               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vz2wrjmwsjrmw/8u7i6pwi6alo1l79snbrmgidpgiwj82z8ea5lenwvxbmv1pah7" crossorigin="anonymous"></script>    </body>    </html>​


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more