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?
Related
I am using Bootstrap4 custom radiobutton and it works fine as long as I use Label text. Sometimes it makes no sense to have text, but then the radiobutton alone is dis-aligend. How can this be fixed?
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
Result:
Fiddle: https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Using a special character which does not print anything will allow you to get the proper alignment without showing any text next to the radio button.
My guess on why it messes up the styling is because of the ::before and ::after code that gets added to the text. If there is no text there is nothing to add the tags to.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
Add mb-3 class on the empty label
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
<thead>
<th>Select</th>
<th>Name</th>
</thead>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
</td>
<td>Sample option 1</td>
</tr>
<tr>
<td>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">with label</label>
</div>
</td>
<td>Sample option 2</td>
</tr>
</table>
I started writing html code and when I view it on chrome, the table is displayed after a long white space. When I inspect the element, on chrome, I get a lot of br tags but I have not given any br tags in the code
How come?
<!DOCTYPE html>
<head>
<title> Practice </title>
</head>
<body>
<table border="0.00001" align="center" bgcolor="silver">
<caption align="center"> <big><big><b> Registration Form </b><big><big> </caption><br><br>
<form name="My Form" action="" method="">
<tr>
<td> Username </td>
<td> <input type="text" name="t1" size="6"/> </td>
</tr><br><br>
<tr>
<td> Password </td>
<td> <input type="password" name="t2" size="6"/> </td>
</tr><br><br>
<tr>
<td> Name </td>
<td> <input type="text" name="t3" size="30"/> </td>
</tr><br><br>
<tr>
<td> Address </td>
<td> <input type="text" name="t4" size="30"/> </td>
</tr><br><br>
<tr>
<td> Country </td>
<td><select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select></td>
</tr><br><br>
<tr>
<td> Zip Code </td>
<td> <input type="text" name="t5" size="6"/> </td>
</tr><br><br>
<tr>
<td> Email </td>
<td> <input type="text" name="t6" size="30"/> </td>
</tr><br><br>
<tr>
<td>Sex</td>
<td><input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102"/>Female</td>
</tr><br><br>
<tr>
<td>Language</td>
<td><input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102"/>Non English</td>
</tr><br><br>
<tr>
<td> About </td>
<td><textarea name="a1" rows="5" cols="32"> </textarea></td>
</tr><br><br>
<tr align="centre">
<td><input type="submit" name="b2" value="submit here"/></td>
</tr><br><br>
</form>
</table>
I don't think this is <br>. Use Inspect Element to check what's causing so much gap before table. There might be some kind of margin before table.
You have a lot of unnecessary "br" tags in your code, inside your table. Remove them all and all will be fine! Cheers.
Use this code, This might solve your issues
<table border="0.00001" align="center" bgcolor="silver" cellpadding="10">
<caption align="center"><b> Registration Form </b> </caption><br><br>
<form name="My Form" action="" method="">
<tr>
<td> Username </td>
<td> <input type="text" name="t1" size="6"/> </td>
</tr>
<tr>
<td> Password </td>
<td> <input type="password" name="t2" size="6"/> </td>
</tr>
<tr>
<td> Name </td>
<td> <input type="text" name="t3" size="30"/> </td>
</tr>
<tr>
<td> Address </td>
<td> <input type="text" name="t4" size="30"/> </td>
</tr>
<tr>
<td> Country </td>
<td><select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select></td>
</tr>
<tr>
<td> Zip Code </td>
<td> <input type="text" name="t5" size="6"/> </td>
</tr>
<tr>
<td> Email </td>
<td> <input type="text" name="t6" size="30"/> </td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102"/>Female</td>
</tr>
<tr>
<td>Language</td>
<td><input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102"/>Non English</td>
</tr>
<tr>
<td> About </td>
<td><textarea name="a1" rows="5" cols="32"> </textarea></td>
</tr>
<tr align="centre">
<td><input type="submit" name="b2" value="submit here"/></td>
</tr>
</form>
</table>
Just removed some un-necessary tags, that might be causing issues. Please try
You had a lot of LF in your page. You need to check your editor
Also you had invalid tags and missed CSS
Here is a fixed version that validates
<!DOCTYPE html>
<html>
<head>
<title> Practice </title>
<style>
table {
border: 0.00001px;
background-color: silver;
margin: 0px auto;
}
caption {
text-align: center;
font-size: x-large;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<form name="MyForm">
<table>
<caption>Registration Form</caption>
<tr>
<td>Username</td>
<td>
<input type="text" name="t1" size="6" /> </td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="t2" size="6" /> </td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="t3" size="30" /> </td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="t4" size="30" /> </td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="s1">
<option> Select Your Country </option>
<option> Afghanistan </option>
<option> Bangladesh </option>
<option> China </option>
<option> India </option>
<option> Russia </option>
</select>
</td>
</tr>
<tr>
<td>Zip Code</td>
<td>
<input type="text" name="t5" size="6" /> </td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="t6" size="30" /> </td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="r1" value="100" checked/>Male
<input type="radio" name="r1" value="102" />Female</td>
<input type="radio" name="r1" value="103" />Irrelevant</td>
</tr>
<tr>
<td>Language</td>
<td>
<input type="checkbox" name="r1" value="100" checked/>English
<input type="checkbox" name="r2" value="102" />Non English</td>
</tr>
<tr>
<td>About</td>
<td>
<textarea name="a1" rows="5" cols="32"> </textarea>
</td>
</tr>
<tr>
<td class="center" colspan="2">
<input type="submit" name="b2" value="submit here" />
</td>
</tr>
</table>
</form>
</body>
</html>
I am creating an spring-boot MVC web application.
When I get the contents from the controller I can display them correctly on the view. The content is an object with a List. The list is displayed on a table.
<form th:action="#{/}" th:object="${homeVO}" method="post">
<div align="center">
<table width="80%" id="sectionsTable">
<thead>
<th width="10%"><label class="tableTextTitle">ORDER</label></th>
<th width="50%"><label class="tableTextTitle">TITLE</label></th>
<th width="10%"></th>
<th width="10%"><label class="tableTextTitle">HIDE</label></th>
<th width="10%"></th>
<th width="10%"></th>
</thead>
<tbody>
<tr th:each="section, stat :${homeVO.sections}">
<td>
<input type="number" th:value="${section.id}" hidden="true" id="sectionid" />
<input type="number" class="form-control" th:value="${section.position}" id="position"/>
</td>
<td>
<input type="text" class="form-control" th:value="${section.name}" disabled="true" id="name"/>
</td>
<td align="center">
<a th:href="#{./sectionprofile(id=${section.id})}" class="btn btn-default">EDIT</a>
</td>
<td>
<input type="text" class="form-control" th:value="${section.column}" id="column"/>
</td>
<td>
<select class="form-control" id="condition">
<option value="0" th:selected="(${section.condition} == 0)"/>
<option value="1" th:text="#{minor}" th:selected="(${section.condition} == 1)"/>
<option value="2" th:text='#{minorEq}' th:selected="(${section.condition} == 2)"/>
<option value="3" th:text="#{different}" th:selected="(${section.condition} == 3)"/>
<option value="4" th:text='#{equals}' th:selected="(${section.condition} == 4)"/>
<option value="5" th:text='#{biggerEq}' th:selected="(${section.condition} == 5)"/>
<option value="6" th:text='#{bigger}' th:selected="(${section.condition} == 6)"/>
</select>
</td>
<td>
<input type="text" class="form-control" th:value="${section.criteria}" id="criteria"/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
Add Section
<input type="submit" class="btn btn-default" value="SAVE" />
</div>
</form>
When I change some values on the table I want to save them. When I save, I get in the controller the object with an empty List.
#RequestMapping(method = RequestMethod.POST)
public String set(HomeVO homeVO, Model model) {
if (homeVO != null) {
for (SectionVO sectionVO : homeVO.getSections()) {
Section section = sectionRepository.findOne(sectionVO.getId());
section.setPosition(sectionVO.getPosition());
section.setColumn(sectionVO.getColumn());
section.setCondition(sectionVO.getCondition());
section.setCriteria(sectionVO.getCriteria());
sectionRepository.save(section);
}
}
...
return "home";
}
What shall I do to get the table elements back into a List?
To accomplish this rows bindings properly follow the Thymeleaf Spring guide specificaly Dynamic Fields section. There is a special syntax so your HTML should be similar to this:
<tr th:each="row,rowStat : *{rows}">
<td th:text="${rowStat.count}">1</td>
<td>
<select th:field="*{rows[__${rowStat.index}__].variety}">
<option th:each="var : ${allVarieties}"
th:value="${var.id}"
th:text="${var.name}">Thymus Thymi</option>
</select>
</td>
<td>
<input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
</td>
<td>
<button type="submit" name="removeRow"
th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
</td>
</tr>
I have some radio buttons. But I also want to the text clickable. So that the ratio button is selected. So not only if you click on the radio button that the ratio buttion is selected, but also if you click on the text, that the ratio button is selected.
I have this:
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label>#Html.Label(item)</label>
</td>
Thank you
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>
</tr>
}
</table>
</div>
</div>
I have it now like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
<tr>
<td>
<label>
<input type="radio" name="folder" value="#item" id="upload">
<label for="folder">#Html.Label(item)</label>
</label>
</td>
</tr>
}
</table>
</div>
</div>
but the radio buttons are in a foreach loop, so the id is different of every radio button
I try it like this:
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<table>
#foreach (var item in Model.Directories)
{
#for(var i=0; i < item.Count; i++){
<tr>
<td>
<fieldset>
<input type="radio" name="folder" value="#item" id="folder">
<label for="folder">#Html.Label(item)</label>
</fieldset>
</td>
</tr>
}
}
</table>
</div>
</div>
You can use for attribute with the value of the input's id attribute:
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
the simple way
<td>
<label>
<input id="upload" name="folder" type="radio" value="#item" />
#Html.Label(item)</label>
</td>
use label for
<td>
<input id="upload" name="folder" type="radio" value="#item" />
<label for="upload">#Html.Label(item)</label>
</td>
Using for attribute:
<label for="folder">#Html.Label(item)</label>
You need to enclose the radio within a label tag, To display some text add a tag inside the label:
<label for="upload">
<span>#Html.Label(item)</span>
</label>
<input type="radio" name="folder" value="#item" id="upload" >
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