We Keep Coding

Not getting dynamically added input text's post value in jquery and laravel

Code of jquery:-
$(".add-education").on('click', function () {
var educationcontent = '<div class="row form-row education-cont">' +
'<div class="col-12 col-md-10 col-lg-11">' +
'<div class="row form-row">' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>Degree</label>' +
'<input type="text" class="form-control" name="degree1">' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>College/Institute</label>' +
'<input type="text" class="form-control" name="clg1">' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-6 col-lg-4">' +
'<div class="form-group">' +
'<label>Year of Completion</label>' +
'<input type="text" class="form-control" name="yoc1">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-12 col-md-2 col-lg-1"><label class="d-md-block d-sm-none d-none"> </label><i class="far fa-trash-alt"></i></div>' +
'</div>';
// edu++;
$(".education-info").append(educationcontent);
return false;
});
Here i am not getting output of dynamically added textbox's input in post method of form,
in the image the 2nd line or divison is added textbox dynamically
code of controller for laravel post method
public function drprofilesettingpost(Request $request){
dd($request->all());
}
The output gives only null value for the dynamically added textbox
The php blade template here
#include('doctor.navbar')
<!-- Breadcrumb -->
<div class="breadcrumb-bar">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-12 col-12">
<nav aria-label="breadcrumb" class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Profile Settings</li>
</ol>
</nav>
<h2 class="breadcrumb-title">Profile Settings</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-lg-8 col-xl-9">
<!-- Basic Information -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Information</h4>
<div class="row form-row">
<div class="col-md-12">
<div class="form-group">
<div class="change-avatar">
<div class="profile-img">
<img src="{{url('/')}}/assets/img/doctors/doctor-thumb-02.jpg" alt="User Image">
</div>
<form method="post" action="{{url('/')}}/doctor/profilesetting">
#csrf
<div class="upload-img">
<div class="change-photo-btn">
<span><i class="fa fa-upload"></i> Upload Photo</span>
<input type="file" class="upload">
</div>
<small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Username <span class="text-danger">*</span></label>
<label class="form-control">{{$userinfo->username;}}</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Email <span class="text-danger">*</span></label>
<label class="form-control">{{$userinfo->email;}}</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>First Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" value="{{$userinfo->firstname;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" value="{{$userinfo->lastname;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Phone Number</label><span class="text-danger">*</span>
<input type="text" class="form-control" value="{{$userinfo->phoneno;}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Gender</label><span class="text-danger">*</span>
<select class="form-control select">
<option>Select</option>
<option
#if($userinfo->gender == 'M')
selected='selected'
#endif
>Male</option>
<option
#if($userinfo->gender == 'F')
selected='selected'
#endif
>Female</option>
<option
#if($userinfo->gender == 'O')
selected='selected'
#endif
>Other</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-0">
<label>Date of Birth</label><span class="text-danger">*</span>
<input type="text" class="form-control" value="{{$userinfo->dob}}">
</div>
</div>
</div>
</div>
</div>
<!-- /Basic Information -->
<!-- About Me -->
<div class="card">
<div class="card-body">
<h4 class="card-title">About Me</h4>
<div class="form-group mb-0">
<label>Biography</label>
<textarea class="form-control" rows="5">{{$userinfo->biography}}</textarea>
</div>
</div>
</div>
<!-- /About Me -->
<!-- Clinic Info -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Clinic Info</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>Clinic Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Clinic Address</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Clinic Images</label>
{{-- <form action="#" class="dropzone"></form> --}}
</div>
<div class="upload-wrap">
<div class="upload-images">
<img src="{{url('/')}}/assets/img/features/feature-01.jpg" alt="Upload Image">
<i class="far fa-trash-alt"></i>
</div>
<div class="upload-images">
<img src="{{url('/')}}/assets/img/features/feature-02.jpg" alt="Upload Image">
<i class="far fa-trash-alt"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Clinic Info -->
<!-- Contact Details -->
<div class="card contact-card">
<div class="card-body">
<h4 class="card-title">Contact Details</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>Address Line 1</label>
<input type="text" class="form-control" value="{{$userinfo->address1}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Address Line 2</label>
<input type="text" class="form-control" value="{{$userinfo->address2}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" value="{{$userinfo->city}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">State / Province</label>
<input type="text" class="form-control" value="{{$userinfo->state}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Country</label>
<input type="text" class="form-control" value="{{$userinfo->country}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Postal Code</label>
<input type="text" class="form-control" value="{{$userinfo->pincode}}">
</div>
</div>
</div>
</div>
</div>
<!-- /Contact Details -->
<!-- Pricing -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Pricing</h4>
<div class="row form-row">
<div class="col-md-6">
<div class="form-group">
<label>GENERAL CONSTANT PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->generel_cons_price}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">VIDEO-CALL PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->videocallprice}}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">VOICE-CALL PRICE</label>
<input type="number" class="form-control" value="{{$userinfo->voicecallprice}}">
</div>
</div>
</div>
</div>
<!-- /Pricing -->
<!-- Services and Specialization -->
<div class="card services-card">
<div class="card-body">
<h4 class="card-title">Services and Specialization</h4>
<div class="form-group">
<label>Services</label>
{{-- <input type="text" data-role="tagsinput" class="input-tags form-control" placeholder="Enter Services" name="services" value="HI" id="services"> --}}
<input type="text" data-role="tagsinput" class="input-tags form-control" placeholder="Enter Services" name="services" value="{{$userinfo->services}}" id="services">
<small class="form-text text-muted">Note : Type & Press enter to add new services</small>
</div>
<div class="form-group mb-0">
<label>Specialization </label>
<input class="input-tags form-control" type="text" data-role="tagsinput" placeholder="Enter Specialization" name="specialist" value="{{$userinfo->specialization}}" id="specialist">
<small class="form-text text-muted">Note : Type & Press enter to add new specialization</small>
</div>
</div>
</div>
<!-- /Services and Specialization -->
<!-- Education -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Education</h4>
<div class="education-info">
<div class="row form-row education-cont">
<div class="col-12 col-md-10 col-lg-11">
<div class="row form-row">
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Degree</label>
<input type="text" class="form-control" name="degree">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>College/Institute</label>
<input type="text" class="form-control" name="clg">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Year of Completion</label>
<input type="text" class="form-control" name="yoc">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Education -->
<!-- Experience -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Experience</h4>
<div class="experience-info">
<div class="row form-row experience-cont">
<div class="col-12 col-md-10 col-lg-11">
<div class="row form-row">
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Hospital Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>From</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>To</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Experience -->
<!-- Awards -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Awards</h4>
<div class="awards-info">
<div class="row form-row awards-cont">
<div class="col-12 col-md-5">
<div class="form-group">
<label>Awards</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-5">
<div class="form-group">
<label>Year</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Awards -->
<!-- Memberships -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Memberships</h4>
<div class="membership-info">
<div class="row form-row membership-cont">
<div class="col-12 col-md-10 col-lg-5">
<div class="form-group">
<label>Memberships</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Memberships -->
<!-- Registrations -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Registrations</h4>
<div class="registrations-info">
<div class="row form-row reg-cont">
<div class="col-12 col-md-5">
<div class="form-group">
<label>Registrations</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-12 col-md-5">
<div class="form-group">
<label>Year</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="add-more">
<i class="fa fa-plus-circle"></i> Add More
</div>
</div>
</div>
<!-- /Registrations -->
<div class="submit-section submit-btn-bottom">
<button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /Page Content -->
</div>
<script src="{{url('/')}}/assets/js/jquery.min.js"></script>
<script src="{{url('/')}}/assets/js/popper.min.js"></script>
<script src="{{url('/')}}/assets/js/bootstrap.min.js"></script>
<script src="{{url('/')}}/assets/plugins/theia-sticky-sidebar/ResizeSensor.js"></script>
<script src="{{url('/')}}/assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js"></script>
<script src="{{url('/')}}/assets/plugins/select2/js/select2.min.js"></script>
<script src="{{url('/')}}/assets/plugins/dropzone/dropzone.min.js"></script>
<script src="{{url('/')}}/assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.js"></script>
<script src="{{url('/')}}/assets/js/profile-settings.js"></script>
<script src="{{url('/')}}/assets/js/script.js"></script>
</body>
</html>

Your form submit was not sending all the data because your form tags were not correctly placed in the HTML content, and therefore you were confusing the browser of which elements to include in the form submit.
Move your opening form tag before this line <div class="col-md-7 col-lg-8 col-xl-9">.

How to avoid input value copying on click of button

Everything works fine but it also copies the value inside input button e.g if i write 1st in the input, 1st will also be copied on click of the button, does anyone has any resolution ?
$(function(){
$(".btn-copy").on('click', function(){
var ele = $(this).closest('.example-2').clone(true);
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Show modal after validate form with onsubmit

I have a modal, in this modal I have a form, when I fill this form and I do click in send, automatically show another modal saying "Thank you", but, if I let the form empty and I do send, the form show "You need to fill this field" and above show the modal saying "Thank you" too... the conclusion is,
I want that first validate the form and after if all its filled show the modal saying "Thank you", bootstrap have the onsubmit option, ¿can I use this for validate the modal whit javascript? or what its the better way of validate a form?
<div class="modal fullscreen-modal fade fondo-gris modal-cotizador" id="...-...-..." tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="max-height">
<div class="modal-dialog max-height">
<div class="modal-content" style="background-color: #f6f5f3">
<div class="modal-...-...">
<div>
<h1 class="centrar tit-producto-rel-..."><br>
</h1>
</div>
</div>
<div class="modal-body ancho-modal" style="">
<form id="form-cotizacion-..." method="POST">
<div id="lista">
<!-- Aquí irá la lista -->
</div>
<h5>...:</h5>
<p>...</p>
<div class="centrar"><h4 class="centrar">...</h4>
<select id="hola" class="centrar" type="text" name="selecciona-familia" style="width: 50%">
<i class="fa fa-chevron-down"></i>
<option>...</option>
</select>
</div>
{% csrf_token%}
<input type="hidden" name="origen" value="{{request.path}}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="modelo" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="serie" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="nombre" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="apellidos" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""> <b> .... </b> </option><br>
<option value="...">... </option>
<option value="..."> <b> ..</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""><b>...</b></option><br>
<option value="..."> <b> ...</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="email" name="..." placeholder="..#....com" required><br>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lada-...-cot-...">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="..." placeholder="...">
<input type="text" name="..." placeholder="0000 0000" required>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>...</label><br>
<textarea style="border: 1px solid black" rows="7" name="..." placeholder="..."></textarea>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 term-cond-modal">
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<input type="submit" class="fondo-verde botton-cotizar" value="..." data-toggle="modal" data-target="#exampleModalCenter" style="border:none;"></input>
<input id="close-modal" type="hidden" class="btn btn-default" data-dismiss="modal">
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-inside-cotizar all-ref" id="exampleModalCenter" data-keyboard="false" role="dialog" aria-labelledby="exampleModalCenterTitle" tabindex="2" aria-hidden="true" data-backdrop="static" style="padding-top: 130px">
<div class="modal-dialog modal-dialog-centered" role="document" >
<div class="modal-content ...-cotizacion-modal ">
<div class="modal-header" style="border-bottom-width: 0px!important">
<button type="button" class="close close-modal-ref" data-dismiss="modal" style="position: absolute;top: 3%;padding-top: 5%;right: 5%;color: black;opacity: 1;background-size: contain;background-repeat: no-repeat;width: 24px;height: 30px; background-image: url('-...');"></button>
</div>
<div class="modal-body" style="text-align: center;">
<img src="..." style="width: 19%;margin-bottom: 10px;">
<h3>.......</h3>
<div style="padding-left: 7%;padding-right: 7%;margin: 20px 0px 20px 0px">
<h6>....</h6>
</div>
<h5>...</h5>
<label>...</label>
<h5>... ...</h5>
<label class="icon-redes-refa" style="border:0px">
<a href="..." target="_blank">
<span class="...-..."></span>
</a>
<a href="https://.../." target="_blank">
<span class=".-.."></span>
</a>
<a href="h..." target="_blank">
<span class=".-...."></span>
</a>
<a href="https://www...../.../" target="_blank">
<span class=".-..."></span>
</a>
<a href="https://www...com/.../..." target="_blank">
<span class=".-...."></span>
</a>
</label>
</div>
<div class="modal-footer" style="border-top-width: 0px!important">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#exampleModalCenter button').on('click', function() {
$('.modal').modal('hide');
});
});
</script>
The code,

Flask-WTF: Form never submits

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.

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>

As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});