Page refreshing when attempting to save TextBox values - asp.net

I have a table with TextBoxes and I set an UpdatePanel to the table and set a button that should save my new TextBoxes' value to the database as a trigger. But, when I press the button the page refreshes.
<%# Page Title="" Language="C#" MasterPageFile="~/MaestroMaster.master" AutoEventWireup="true"
CodeFile="ProjectDetails.aspx.cs" Inherits="Default" EnableEventValidation="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<style type="text/css">
.style1
{
height: 68px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div class="cntr">
<h1>
פרטי הלקוח
</h1>
</div>
<br />
<asp:UpdatePanel ID="CustomerUpdatePanel">
<ContentTemplate>
<table id="CustomerDetailsTBL" class="table">
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoID" type="text" class="form-control" runat="server" maxlength="9">
<span class="input-group-addon">ת.ז</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoAddress" type="text" class="form-control" runat="server" maxlength="30">
<span class="input-group-addon">כתובת</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoFirstName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם פרטי</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoCity" type="text" class="form-control" runat="server" maxlength="15">
<span class="input-group-addon">עיר</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoLastName" type="text" class="form-control" runat="server" maxlength="15">
<span class="input-group-addon">שם משפחה</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoEmail" type="text" class="form-control" runat="server">
<span class="input-group-addon">דוא"ל</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoPhone" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">טלפון</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoFax" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">פקס</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoMobile" type="text" class="form-control" runat="server" maxlength="10">
<span class="input-group-addon">טלפון נייד</span>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoArchitectName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם האדריכל</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoArchitectMobile" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון אדריכל</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoContractorName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם הקבלן</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoContractorPhone" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון קבלן</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<input id="ProjectInfoSupervisorName" type="text" class="form-control" runat="server"
maxlength="15">
<span class="input-group-addon">שם המפקח</span>
</div>
</td>
<td>
<div class="input-group">
<input id="ProjectInfoSupervisorPhone" type="text" class="form-control" runat="server"
maxlength="10">
<span class="input-group-addon">טלפון מפקח</span>
</div>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ContentPlaceHolder3_SaveCustomerDetailsBTN" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>

You do not have any button inside the UpdatePanel to trigger a dynamic update of the UpdatePanel content only, and then the control id that make the trigger not exist ContentPlaceHolder3_SaveCustomerDetailsBTN in this code you give

Related

Background move to left when I open a modal-lg

When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
When I open modal-lg, the background screen moves to the left. I tried many ways, but it failed. Please see the code and change accordingly I am using Bootstrap 4. Thank you.
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
This is what I tried and it works perfectly. You do an external CSS or internal CSS. Your choice. If you want internal. Just do a <style> insert the CSS here </style
CSS:
body:not(.modal-open){
padding-right: 0px !important;
}
Internal CSS:
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>
Full code:
<!-- The Modal -->
<div class="modal fade mt-5 " id="myModal2#(count)">
<div class="modal-dialog modal-lg " style=" padding-left: 0 !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h6 class="modal-title Bold">ویرایش قرارداد</h6>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="AmorMalie" asp-action="EditSubmitGhrardad" method="post">
<table class="table table-bordered text-sm ">
<thead class="text-center">
<tr style="background-color:#416992; color: white">
<th>نام پروژه</th>
<th>نوع خدمات</th>
<th>مبلغ قرارداد (ریال)</th>
<th style="width:80px">ت ج ماه</th>
<th style="width:130px">ارزش افزوده</th>
</tr>
</thead>
<tr>
<td>
<input type="hidden" class="hf_selected_val" value="#item.projectID" />
<select class="form-control " name="projectID" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.pros) {
<option value="#items.projectID">#items.projectName</option>
}
</select>
</td>
<input class="d-none" name="id" value="#item.id" />
<td>
<input type="hidden" class="hf_selected_val" value="#item.NoeaKhadmat" />
<select class="form-control" name="NoeaKhadmat" required autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
<option value="1">حسابرسی</option>
<option value="2">مالیاتی</option>
<option value="3">منابع انسانی</option>
</select>
</td>
<td><input class="form-control num" name="MablghGhrardad" onkeyup="javascript:this.value=itpro(this.value);" value="#item.MablghGhrardad" autocomplete="off" /></td>
<td><input class="form-control num" name="TadadJelse" autocomplete="off" value="#item.TadadJalaseDrMoaheGhrardad" /></td>
<td class="text-center">
<input type="checkbox" name="MashmolArzeshAfzoode" #(item.MashmolArzeshAfzoode ? "checked" : "") style="width: 1.25rem; height: 1.25rem; top: .8rem; " class="flat-red" value="True">
</td>
</tr>
<thead class="text-center mr-3">
<tr style="background-color:#416992; color: white">
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th style="background-color:darkgreen">تعین کارشناس</th>
<th colspan="2" class="text-center">عملیات</th>
</tr>
</thead>
<tr>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="bgainDate2" id="bgainDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.ShoroeeProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon" style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input name="EndDate2" id="EndDate2#(count)" type="text" autocomplete="off" value=" #ConvertDateTime.ConvertMiladiToShamsi(item.PayanProjectDate, " yyyy/MM/dd ")" class="form-control" />
</div>
</td>
<td>
<input type="hidden" class="hf_selected_val" value="#item.UserID" />
<select class="form-control" name="TaeenKarShnas" autocomplete="off">
<option value="" default="" selected="">انتخاب کنید</option>
#foreach (var items in ViewBag.userss) {
<option value="#items.Id">#items.FirstName #items.Family</option>
}
</select>
</td>
<td colspan="2" class="text-center">
<button type="submit" class="btn btn-success" style="color:white">ویرایش قرارداد</button>
</td>
</tr>
</table>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
enter code here
</div>
</div>
</div>
#{count++;}
// this is internal css
<style>
body:not(.modal-open){
padding-right: 0px !important;
}
</style>

