How to show “display:none” form when edit

Question

I'm using the same form to do create and edit. And most of them are display: none . This is how the flow, input date and click search button. It'll return data and show the hidden form. Here's the code so far:

 $('button[type="search"]').click(function() { $(".row-bot, .row-info, .table-bordered").show(); }); $('button[type="search"]').click(function(e) { $.ajax( { url: "{{ route('fine.search') }}", type: "POST", data: { '_token': '{{csrf_token() }}', 'driver_id': $('select[name="driver_id"]').val(), 'fine_date': $('input[name="fine_date"]').val(), }, success: function(data) { if (data.status == true) { var result = []; $.each(data.getCarbyDriver, function(i, data) { HideEle = $('<input>').attr( { type: 'hidden', name: 'fleet_id' }).val(data.id); CarEle = $('<input/>', { "class": 'col-xs-3 col-sm-3 col-md-3', }).attr( { type: 'radio', name: 'car_id' }).val(data.car_id); PlateEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.plate_no); StartELe = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.start_time); EndEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.end_time) }); $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle); $('#noData').hide(); $('#search-result').show() } }, error: function(data) { if (data.getCarbyDriver == null) { // if the result is null $('#noData').show(); $(".row-bot, #search-result, .table-bordered").hide(); // show the div.. } } }); }); 

 <div class="row top"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label">Driver Name:</label> {!! Form::select('driver_id', $driver, null, array('class' =&gt; 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label>Fine Date:</label> {!! Form::text('fine_date', null, array('id' =&gt; 'datetimepicker', 'class' =&gt; 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group filter-btn"> <button class='btn btn-info' type='search'>Search</button> </div> </div> </div> <div class="row-info"></div> <table class="table table-bordered" style="display: none"> <tr> <td class="col-xs-3 col-sm-3 col-md-3" style="text-align: center;"> <label>End Time</label> <div class="col-xs-3 col-sm-3 col-md-3"> <label>#</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Plate Number</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Start Time</label> </div> <div id="search-result"></div> </td> </tr> </table> <div class="col-xs-12 col-sm-12 col-md-12" id="noData" style="display: none; text-align: center;"> No data to display </div> <div class="row-bot" style="display: none;"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Reference No:</label> {!! Form::text('reference_no', null, array('class' =&gt; 'form-control')) !!} </div> <div class="form-group"> <label class="control-label">Type:</label> {!! Form::select('type', $FineTypeList, null, array('class' =&gt; 'form-control')) !!} </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <button class="btn btn-primary" type="submit">Submit</button> </div> 

Everything works fine, but when I try to edit I want it to show all form without click search button. Any ideas?

Answer 1

I didn't see any editor functions to hook into any events associating with said functions, so I just added a button and the jQ to reveal all forms (at least whatever OP has provided):

<button class="btn btn info">Edit</button>

$(".btn-info").on('click', function() {
$('.top').show();
 // editor functions...
});

 $('button[type="search"]').click(function() { $(".row-bot, .row-info, .table-bordered").show(); }); $('button[type="search"]').click(function(e) { $.ajax({ url: "{{ route('fine.search') }}", type: "POST", data: { '_token': '{{csrf_token() }}', 'driver_id': $('select[name="driver_id"]').val(), 'fine_date': $('input[name="fine_date"]').val(), }, success: function(data) { if (data.status == true) { var result = []; $.each(data.getCarbyDriver, function(i, data) { HideEle = $('<input>').attr({ type: 'hidden', name: 'fleet_id' }).val(data.id); CarEle = $('<input/>', { "class": 'col-xs-3 col-sm-3 col-md-3', }).attr({ type: 'radio', name: 'car_id' }).val(data.car_id); PlateEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.plate_no); StartELe = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.start_time); EndEle = $("<div/>", { "class": 'col-xs-3 col-sm-3 col-md-3', }).html(data.end_time) }); $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle); $('#noData').hide(); $('#search-result').show() } }, error: function(data) { if (data.getCarbyDriver == null) { // if the result is null $('#noData').show(); $(".row-bot, #search-result, .table-bordered").hide(); // show the div.. } } }); }); $(".btn-info").on('click', function() { $('.top').show(); // editor functions... }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row top"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label class="control-label">Driver Name:</label> {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group"> <label>Fine Date:</label> {!! Form::text('fine_date', null, array('id' => 'datetimepicker', 'class' => 'form-control')) !!} </div> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="form-group filter-btn"> <button class='btn btn-info' type='search'>Search</button> </div> </div> </div> <table class="table table-bordered" style="display: none"> <div class="row-info"> <td class="col-xs-3 col-sm-3 col-md-3" style="text-align: center;"> <label>End Time</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>#</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Plate Number</label> </div> <div class="col-xs-3 col-sm-3 col-md-3"> <label>Start Time</label> </div> <div id="search-result"></div> </div> </table> <div id="noData" class="col-xs-12 col-sm-12 col-md-12" style="display: none; text-align: center;">No data to display</div> <div class="row-bot" style="display: none;"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Reference No:</label> {!! Form::text('reference_no', null, array('class' => 'form-control')) !!} </div> <div class="form-group"> <label class="control-label">Type:</label> {!! Form::select('type', $FineTypeList, null, array('class' => 'form-control')) !!} </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> <button class="btn btn info">Edit</button>