View CODE:
$(document).ready(function() {
$(".price").click(function() {
$("input").keyup(function () {
if ($(this).val()) {
$("#priceSave").show();
}
else {
$("#priceSave").hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
<!--<form name="priceform" method="post" action="addPriceDetails/{{$dataId}}">-->
<div class="modal fade" id="price">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Selling Information</h4>
</div>
<div class="modal-body" id="modal-content">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-sm-12">
<b>Listing Information</b>
<h6>Seller SKU ID <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Unique identifier for the listings">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="skuid" id="skuvalue" class="pricevalue" />
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Status Details</b>
<h6>Listing Status <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Inactive listings are not available for buyers on Flipkart">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<select id="dropDownId" name="listingStatus">
<option selected disabled>--Choose here--</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Price Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>MRP <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Maximum retail price of the product">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="mrp" id="mrpvalue" class="check-fill"/>
</div>
<div class="col-sm-6">
<h6>Your Selling Price <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Price at which you want to sell this listing">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="selprice" id="selpricevalue" class="check-fill"/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Inventory Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>Fulfilment By <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Fullfilment of FA listings will be managed by Flipkart ">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<select id="5" name="fulfillment">
<option selected disabled>Choose here</option>
<option value="Seller">Seller</option>
</select>
<br/>
<h6>Procurement SLA <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Time required to keep the product ready for dispatch">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="sla" class="check-fill"/>Days
<br/>
<h6>Stock available for Buyers <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Number of items available for cutomer to buy after detecting pending orders" >
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="available" readonly/>
</div>
<div class="col-sm-6">
<h6>Procurement Type <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Information on how the inventory is procured by the seller to fulfill an order">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<select name="procurementType">
<option selected disabled>--Choose here--</option>
<option value="instock">instock</option>
</select>
<br/>
<h6>Stock <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Number of items you have in stock">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="stock" />
<br/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Delivery charge to customer</b>
<div class="col-sm-12">
<div class="col-sm-4">
<h6>Local Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer in the same city for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="local" />
</div>
<div class="col-sm-4">
<h6>Zonal Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer in the same zone for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="zonal" />
</div>
<div class="col-sm-4">
<h6>National Delivery Charge <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Delivery charge you want charge a buyer outside your zone for listings which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="national" />
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<b>Packaging Details</b>
<div class="col-sm-12">
<div class="col-sm-3">
<h6>Package Weight <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Weight of the final package in kgs">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="weight" />Kgs
</div>
<div class="col-sm-3">
<h6>Package Length <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Length of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="length" />cms
</div>
<div class="col-sm-3">
<h6>Package Breadth <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Breadth of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="breadth" />cms
</div>
<div class="col-sm-3">
<h6>Package Height <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="Height of the final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:#337AB7"></span>
</a></h6>
<input type="text" name="height" />cms
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Tax Details</b>
<h6>HSN <a href="#" class='my-tool-tip' data-toggle="tooltip" data-placement="right" title="code of your product for determining applicable tax rates">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="hsn" />
Find relevant HSN codes
</div>
</div>
<br/>
<br/>
<input type="submit" id="priceSave" class="save" value="Save" style="border-radius: 8px; padding: 5px 15px; display:none;">
<!-- </form>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
<!--<button type="submit" id="priceSave" class="save" style="border-radius: 8px; padding: 5px 15px; display:none;">Save</button>-->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
This is my laravel view code. Here when I click on the input fields it shows up the "SAVE" button. When I click on the save button, I am trying to redirect to the controller using ajax(code mentioned below).
SCRIPT CODE:
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf_token"]').attr('content')
}
});
$(document).ready(function() {
$("#priceSave").click(function(){
$.ajax({
url: '{{url("addPriceDetails")}}',
type: "post",
success:function(data) {
alert(data);
}
});
});
});
</script>
This is the script code,I have tried for redirect using ajax with the help of post method.
ROUTE CODE:
Route::post('addPriceDetails','priceDetails#addPriceDetails1');
Controller:
public function addPriceDetails1()
{
echo("1234");
}
My controller code.ON redirection it shows Internal server error on browser console page.
Related
Here div is coming out of the form, i want to show the appended div inside the update_new_1 but the div is coming out of the form.Here is my code
var maxAppend = 0;
$(document).on('click', '.update_more', function() {
var u_id = $(this).attr("u_id");
var add_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Document</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
maxAppend++;
var resil = $(this).closest("#update_new_" + u_id).append(add_new);
});
<form method="post" class="form_1" action="" enctype="multipart/form-data">
<div id="update_new_1" class="update_new_1 item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1" class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong>
<a href="javascript:void(0);" id="update_more" u_id="1" class="addCF item-row-click update_more">
<i class="fa fa-plus">
</i>
Add More</a>
</strong>
</div>
</div>
</div>
<div class="modal-footer">
<img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
<input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
i am trying to achieve the functionality of move scroll bar as per new upload, when i am uploading any document at that time i am high lighting that document,suppose i have 20 document in my list then i am uploading 21th document that time scroll bar should move to that document means it should move as per new document,currently i am showing latest document through high lighting but scroll bar is not moving,if somebody know how to achieve this functionality please guide me how to do that i am new to UI.Thanks.
here is my html code where i am showing list of document:
<div id="resume-panel" class="panel-collapse collapse">
<div class="panel-body upload-newFile-container">
<div class="input-group file-preview">
<input placeholder="" type="text" class="form-control file-preview-filename" ng-value="(myFile.length > 1 ? myFile[0]._file.webkitRelativePath.substring(0, myFile[0]._file.webkitRelativePath.lastIndexOf('/')) : myFile.name)" disabled="disabled">
<span class="input-group-btn button-position">
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="file-preview-input-title">BrowseFolder</span>
<input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
name="input-file-preview" />
</div>
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
<span class="glyphicon glyphicon-file"></span>
<span class="file-preview-input-title">BrowseFile</span>
<input type="file" ng-click="clearFileName()" file-upload="myFile" ng-disabled="isFolderSelected" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
/>
</div>
<button type="button" class="btn btn-labeled btn-info" ng-disabled="myFile === null || myFile === undefined || uploadButtonDisabled" data-ng-click="upload();disableButton()" ng-change="latestResume()">
<span class="btn-label">
<i class="glyphicon glyphicon-upload"></i>
</span>Upload
</button>
</span>
</div>
<uib-progressbar
class="progress-striped active"
ng-show="folderProcessing && !isSingleFile"
animate="true" max="100"
value="progressValuePercentage"
type="success">
<i>
<span>
{{progressValuePercentage}} / 100
</span>
</i>
</uib-progressbar>
<div class="processed-file-container col-xs-12 col-md-12 nopadding">
<div class="loading-message-container" ng-show="showResumeLoadingPanel">
<h3>Loading data... Please wait.</h3>
<div class="progress progress-striped active page-progress-bar">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<div class="processed-document col-xs-12 col-md-12 col-lg-12 nopadding" ng-show="!showResumeLoadingPanel">
<div class="panel-heading">
<span ng-if="jdSelected" class="jdContext jdContextInManageResume" ng-show="isjdDeleted">
<span>Company : {{companyName}}</span><br>
<span>JobDescription : {{jdName}}</span>
</span>
<div class="pull-right nopadding refreshBtnInManageResume">
<button class="btn btn-labeled btn-info btn-reload pull-right" data-ng-click="loadResumePanel()">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span class="small-left-margin">Refresh</span>
</button>
</div>
<div class="pull-right nopadding download-quick-tracker-position" ng-if="jdSelected && processResumeFiles.length > 0" ng-show="isjdDeleted">
<button class="btn btn-labeled btn-info pull-right" data-ng-click="downloadQuickTracker(jdUniqueId)">
<i class="fa fa-download" aria-hidden="true"></i>
<span class="">QuickTracker</span>
</button>
</div>
</div>
<div class="panel-body">
<div class="row marginForRefreshBtn">
<table class="table table-striped" id="manageResumeTable">
<thead class="text-center text-info text-capitalize">
<th class="text-center col-xs-1">Sr.No.</th>
<th class="text-center col-xs-4">Document</th>
<th class="text-center col-xs-1">Score</th>
<th class="text-center col-xs-1">QuickScore</th>
<th class="text-center col-xs-5">Actions</th>
</thead>
<tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}">
<td class="text-center col-xs-1">{{ file.temporaryId }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
{{ file.attributes.name }}
</td>
<td class="text-center col-xs-1">{{file.totalScore}}</td>
<td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
<td class="text-center col-xs-5">
<button class="btn btn-labeled btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isModelHtmlPresent" data-ng-click="markAsGoldStd(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
here is my UI view how its showing currently.
if you didnt understand question please ask me, thanks you
you can keep your scroll bar at the top position :
$('html, body').animate({
scrollTop: 0
}, 1000);
I am in trouble with getting specific variable javascript class name from Laravel loop.I tried to get it from html data but I got only the first data info of loop.
Here is my blade
#foreach($myanmarmenus as $myanmarmenu)
<div class="col-md-6 col-sm-12">
<div class="menu">
<img src="{{ '/images/menus/'. $myanmarmenu->image }}" class="menuimg">
<p class="menutitle">{{$myanmarmenu->title}} <span class="menuprice">{{$myanmarmenu->price}} <span id="kyat">Ks</span> </span>
</p>
<p class='menudescription'>
{{$myanmarmenu->description}}
</p>
<span class="menushop">
#foreach($myanmarmenu->shops as $shop)
{{$shop->name}}
#endforeach
</span>
<!-- spinner -->
<div class="custom_spinner {{$myanmarmenu->title . $myanmarmenu->id}}" data-spinnerclass="{{$myanmarmenu->id}}">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-sm input-number" value="1" min="1" max="1000" id="spinnerval-{{$myanmarmenu->title . $myanmarmenu->id}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<!-- spinner -->
<!-- add -->
<div class="spinner_btn {{$myanmarmenu->title . $myanmarmenu->id}}" data-addclass="{{$myanmarmenu->id}}">Add Item</div>
<!-- add -->
</div>
</div>
#endforeach
And this is js
$('.spinner_btn').click(function () {
var spinner = $(".custom_spinner").data('spinnerclass');
alert(spinner);
});
my actual purpose is to get the specific class name
I think you mean this:
$('.spinner_btn').each(function () {
$(this).on('click', function () {
var spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
alert(spinner);
});
});
I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
I am trying to submit a form and process the results, but when I press the submit button, form.is_submitted() returns False and request.method returns "GET". Here is my form:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post">
{{ form.hidden_tag() }}
<div class="row">
<div class="col-sm-12">
<!-- start: FORM WIZARD PANEL -->
<div id="wizard" class="swMain">
<ul>
<li>
<a href="#step-1">
<div class="stepNumber">
1
</div>
<span class="stepDesc"> Step 1
<br />
<small>General Information</small> </span>
</a>
</li>
<li>
<a href="#step-2">
<div class="stepNumber">
2
</div>
<span class="stepDesc"> Step 2
<br />
<small>Lane(s)</small> </span>
</a>
</li>
<li>
<a href="#step-3">
<div class="stepNumber">
3
</div>
<span class="stepDesc"> Step 3
<br />
<small>Load Details</small> </span>
</a>
</li>
</ul>
<div class="progress progress-striped active progress-sm">
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress-bar progress-bar-success step-bar">
<span class="sr-only"> 0% Complete (success)</span>
</div>
</div>
<div id="step-1">
<h2 class="StepTitle">Step 1 Content</h2>
<hr>
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Type <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.load_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Required Trailer <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.trailer_type(class="form-control") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Total Miles <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.total_miles(class="form-control", placeholder="Total Miles") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Cost <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.price(class="form-control", placeholder="Price") }}
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="col-sm-3 control-label">
# Pieces <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.number_pieces(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Over Dimensional?
</label>
<div class="col-sm-7">
{{ form.over_dimensional() }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
Comments <span class="symbol required"></span>
</label>
<div class="col-sm-7">
{{ form.comments(class="form-control", placeholder="Number of Pieces") }}
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<label class="col-sm-3 control-label">
Load Description
</label>
<div class="col-sm-7">
{{ form.description(class="autosize form-control", style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 69px;") }}
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-7">
<button class="btn btn-blue next-step btn-block">
Next <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Editable Table
<div class="panel-tools">
<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a>
<a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> </a>
<a class="btn btn-xs btn-link panel-refresh" href="#"> <i class="fa fa-refresh"></i> </a>
<a class="btn btn-xs btn-link panel-expand" href="#"> <i class="fa fa-resize-full"></i> </a>
<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 space20">
<button class="btn btn-green add-row">
Add New <i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="sample_2">
<thead>
<tr>
<th>Stop #</th>
<th>Type</h>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!--- Table content created by table-data.js -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-3">
<button class="btn btn-light-grey back-step btn-block">
<i class="fa fa-circle-arrow-left"></i> Back
</button>
</div>
<div class="col-sm-2 col-sm-offset-3">
<button type="submit" class="btn btn-success btn-block">
Finish <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</div>
<!-- end: FORM WIZARD PANEL -->
</div>
</div>
As a reference, here is my view which handles the form:
#loads.route('/create', methods=['GET', 'POST'])
#login_required
def create():
form = LoadForm()
flash(form.is_submitted()) #returns False
flash(request.method) # returns 'GET'
if form.validate_on_submit():
#handle form logic
return render_template('load/create2.html',
title="Create Load",
active="Loads",
form=form, user=g.user)
Add a method attribute to your form tag:
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" type="post" method="post">
An empty or missing #method attribute defaults to GET.