<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Form Customer</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="<?php echo base_url(); ?>asset/sliderform/style.css" rel="stylesheet"> <link href="<?php echo base_url(); ?>asset/css/style.css" rel="stylesheet"> <link href="<?php echo base_url(); ?>asset/bootstrap/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } h1{ color:#ccc; font-size:36px; text-shadow:1px 1px 1px #fff; padding:20px; } label.filebutton { width:80px; height:20px; overflow:hidden; position:relative; } .btn input { opacity: 0; filter: alpha(opacity = 0); -ms-filter: "alpha(opacity=0)"; cursor: pointer; _cursor: hand; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } } </style> <link href="<?php echo base_url(); ?>asset/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> </head> <body> <!--Navigation bar--> <div class="navbar navbar-inverse navbar-fixed-top" > <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Everseiko</a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" style="background-color:#fff;"><i class="icon-user"></i> <?php echo $this->auth->CI->session->userdata('nama'); ?><b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="<?php echo base_url(); ?>"> <i class="icon-tags"></i> <?php echo $this->auth->CI->session->userdata('role'); ?></a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="<?php echo base_url(); ?>user/logout"><i class="icon-off"></i> Logout</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <!--Container--> <div class="container-fluid"> <div class="row-fluid"> <!--sidebar--> <div class="span3 test"> <div id="navigation" style="display:none;"> <ul> <li class="selected"> <a href="#"><i class="icon-chevron-right"></i> Contact Details</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Vehicles Details</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Types</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Tyre Usages</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Recommendation</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Upload Picture</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Confirm</a> </li> </ul> </div> </div> <!--form content--> <div class="span7"> <?php //notiffication if ($this->session->userdata('status')=='1' ) { $tipe = $this->session->userdata('tipe'); echo " <div id='note' class='alert ".$tipe."'> <button type='button' class='close' data-dismiss='alert'>×</button> ".$this->session->userdata('message')." </div>"; } ?> <div class="row-fluid"> <div id="content"> <div id= "wrapper"> <div id="steps"> <form id="formElem" class="form-horizontal" action="<?php echo base_url(); ?>form/form_submit" method="post" name="fo1"> <!--Contact details--> <fieldset class="step"> <legend><strong>Contact Details</strong></legend> <h5>General Location</h5> <input type="text" placeholder="Province" name="cdProvince"> <input type="text" placeholder="Kota" name="cdKota"> <h5>Company Details</h5> <label class="radio inline"> <input type="radio" name="rbCd" value="appoinment">By Appoinment </label> <label class="radio inline"> <input type="radio" name="rbCd" value="show">Cold Call/go show </label> <label class="radio inline"> <input type="radio" name="rbCd" value="Other"><input type="text" placeholder="Other" name="rbCdO"> </label> <br></br> <input type="text" placeholder="Staff of Scene" name="cdSos" value="<?php echo $this->auth->CI->session->userdata('nama'); ?>"> <input type="text" id="search" placeholder="Customer Name" style="width:300px" name="cdCusName"> <div id="quick-search" style="width:300px; display:none; border:1px solid #efefef;"></div> <br></br> <label class="radio inline"> <input type="radio" name="rbCd2" value="Company">Company </label> <label class="radio inline"> <input type="radio" name="rbCd2" value="Individual">Individual </label> <br></br> <button type="button" class="btn btn-small">Search</button> <h5>Address / Phone no</h5> <input type="text" placeholder="Head Office" name="cdOffice"> <input type="text" id="" placeholder="Phone" name="cdTelp" onkeypress="return isNumberKey(event)"> <br></br> <input type="text" id="" placeholder="Branch/Garrage" name="cdBranch"> <input type="text" id="" placeholder="Phone" name="cdTelp2" onkeypress="return isNumberKey(event)"> <br></br> <h5>Contact Person</h5> <input type="text" placeholder="Name" name="cdcpname"> <input type="text" id="" placeholder="Phone" name="cdcpphone" onkeypress="return isNumberKey(event)"> <br></br> <h5>Nature Business</h5> <label class="checkbox"> <input type="checkbox" name="cdCb_1" value="Bus">Bus </label> <label class="checkbox"> <input type="checkbox" name="cdCb_2" value="Minning">Minning </label> <label class="checkbox"> <input type="checkbox" name="cdCb_3" value="Expedition">Expedition </label> <label class="checkbox"> <input type="checkbox" name="cdCb_4" value="Loging">Loging </label> <label class="checkbox"> <input type="checkbox" name="cdCb_5" value="Cement">Cement </label> <label class="checkbox"> <input type="checkbox" name="cdCb_6" value="Bulk">Bulk </label> <label class="checkbox"> <input type="checkbox" name="cdCb_7" value="Container">Container </label> </fieldset> <!--vehicles details--> <fieldset class="step"> <div id="slider1"> <legend><strong>Vehicles Details</strong></legend> <table> <tr> <td colspan="2"><strong>Number of vehicles owned</strong></td> </tr> <tr> <td valign="top" width="50%"> <table> <tr height="50px"> <td width="100px">Light Truck</td> <td width="100px">QTY</td> </tr> <tr height="50px"> <td>4 wheels</td> <td> <input type="text" style="width:30px" name="vdTr4" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>6 wheels</td> <td> <input type="text" style="width:30px" name="vdTr6" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>10 wheels</td> <td> <input type="text" style="width:30px" name="vdTr10" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> </table> </td> <td width="50%"> <table> <tr height="50px"> <td width="70x">Truck</td> <td>QTY</td> </tr> <tr height="50px"> <td>6 wheels</td> <td> <input type="text" style="width:30px" name="vdLt6" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>8 wheels</td> <td> <input type="text" style="width:30px" name="vdLt8" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>10 wheels</td> <td> <input type="text" style="width:30px" name="vdLt10" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>12 wheels</td> <td> <input type="text" style="width:30px" name="vdLt12" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>14 wheels</td> <td> <input type="text" style="width:30px" name="vdLt14" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>18 wheels</td> <td> <input type="text" style="width:30px" name="vdLt18" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>Other</td> <td> <input type="text" style="width:30px" name="vdLtot" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> </table> </td> </tr> <tr> <td colspan="2">QTR</td> </tr> <tr> <td><input class="span10" id="appendedInput" type="text" placeholder="type" name="vdQtrType"></td> <td> <input class="span5" id="appendedInput" type="text" placeholder="Qty" name="vdQtrQty" maxlength="3" onkeypress="return isNumberKey(event)"> <input class="span5" id="appendedInput" type="text" placeholder="Total tyre" name="vdQtrTyre" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> </table> <hr> <table> <tr height="30px"> <td colspan="3"><strong>Load and Speed Details</strong></td> </tr> <tr height="30px"> <td colspan="3">Type of Load</td> </tr> <tr height="30px"> <td width="150px"> <label class="checkbox"><input type="checkbox" name="vdCb_1" value="Materials">Materials</label> </td> <td width="150px"> <label class="checkbox"><input type="checkbox" name="vdCb_2" value="Passenger">Passenger</label> </td> <td width="150px"> <label class="checkbox"><input type="checkbox" name="vdCb_3" value="Goods">Goods</label> </td> </tr> <tr height="30px"> <td> <label class="checkbox"><input type="checkbox" name="vdCb_4" value="Soil">Soil</label> </td> <td> <label class="checkbox"><input type="checkbox" name="vdCb_5" value="General Cargo">General Cargo</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="vdCb_6" value=""> <input type="text" style="width:100px" placeholder="Other" name="vdCb_6"> </label> </td> </tr> <tr height="30px"> <td colspan="3">Average Weight of Loads</td> </tr> <tr> <td valign="top" width="50%"> <table> <tr height="50px"> <td width="100px">Light Truck</td> <td width="100px">Wt</td> </tr> <tr height="50px"> <td>4 wheels</td> <td> <input type="text" style="width:30px" name="vdTr4wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>6 wheels</td> <td> <input type="text" style="width:30px" name="vdTr6wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>10 wheels</td> <td> <input type="text" style="width:30px" name="vdTr10wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> </table> </td> <td width="50%"> <table> <tr height="50px"> <td width="70x">Truck</td><td>Wt</td> </tr> <tr height="50px"> <td>6 wheels</td> <td> <input type="text" style="width:30px" name="vdLt6wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>8 wheels</td> <td> <input type="text" style="width:30px" name="vdLt8wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>10 wheels</td> <td> <input type="text" style="width:30px" name="vdLt10wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>12 wheels</td> <td> <input type="text" style="width:30px" name="vdLt12wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>14 wheels</td> <td> <input type="text" style="width:30px" name="vdLt14wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>18 wheels</td> <td> <input type="text" style="width:30px" name="vdLt18wt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> <tr height="50px"> <td>Other</td> <td> <input type="text" style="width:30px" name="vdLtotwt" maxlength="3" onkeypress="return isNumberKey(event)"> </td> </tr> </table> </td> </tr> <tr height="50px"> <td colspan="2">Points of Origin Destination <input type="text" name="vdDest"></td> </tr> <tr height="30px"> <td colspan="2">Driving Condition</td> </tr> <tr> <td colspan="2"> <div class="input-append"> <input id="appendedInput" type="text" placeholder="Good Roads" name="vdgoro"> <span class="add-on">%</span> </div> <div class="input-append"> <input id="appendedInput" type="text" placeholder="Toll Roads" name="vdtoro"> <span class="add-on">%</span> </div> </td> </tr> <tr> <td colspan="2"> <div class="input-append"> <input id="appendedInput" type="text" placeholder="Bad Roads" name="vdbaro"> <span class="add-on">%</span> </div> <div class="input-append"> <input id="appendedInput" type="text" placeholder="Others" name="vdothers"> <span class="add-on">%</span> </div> </td> </tr> </table> </div> </fieldset> <!--type--> <fieldset class="step"> <legend><strong>Types</strong></legend> <table> <tr height="50px"> <td colspan="3"> <strong>Tyre Brands and Type</strong> </td> </tr> <tr> <td width="150px"> <label class="checkbox"> <input type="checkbox" name="tpCb_1" value="MRF">MRF</label> </td> <td width="150px"> <label class="checkbox"> <input type="checkbox" name="tpCb_2" value="Goodyear">Goodyear</label> </td> <td width="150px"> <label class="checkbox"> <input type="checkbox" name="tpCb_3" value="Bridgestone">Bridgestone</label> </td> <td width="150px"> <label class="checkbox"> <input type="checkbox" name="tpCb_4" value="GT">GT</label> </td> </tr> <tr> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_5" value="Dunlop">Dunlop</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_6" value="Chinese">Chinese</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_7" value="Kumho">Kumho</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_8" value="Hankook">Hankook</label> </td> </tr> <tr> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_9" value="Ceat">Ceat</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_10" value="Thai">Thai</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_11" value="Maxxis">Maxxis</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_12" value="Chengsin">Chengsin</label> </td> </tr> <tr> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_13" value="Epco">Epco</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_14" value="Swallow">Swallow</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb_15" value="ChaoYang">ChaoYang</label> </td> </tr> <tr height="50px"> <td colspan="3"><strong>Type of Purchase</strong></td> </tr> <tr> <td> <label class="checkbox"> <input type="checkbox" name="tpCb2_1" value="New Tyres">New Tyres</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb2_2" value="Retreads">Retreads</label> </td> </tr> <tr height="50px"> <td colspan="3"><strong>Type</strong></td> </tr> <tr> <td> <label class="checkbox"> <input type="checkbox" name="tpCb3_1" value="Rib">Rib</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb3_2" value="Lug">Lug</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb3_3" value="Bias">Bias</label> </td> <td> <label class="checkbox"> <input type="checkbox" name="tpCb3_4" value="Radial">Radial</label> </td> </tr> </table> </fieldset> <!--tyre usages--> <fieldset class="step"> <legend><strong>Tyre Usages</strong></legend> <div class="container-fluid"> <div class="row-fluid" style="overflow:auto;height:300px;"> <div class="span4"> <strong>Milleage</strong><br></br> <label class="radio inline"> <input type="radio" name="trRb" value="Estimates">Estimates</label> <label class="radio inline"> <input type="radio" name="trRb" value="Actual">Actual</label> <br></br> <div class="input-append"> <input class="span9" id="appendedInput" type="text" placeholder="Front" name="trmfront"> <span class="add-on">Km</span> </div><br></br> <div class="input-append"> <input class="span9" id="appendedInput" type="text" placeholder="Rear" name="trmrear"> <span class="add-on">Km</span> </div><br></br> <label>Details</label> <textarea rows="3" name="trmdetails"></textarea> </div> <div class="span7 offset1"> <strong>New Tyre Purchase per Month</strong><br></br> <label class="radio inline"> <input type="radio" name="trRb2" value="Estimates">Estimates</label> <label class="radio inline"> <input type="radio" name="trRb2" value="Actual">Actual</label> <br></br> <label> <strong> Brand       Pattern       Size       Qty </strong> </label> <label>MRF   </label> <div class="span10 MRF" style="margin-top:-25px;"> <div class="span10 inline" style="float:right;margin-bottom:3px;"> <input style="width:50px;" id="MRF1" type="text" name="pattern[]"> <input style="width:30px;" id="MRF2" type="text" name="size[]"> <input style="width:30px;" id="MRF3" type="text" name="qty[]"> <button type="button" onclick="addPurchaseMRF()">+</button> </div> </div> <input type="hidden" name="MRFcount" id="countMRF"> </br> <div class="Othertype"> <div class="span11 inline" style="margin-bottom:3px;"> <input style="width:50px;margin-right:0;" id="other0" type="text" name="obrand[]"> <input style="width:50px;" id="other1" type="text" name="opattern[]"> <input style="width:30px;" id="other2" type="text" name="osize[]"> <input style="width:30px;" id="other3" type="text" name="oqty[]"> <button type="button" onclick="addPurchaseOther()">+</button> </div> </div> <input type="hidden" name="Othercount" id="countOther"> <br></br> </div> </div><hr> <div class="row-fluid"> <div class="span4"> <strong>Front Tyre</strong><br></br> <input class="span9" id="appendedInput" type="text" placeholder="psi" name="trfpsi"><br></br> <label class="checkbox inline"> <input type="checkbox" name="cb31" value="New Tyre">New Tyre</label>   <label class="checkbox inline"> <input type="checkbox" name="cb32" value="Retreads">Retreads</label> </div> <div class="span4 offset1"> <strong>Rear Tyre</strong><br></br> <input class="span9" id="appendedInput" type="text" placeholder="psi" name="trrpsi"><br></br> <label class="checkbox inline"> <input type="checkbox" name="cb41" value="New Tyre">New Tyre</label>   <label class="checkbox inline"> <input type="checkbox" name="cb42" value="Retreads">Retreads</label> </div> </div><br></br> <div class="row-fluid"> <input class="span9" id="appendedInput" placeholder="OTR" name='trotr'><br></br> <textarea class="span9" rows="5" placeholder="Problem faced with current type" name="trproblem"></textarea> </div> </div> </fieldset> <!--Recommendation--> <fieldset class="step"> <legend><strong>Recommendation</strong></legend> <div class="container-fluid rec"> <div class="row-fluid recommendation"> <select class="span3" id="rpat" style="margin-bottom:3px"> <option>M77</option> <option>MMR</option> <option>SLUG</option> <option>SLUG 50+</option> <option>SLUG 50+R</option> <option>SM95</option> <option>SML</option> </select> <select class="span3" id="rsz"> <option>7.50-16</option> <option>9.00-20</option> <option>10.00-20</option> <option>11.00-20</option> </select> <select class="span3" id="rmrk"> <option>1</option> <option>2</option> </select> <button type="button" class="btn" onclick="addRec()">Add</button> </div> <input type="hidden" name="rcmcount" id="countRcm"> <br> <label>Other</label> <div class="row-fluid rOther"> <input class="span3" id="rpat" type="text" name="rpattern[]" placeholder="Pattern"> <input class="span3" id="rsz" type="text" name="rsize[]" placeholder="Size"> <input class="span3" id="rmrk" type="text" name="rremark[]" placeholder="Remark"> </div> <div class="row-fluid rOther"> <input class="span3" id="rpat" type="text" name="rpattern[]" placeholder="Pattern"> <input class="span3" id="rsz" type="text" name="rsize[]" placeholder="Size"> <input class="span3" id="rmrk" type="text" name="rremark[]" placeholder="Remark"> </div> </div> </fieldset> <!--Upload Picture--> <fieldset class="step"> <legend><strong>Upload Picture</strong></legend> <div class="container-fluid"> <label class="filebutton btn btn-success" id="input_field"> <i class="icon-plus icon-white"></i> Add Files <input type="file" multiple="true" id="files" onkeydown="return false;" onchange="upload_img()" name="uploadFile"/> </label> <br></br> <div id="images" style="background-color:#C0C0C0;border:none"> </div> <br></br> <button class="btn btn-warning" type="button" onclick="clearFileInputField('input_field')" style="display:none" id="clear">Clear </button> </div> </fieldset> <!--confirm--> <fieldset class="step"> <legend><strong>Confirm</strong></legend> <div class="" style="width:100%;height:100%;margin-top:200px;" align="center"> <a href="<?php echo base_url(); ?>"><button type="button" class="btn btn-large" name="save">Discard</button></a><br></br> <button type="submit" value="Submit" class="btn btn-primary btn-large" name="send" >Save</button> <br></br> </div> </fieldset> </form> </div> </div> </div> </div> <!-- <div class="row-fluid"> <div class="span12"> <div class="pull-right" style="margin-top:10px;"> <button class="btn btn-small" id="nextb">Previous</button> <button class="btn btn-small" id="prevb">Next</button> </div> </div> </div> --> </div><!--/span7--> </div><!--/row--> <hr> <footer> <p>© Everseiko 2013</p> </footer> </div><!--/.fluid-container--> <!--javascript--> <script src="<?php echo base_url(); ?>asset/bootstrap/js/jquery.js"></script> <script src="<?php echo base_url(); ?>asset/bootstrap/js/bootstrap-alert.js"></script> <script src="<?php echo base_url(); ?>asset/bootstrap/js/bootstrap-dropdown.js"></script> <script src="<?php echo base_url(); ?>asset/bootstrap/js/bootstrap-collapse.js"></script> <script src="<?php echo base_url(); ?>asset/bootstrap/js/bootstrap-typeahead.js"></script> <script src="<?php echo base_url(); ?>asset/sliderform/sliding.form.js"></script> <script src="<?php echo base_url(); ?>asset/slimscroll/jquery-ui.js"></script> <script src="<?php echo base_url(); ?>asset/slimscroll/jquery.slimscroll.min.js"></script> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) { alert('Number Only'); return false; } return true; }; $(document).ready(function() { $('#slider1').slimScroll({height: '800px'}); setTimeout(function(){ $("div.alert").fadeOut("slow", function () { $("div.alert").remove(); }); }, 1000); $("input#search").keyup(function() { if(this.value.length<3) { $("div#quick-search").slideUp(200,function() { return false; }); } else { $.ajax({ type: "GET", url: "quicksearch.php?search="+this.value, dataType: "json", success: function(data) { // no results, best hide the quicksearch DIV... if(data.length<1) { $("div#quick-search").slideUp(200); }else { // we've got results, so show them... var strOutputHTML = '<ul>'; for(intCounter = 0; intCounter < data.length; intCounter++) { strOutputHTML += '<li><a href="' + data[intCounter].href + '">' + data[intCounter].title + '</a></li>'; } strOutputHTML += '</ul>'; $("div#quick-search").html(strOutputHTML); $("div#quick-search").slideDown(200); } } }); } }); }); var reader = new FileReader(), i=0, numFiles = 0, imageFiles; // use the FileReader to read image i function readFile() { reader.readAsDataURL(imageFiles[i]) } // define function to be run when the File // reader has finished reading the file reader.onload = function(e) { // make an image and append it to the div var image = $('<img>').attr({'src': e.target.result,'width':'150px'}); var a = "<br>"; var filename = $('input[type=file]').val(); $(image).css({ 'margin-right':'20px', 'border' : 'single' }); $(image).appendTo('#images'); //$(a).appendTo('#images'); $(filename).appendTo('#images'); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); }; }; function upload_img() { imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; readFile(); $('#clear').show(); $('#input_field').hide(); }; function clearFileInputField(tagId) { document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML; $('#images').html(''); $('#clear').hide(); $('#input_field').show(); } var mrf = 1; function addPurchaseMRF() { var a = "<div class='span10 inline' style='float:right;margin-bottom:3px;'>" +"<input type='text' name='pattern[]' value='"+$('#MRF1').val()+"' style='margin-right:15px;width:50px;'>" +"<input style='width:30px;margin-right:14px;' type='text' name='size[]' value='"+$('#MRF2').val()+"'>" +"<input style='width:30px;' type='text' name='qty[]' value='"+$('#MRF3').val()+"'>" +"<button type='button' onclick='deletee(this)' style='margin-left:8px;'>-</button>"; +"</div>"; $(a).appendTo('.MRF'); $('#MRF1').val(''); $('#MRF2').val(''); $('#MRF3').val(''); $('#countMRF').val(mrf); mrf++; } var oth = 1; function addPurchaseOther() { var a = "<div class='span11 inline' style='margin-bottom:3px;margin-left:0'>" +"<input style='width:50px;margin-right:3px;' type='text' name='obrand[]' value='"+$('#other0').val()+"'>" +"<input style='width:50px;margin-right:15px;;' type='text' name='opattern[]' value='"+$('#other1').val()+"'>" +"<input style='width:30px;margin-right:14px;' type='text' name='osize[]' value='"+$('#other2').val()+"'>" +"<input style='width:30px;' type='text' name='oqty[]' value='"+$('#other3').val()+"'>" +"<button type='button' onclick='deletee(this)' style='margin-left:8px;'>-</button>"; +"</div>"; $(a).appendTo('.Othertype'); $('#other0').val(''); $('#other1').val(''); $('#other2').val(''); $('#other3').val(''); $('#countOther').val(oth); oth++; } var rcm = 1; function addRec() { var a = "<div id='rcmd' style='margin-bottom:3px'>" +"<input class='span3' style='margin-right:4px;' type='text' name='rpattern[]' value='"+$('#rpat').val()+"'>" +"<input class='span3' style='margin-right:4px;' type='text' name='rsize[]' value='"+$('#rsz').val()+"'>" +"<input class='span3' type='text' name='rremark[]' value='"+$('#rmrk').val()+"'>" +"<button type='button' class='removebutton' onclick='deletee(this)'>Del</button><br>" +"</div>"; $(a).appendTo('.recommendation'); $('#rpat').val(''); $('#rsz').val(''); $('#rmrk').val(''); $('#countrcm').val(oth); rcm++ } //$(".removebutton").click(function() function deletee(a) { $(a).parent().remove(); } </script> </body> </html>