<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name"> </div> </div> <div class="form-group"> <label for="inputemail3" class="col-sm-2 control-label">email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email"> </div> </div> <div class="form-group"> <label for="phonenumber" class="col-sm-2 control-label">phone:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="phone" name="phone"> </div> </div> <div class="form-group"> <label for="major" class="col-sm-2 control-label">major:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="major" name="major"> </div> </div> <hr> <div class="form-group"> <label for="itemforsale" class="col-sm-2 control-label">item sale:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="itemforsale1" name="itemforsale1"> </div> </div> <div class="form-group"> <label for="quantity" class="col-sm-2 control-label">quantity:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="quantity1" name="quantity1"> </div> </div> <div class="form-group"> <label for="price1" class="col-sm-2 control-label">price:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="price1" name="price1"> </div> </div> <div class="form-group"> <label for="itemoneimg1" class="col-sm-2 control-label">image 1:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemoneimg1"> </div> </div> <div class="form-group"> <label for="itemoneimg2" class="col-sm-2 control-label">image 2:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemoneimg2"> </div> </div> <hr> <!-- 2 --> <div class="form-group"> <label for="itemforsale2" class="col-sm-2 control-label">item sale:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="itemforsale2" name="itemforsale2"> </div> </div> <div class="form-group"> <label for="quantity2" class="col-sm-2 control-label">quantity:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="quantity2" name="quantity2"> </div> </div> <div class="form-group"> <label for="major2" class="col-sm-2 control-label">price:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="price2" name="price2"> </div> </div> <div class="form-group"> <label for="itemtwoimg1" class="col-sm-2 control-label">image 1:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemtwoimg1"> </div> </div> <div class="form-group"> <label for="itemtwoimg2" class="col-sm-2 control-label">image 2:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemtwoimg2"> </div> </div> <!-- end 2 --> <hr> <!-- 3 --> <div class="form-group"> <label for="itemforsale3" class="col-sm-2 control-label">item sale:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="itemforsale3" name="itemforsale3"> </div> </div> <div class="form-group"> <label for="quantity3" class="col-sm-2 control-label">quantity:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="quantity3" name="quantity3"> </div> </div> <div class="form-group"> <label for="price3" class="col-sm-2 control-label">price:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="price3" name="price3"> </div> </div> <div class="form-group"> <label for="itemthreeimg1" class="col-sm-2 control-label">image 1:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemthreeimg1"> </div> </div> <div class="form-group"> <label for="itemthreeimg2" class="col-sm-2 control-label">image 2:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemthreeimg2"> </div> </div> <input id="submit" name="submit" type="submit" value="submit" class="btn btn-primary pull-right"> </form>would there anyway me parts <-- 2 --> , <-- 3 -->, appear if click "additional files" button?
i tried looking couldn't find nice , easy way it. guys
add class divs want show—like, class="show-onclick"—and use jquery handle click event:
the html this:
<div class="show-onclick form-group"> <label for="itemforsale2" class="col-sm-2 control-label">item sale:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="itemforsale2" name="itemforsale2"> </div> </div> <div class="show-onclick form-group"> <label for="quantity2" class="col-sm-2 control-label">quantity:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="quantity2" name="quantity2"> </div> </div> <div class="show-onclick form-group"> <label for="major2" class="col-sm-2 control-label">price:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="price2" name="price2"> </div> </div> <div class="show-onclick form-group"> <label for="itemtwoimg1" class="col-sm-2 control-label">image 1:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemtwoimg1"> </div> </div> <div class="show-onclick form-group"> <label for="itemtwoimg2" class="col-sm-2 control-label">image 2:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemtwoimg2"> </div> </div> <!-- end 2 --> <hr> <!-- 3 --> <div class="show-onclick form-group"> <label for="itemforsale3" class="col-sm-2 control-label">item sale:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="itemforsale3" name="itemforsale3"> </div> </div> <div class="show-onclick form-group"> <label for="quantity3" class="col-sm-2 control-label">quantity:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="quantity3" name="quantity3"> </div> </div> <div class="show-onclick form-group"> <label for="price3" class="col-sm-2 control-label">price:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="price3" name="price3"> </div> </div> <div class="show-onclick form-group"> <label for="itemthreeimg1" class="col-sm-2 control-label">image 1:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemthreeimg1"> </div> </div> <div class="show-onclick form-group"> <label for="itemthreeimg2" class="col-sm-2 control-label">image 2:</label> <div class="col-sm-10"> <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemthreeimg2"> </div> </div> <button type="button" id="additional-files">additional files</button> and javascript this:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> $(document).ready(function() { $('#additional-files').click(function() { $('.show-onclick').show(); }); }); </script> 
Comments
Post a Comment