Onclick button doesnt fire when click

this is code below that doesnt work, i try work with seperate solution with same database but this problem seems hard to solve. thanks in advance
<div class="section-title">
<h2>Register <span>Now</span></h2>
<p>Ut possimus qui ut temporibus culpa velit eveniet modi omnis est adipisci expedita at voluptas atque vitae autem.</p>
</div>
<div class="php-email-form">
<div class="row">
<div class="col-lg-4 col-md-6 form-group">
<asp:TextBox ID="TextBox1" runat="server" type="text" class="form-control" placeholder="Your ID Number" data-rule="minlen:8" data-msg="Please enter at least 8 chars" ></asp:TextBox>
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<asp:TextBox ID="TextBox2" runat="server" type="text" class="form-control" placeholder="Username" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required="required"></asp:TextBox>
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3">
<asp:TextBox ID="TextBox3" runat="server" type="password" class="form-control" placeholder="Password" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required="required" ></asp:TextBox>
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<asp:TextBox ID="TextBox4" runat="server" type="email" class="form-control" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email"></asp:TextBox>
<div class="validate"></div>
</div>
<div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
<p>Register As</p>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Height="50px" Width="329px" Font-Size="Medium" Font-Names="Arial" Font-Italic="True">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Employee</asp:ListItem>
<asp:ListItem>Customer</asp:ListItem>
</asp:DropDownList>
<div class="validate"></div>
</div>
</div>
<div class="form-group mt-3">
<asp:TextBox ID="TextBox7" runat="server" class="form-control" rows="5" placeholder="Address" Width="1119px"></asp:TextBox>
<div class="validate"></div>
</div>
<asp:Button ID="Button3" runat="server" OnClick="Button1_Click" Text="Register" />
<div class="text-center">
</div>
</div>
</div>
</section>**strong text**
but this code below work, idk what the problem, its just same code with/without design
<div>
<div style="font-size:x-large; text-align:center">Register</div>
<table class="nav-justified">
<tr>
<td class="modal-sm" style="width: 290px">ID</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="243px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px">Username</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="243px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px">Password</td>
<td>
<asp:TextBox ID="TextBox3" runat="server" Width="243px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px">Email</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" Width="243px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px">Register as:</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Employee</asp:ListItem>
<asp:ListItem>Customer</asp:ListItem>
</asp:DropDownList>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px">Address</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" Width="243px"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="modal-sm" style="width: 290px"> </td>
<td>
<asp:Button ID="Button1" runat="server" BackColor="#CCCC00" BorderColor="#FF3300" Font-Bold="True" ForeColor="#FF9900" OnClick="Button1_Click" Text="Register" />
</td>
<td> </td>
</tr>
</table>
<br />
Log In
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
</div>
and these both codes share same aspx.cs buttons click function but it still doesnt fire and idk know why, i keep writing this because i cant submit questions otherwise
I think it's because of this line of code:
<div class="validate"></div>
Try to avoid validation by changing CausesValidation attribute to false in the button element:
CausesValidation="false"

Bootstrap 4.5 text-nowrap not working as expected in table

How can I remove the space between two columns? I need the below-highlighted space to be removed.
I tried text-nowrap but didn't work as expected.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
</style>
<div class="container shadow p-3 sm-5 bg-white rounded">
<form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
<h2>Register</h2>
<hr />
<table class="table table-borderless text-nowrap">
<tbody>
<tr>
<td>
<label for="firstnameid">First Name: </label>
</td>
<td>
<input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
</td>
</tr>
<tr>
<td>
<label for="lastnameid">Last Name: </label>
</td>
<td>
<input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
</td>
</tr>
<tr>
<td>
<label for="emailid">Email: </label>
</td>
<td>
<input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
</td>
</tr>
<tr>
<td>
<label for="passwordid">Password: </label>
</td>
<td>
<input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
</td>
</tr>
</tbody>
</table>
<hr />
<button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
<br /><br /><br />
<span id="login_link"> Login Here </span>
<hr />
</form>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>
As described in this answer, you can just define a small width like 1px for your first column, because table cells are expanded to the smallest size to fit its content, which will automatically remove this whitespace.
Here is your adjusted code example:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
table tr td:first-child {
width: 1px;
}
</style>
<div class="container shadow p-3 sm-5 bg-white rounded">
<form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="registerform" target="hiddenFrame">
<h2>Register</h2>
<hr />
<table class="table table-borderless text-nowrap">
<tbody>
<tr>
<td>
<label for="firstnameid">First Name: </label>
</td>
<td>
<input id="firstnameid" type="text" placeholder="First Name" class="form-control" name="txtfirstname" required />
</td>
</tr>
<tr>
<td>
<label for="lastnameid">Last Name: </label>
</td>
<td>
<input id="lastnameid" type="text" placeholder="Last Name" class="form-control" name="txtlastname" required />
</td>
</tr>
<tr>
<td>
<label for="emailid">Email: </label>
</td>
<td>
<input id="emailid" type="email" placeholder="Email" class="form-control" name="txtemail" required />
</td>
</tr>
<tr>
<td>
<label for="passwordid">Password: </label>
</td>
<td>
<input id="passwordid" type="password" placeholder="Password" class="form-control" name="txtupass" required />
</td>
</tr>
</tbody>
</table>
<hr />
<button type="submit" id="registersubmitbutton" class="btn btn-success" name="btn-register"><i class="fas fa-user-plus"></i> Register</button>
<br /><br /><br />
<span id="login_link"> Login Here </span>
<hr />
</form>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</div>
Good luck!

Bootstrap class formatting breaking my Flask WTForms

I have this WTForms template which produces a simple form with text fields, radio buttons and a submit button.
{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('home') }}" method=post>
<h3>Part I,</h3><h4>G1</h4><div class="well span6">
{{ form.node_1.label }}
<form class="form-inline" role="form">
{% for subfield in form.freq_1 %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form></div><h4>G2</h4><div class="well span6">
{{ form.node_2.label }}
<form class="form-inline" role="form">
{% for subfield in form.freq_2 %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form></div>
<h3>Part II</h3>
<div class="well span6">
{{ form.extra1.label }} {{ form.extra1}}
{{ form.extra1Email.label }} {{ form.extra1Email }}
{{ form.extra1Group.label }} {{ form.extra1Group }}
<form class="form-inline" role="form">
{% for subfield in form.extra1Freq %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form>
</div>
<div class="well span6">
{{ form.extra2.label }} {{ form.extra2}}
{{ form.extra2Email.label }} {{ form.extra2Email }}
{{ form.extra2Group.label }} {{ form.extra2Group }}
<form class="form-inline" role="form">
{% for subfield in form.extra2Freq %}<tr><td>{{ subfield }}</td><td>{{ subfield.label }}</td></tr>{% endfor %}
</form>
</div>
{{ form.submit }}
</form>
{% endblock %}
Here's the html Flask produces:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Title</h1>
<nav>
<ul class="menu">
<li>Home
</li>
<li>Network
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<form action="/" method=post>
<h3>Part I,</h3>
<h4>G1</h4>
<div class="well span6">
<label for="node_1">First name 1 Last name 1</label>
<form class="form-inline" role="form">
<tr>
<td>
<input checked id="freq_1-0" name="freq_1" type="radio" value="0">
</td>
<td>
<label for="freq_1-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-1" name="freq_1" type="radio" value="1">
</td>
<td>
<label for="freq_1-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-2" name="freq_1" type="radio" value="7">
</td>
<td>
<label for="freq_1-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-3" name="freq_1" type="radio" value="30">
</td>
<td>
<label for="freq_1-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-4" name="freq_1" type="radio" value="183">
</td>
<td>
<label for="freq_1-4">5</label>
</td>
</tr>
<tr>
<td>
<input id="freq_1-5" name="freq_1" type="radio" value="365">
</td>
<td>
<label for="freq_1-5">6</label>
</td>
</tr>
</form>
</div>
<h4>G2</h4>
<div class="well span6">
<label for="node_2">First name 2 Last name 1</label>
<form class="form-inline" role="form">
<tr>
<td>
<input checked id="freq_2-0" name="freq_2" type="radio" value="0">
</td>
<td>
<label for="freq_2-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-1" name="freq_2" type="radio" value="1">
</td>
<td>
<label for="freq_2-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-2" name="freq_2" type="radio" value="7">
</td>
<td>
<label for="freq_2-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-3" name="freq_2" type="radio" value="30">
</td>
<td>
<label for="freq_2-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-4" name="freq_2" type="radio" value="183">
</td>
<td>
<label for="freq_2-4">5</label>
</td>
</tr>
<tr>
<td>
<input id="freq_2-5" name="freq_2" type="radio" value="365">
</td>
<td>
<label for="freq_2-5">6</label>
</td>
</tr>
</form>
</div>
<h3>Part II</h3>
<div class="well span6">
<label for="extra1">First and Last name:</label>
<input id="extra1" name="extra1" type="text" value="">
<label for="extra1Email">Email:</label>
<input id="extra1Email" name="extra1Email" type="text" value="">
<label for="extra1Group">Company or Group:</label>
<input id="extra1Group" name="extra1Group" type="text" value="">
<form class="form-inline" role="form">
<tr>
<td>
<input id="extra1Freq-0" name="extra1Freq" type="radio" value="1">
</td>
<td>
<label for="extra1Freq-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-1" name="extra1Freq" type="radio" value="7">
</td>
<td>
<label for="extra1Freq-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-2" name="extra1Freq" type="radio" value="30">
</td>
<td>
<label for="extra1Freq-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-3" name="extra1Freq" type="radio" value="183">
</td>
<td>
<label for="extra1Freq-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="extra1Freq-4" name="extra1Freq" type="radio" value="365">
</td>
<td>
<label for="extra1Freq-4">5</label>
</td>
</tr>
</form>
</div>
<div class="well span6">
<label for="extra2">First and Last name:</label>
<input id="extra2" name="extra2" type="text" value="">
<label for="extra2Email">Email:</label>
<input id="extra2Email" name="extra2Email" type="text" value="">
<label for="extra2Group">Company or Group:</label>
<input id="extra2Group" name="extra2Group" type="text" value="">
<form class="form-inline" role="form">
<tr>
<td>
<input id="extra2Freq-0" name="extra2Freq" type="radio" value="1">
</td>
<td>
<label for="extra2Freq-0">1</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-1" name="extra2Freq" type="radio" value="7">
</td>
<td>
<label for="extra2Freq-1">2</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-2" name="extra2Freq" type="radio" value="30">
</td>
<td>
<label for="extra2Freq-2">3</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-3" name="extra2Freq" type="radio" value="183">
</td>
<td>
<label for="extra2Freq-3">4</label>
</td>
</tr>
<tr>
<td>
<input id="extra2Freq-4" name="extra2Freq" type="radio" value="365">
</td>
<td>
<label for="extra2Freq-4">5</label>
</td>
</tr>
</form>
</div>
<input id="submit" name="submit" type="submit" value="Send your form">
</form>
</div>
</body>
</html>
I use Bootstrap 3 to format the lists of buttons by attributing a class to parts of the form:
<form class="form-inline" role="form">
For some reasons, using these classes "breaks" my form, in that clicking the "submit" button doesn't register or lead anywhere. When I remove the above line (and their relative "") from the form, I am then able to submit.
What is wrong with my use of these Bootstrap classes? What is the proper way to use them?

ASP.NET Search Field Enter Button Issue

I have a web page with 3 search fields on it, each with a different submit button. When using the enter button on the keyboard to submit any of them, an incorrect action is being performed, although with the mouse it's fine.
Any ideas why this is happening?
The rendered HTML as requested below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_ctl00_Head1">
<body id="home">
<form name="aspnetForm" method="post" action="history_lookup.aspx?theme=t2" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzkzOTQxNDBkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYFBSZjdGwwMCRjdGwwMCRNaW5pQ2FydFRleHQxJEltYWdlQnV0dG9uMQUsY3RsMDAkY3RsMDAkVG9wTmF2JFF1aWNrU2VhcmNoMSRJbWFnZUJ1dHRvbjIFLGN0bDAwJGN0bDAwJFRvcE5hdiRRdWlja1NlYXJjaDEkSW1hZ2VCdXR0b24xBShjdGwwMCRjdGwwMCRjcGhSb290JGNwaFN1Yk1hc3RlciRzdWJtaXQxBShjdGwwMCRjdGwwMCRjcGhSb290JGNwaFN1Yk1hc3RlciRzdWJtaXQy4UTdoX+Ej1GFsXGOrI898SMftDA=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=gfGwAOwAxcQ9Nlq6l3EJfg2&t=634166396192656250" type="text/javascript"></script>
<div>
<input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="fwZ-2v_x8CYGGr9a8Ce0s6gkE38QmubHNljKJaKxZV41" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKs3Nu8DwLV2a2zBwKK/6PwCQLBpvyBBAKT+aizBgL+qMTTDwLU1/SWCwL+qNiuCArtGFkuC9Zj3X3If1cwPC7PKtcm" />
</div>
<div class="container clearfix" style="left: 0px; top: 0px">
<div class="utilityNav">
<a class="MenuItem" href="/extranet.aspx?theme=t2" title="Account Info">
Account Info
</a>
|
<a class="MenuItem" href="/history_lookup.aspx?theme=t2" title="Order History">
Order History
</a>
|
<a class="MenuItem" href="/_user_logout.aspx" title="Sign Off">
Sign Off
</a>
</div>
<div class="header">
<div class="cart" >
<div id="menu">
<div class="cartimage">
<input type="image" name="ctl00$ctl00$MiniCartText1$ImageButton1" id="ctl00_ctl00_MiniCartText1_ImageButton1" src="images/bg-cart-corner.gif" align="left" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$MiniCartText1$ImageButton1", "", false, "", "cart.aspx", false, false))" style="border-width:0px;" />
</div>
<div class="cartlabel">Checkout Cart:<br />
<a id="ctl00_ctl00_MiniCartText1_lbMiniCart2" class="cartlink" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$MiniCartText1$lbMiniCart2", "", false, "", "cart.aspx?theme=t2", false, true))">View your cart</a>
</div>
<br /><br />
</div>
</div>
</div>
<div class="primaryNav">
<div class="navdropdown">
</div>
<div align="right" class="quicksearch">
<div class="QuickSearch">
<div id="ctl00_ctl00_TopNav_QuickSearch1_quicksearchpanel" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ctl00_TopNav_QuickSearch1_ImageButton1')">
<table cellpadding="0" cellspacing="0" class="QuickSearch">
<tr>
<td class="quicksearch_text">
<span id="ctl00_ctl00_TopNav_QuickSearch1_lblSearch"></span>
</td>
<td >
<input class="QuickSearch" type="text" name="searchstring" size="15" maxlength="30" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
</td>
<td class="quicksearch_button">
<input type="image" name="ctl00$ctl00$TopNav$QuickSearch1$ImageButton2" id="ctl00_ctl00_TopNav_QuickSearch1_ImageButton2" src="images/searchbutton.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$TopNav$QuickSearch1$ImageButton2", "", false, "", "/Searchdh.aspx?theme=t2", false, false))" style="border-width:0px;" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<td valign="top">
<div class="HistoryLookupPage">
<h1 class="PageHeader">
<span id="ctl00_ctl00_cphRoot_cphSubMaster_PageHeader1_LabelHeader">Order History</span>
</h1>
<p>
Enter the reference number of the order you want to see.
</p>
<p>
Reference number
<input name="ctl00$ctl00$cphRoot$cphSubMaster$CustomerReference" type="text" id="ctl00_ctl00_cphRoot_cphSubMaster_CustomerReference" class="borderTextBox" />
<input type="image" name="ctl00$ctl00$cphRoot$cphSubMaster$submit1" id="ctl00_ctl00_cphRoot_cphSubMaster_submit1" src="images/buttons/findorder-blue.gif" style="border-width:0px;" />
</p>
<br />
<p><b>Or search by PO Number</b></p>
<p>
<input name="ctl00$ctl00$cphRoot$cphSubMaster$CustomerReference2" type="text" id="ctl00_ctl00_cphRoot_cphSubMaster_CustomerReference2" class="borderTextBox" />
<input type="image" name="ctl00$ctl00$cphRoot$cphSubMaster$submit2" id="ctl00_ctl00_cphRoot_cphSubMaster_submit2" src="images/buttons/findorder-blue.gif" style="border-width:0px;" />
</p>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
and the aspx markup
<%# Import Namespace="System.Configuration.ConfigurationManager" %>
<%# Page Language="VB" AutoEventWireup="false" CodeFile="history_lookup.aspx.vb"
EnableViewState="false" Inherits="history_lookup" ValidateRequest="false" CodeFileBaseClass="Main.Page"
MasterPageFile="~/masters/default/main.master" RuntimeMasterPageFile="ThreeColumn.master"
CrumbName="<%$ Resources: Language, LABEL_MENU_HISTORY %>" %>
<%# Register Src="~/controls/Message.ascx" TagName="Message" TagPrefix="uc1" %>
<%# Register Src="~/controls/PageHeader.ascx" TagName="PageHeader" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphSubMaster" runat="Server">
<td valign="top">
<div class="HistoryLookupPage">
<uc1:Message ID="Message1" runat="server" />
<uc1:PageHeader ID="PageHeader1" runat="server" Text="<%$ Resources: Language, LABEL_MENU_HISTORY %>"
EnableTheming="true" />
<p>
<asp:Literal ID="Literal1" runat="server" Text="<%$ Resources: Language, LABEL_PLEASE_ENTER_ORDERREF %>"></asp:Literal>
</p>
<p>
<asp:Literal ID="Literal2" runat="server" Text="<%$ Resources: Language, LABEL_HISTORY_LOOKUP %>"></asp:Literal>
<asp:TextBox runat="server" ID="CustomerReference" CssClass="borderTextBox" />
<%-- <asp:Button ID="Button1" runat="server" CssClass="BtnC" Text="<%$ Resources: Language, ACTION_LOOKUP %>" />
--%> <asp:ImageButton ID="submit1" runat="server" imageurl="~/images/buttons/findorder-blue.gif" />
</p>
<% if Not globals.User("Anonymous") then %>
<br />
<p><b>Or search by PO Number</b></p>
<p>
<asp:TextBox runat="server" ID="CustomerReference2" CssClass="borderTextBox" />
<%-- <asp:Button ID="Button2" runat="server" CssClass="BtnC" Text="Find Order" />
--%> <asp:ImageButton ID="submit2" runat="server" imageurl="~/images/buttons/findorder-blue.gif" />
</p>
<% end if %>
</div>
</td>
</tr>
</table>
</asp:Content>
Encase each set of fields inside a asp:panel, then set the default button for each of the asp:panels to the correct button ID. The problem is its defaulting to the wrong submit button.

Resources