I am trying to click on an ASP:Button with an onclick function. Every time I do that the HTML5 Required stops the click from occurring. I even tried to include an ASP:UpdatePanel but that does not work neither.
<form id="form1" name="theform" class="form-horizontal" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="fb_login" runat="server">
<asp:button CssClass="btn-facebook" ID="FacebookButton" Text="Login with Facebook" OnClick="FacebookButton_Click" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="container">
<div class="form-group">
<label for="FirstName">First Name</label>
<div>
<input type="text" tabindex="1" class="form-control" id="FirstName" required title="Enter First Name" runat="server" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<div>
<input type="text" tabindex="2" class="form-control" id="LastName" required title="Enter Last Name" runat="server" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-primary">Submit Information</button>
</div>
</div>
</div>
</form>
Remove the UpdatePanel and set UseSubmitBehavior="false" on FacebookButton:
<asp:button UseSubmitBehavior="false" CssClass="btn-facebook" ID="FacebookButton" Text="Login with Facebook" OnClick="FacebookButton_Click" runat="server" />
Related
I'm learning to develop a webform. I want to run set of codes again when button is clicked. Can anyone please help me. asp IDs should also be changed for new items. As an example ID="itemCode1" should changed to itemCode2 in the second instance in 3rd itemcode 3 and so on. It is better if the button is moved to last row after clicking
<div class="form-group col-md-2">
<label>Item Code</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="Itemcode1" runat="server" placeholder="Enter Item Code" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Item Name</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="ItemName" runat="server" placeholder="Enter Item Name" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Select The Range</label>
<asp:CheckBoxList ID="CheckBoxList1" TabIndex="2" CssClass="rangecheckbox" RepeatDirection="Vertical" runat="server">
<asp:ListItem Text="Casabalanca (X05)" Value="Casabalanca (X05)"></asp:ListItem>
<asp:ListItem Text="Monaco (X07)" Value="Monaco (X07)"></asp:ListItem>
<asp:ListItem Text="Akoya" Value="Akoya"></asp:ListItem>
<asp:ListItem Text="Scintilla" Value="Scintilla"></asp:ListItem>
<asp:ListItem Text="Enigma" Value="Enigma"></asp:ListItem>
<asp:ListItem Text="BigRocker" Value="BigRocker"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="form-group col-md-1">
<label>No Of Cavities</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="NoOfCavities" runat="server" placeholder="Enter No of Cavities" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Add the photo</label>
<div class="form-group">
<asp:FileUpload Cssclass="form-control" ID="ItemPhoto" type="submit" runat="server" text="Upload Photo" ></asp:FileUpload>
</div>
</div>
<div class="form-group col-md-1">
<label>Material</label>
<div class="form-group">
<asp:DropDownList ID="DropDownList1" Cssclass="form-control" runat="server">
<asp:ListItem text="Select" value="Select" />
<asp:ListItem text="PC" value="PC" />
<asp:ListItem text="Nylon6" value="Nylon6" />
<asp:ListItem text="HIPS" value="HIPS" />
<asp:ListItem text="PBT" value="PBT" />
<asp:ListItem text="ABS" value="ABS" />
<asp:ListItem text="Nylon Fiberfilled" value="Nylon Fiberfilled" />
</asp:DropDownList>
</div>
</div>
<div class="form-group col-md-1">
<asp:Button class="btn btn-primary btn-block" ID="AddAnotherItem" runat="server" Text="AddAnother" />
</div>
</div>
</div>
I have a form that does not want to align itself.
I have tried to show lines how I want the alignment on the attached image, hope it helps.
I want the right hand textboxes to pull-right (as per the blue line on the image, does not work when i add it to the class), and the drop down boxes to fill so that they are the same size as the textboxes (as per the green lines on the image).
Code below :)
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<div class="form-inline">
<div class="form-group row">
<div class="col-md-6">
<asp:TextBox ID="txtFirstname" runat="server" CssClass="form-control loan-form-textbox" placeholder="förnamn"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="txtLastname" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="efternamn"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control loan-form-textbox" placeholder="personnummer"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="email"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control loan-form-textbox" placeholder="hemnummer"></asp:TextBox>
</div>
<div class="col-sm-6">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control loan-form-textbox pull-right" placeholder="mobilnummer"></asp:TextBox>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddCivilstand" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Gift" Value="1"></asp:ListItem>
<asp:ListItem Text="Singel" Value="2"></asp:ListItem>
<asp:ListItem Text="Skild" Value="3"></asp:ListItem>
<asp:ListItem Text="Änka/Änkeman" Value="4"></asp:ListItem>
<asp:ListItem Text="Separerad" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddEmploymentType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="0"></asp:ListItem>
<asp:ListItem Text="Fast anställd" Value="1"></asp:ListItem>
<asp:ListItem Text="Egen företagare" Value="2"></asp:ListItem>
<asp:ListItem Text="Visstidsanställd" Value="3"></asp:ListItem>
<asp:ListItem Text="Pensionär" Value="4"></asp:ListItem>
<asp:ListItem Text="Student" Value="5"></asp:ListItem>
<asp:ListItem Text="Arbetslös" Value="6"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<asp:DropDownList ID="ddChildren" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
<asp:ListItem Text="5" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<asp:DropDownList ID="ddAccomnodationType" runat="server" CssClass="form-control loan-form-textbox">
<asp:ListItem Text="Annat" Value="1"></asp:ListItem>
<asp:ListItem Text="Hyresrätt" Value="2"></asp:ListItem>
<asp:ListItem Text="Bostadsrätt" Value="3"></asp:ListItem>
<asp:ListItem Text="Inneboende" Value="4"></asp:ListItem>
<asp:ListItem Text="Villa/Radhus" Value="5"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<asp:TextBox ID="TextBox5" runat="server" CssClass="form-control loan-form-textbox" placeholder="boendekostnad"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:Button ID="btnApply" runat="server" Text="Ansök nu" CssClass="btn btn-primary pull-right" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap columns have padding on right and left sides, this means that aligning to the right will not be at the edge. to align to the right edge, add style="padding-right: 0;" to elements you need pulled right (it would be better if you use a class rather than inline code .col-pull-right{padding-right: 0;}
The box sizing problem should be solved by removing form-inline class at
<div class="form-inline">
Here the full code. Note i have used final html elements for the code above.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 75px;">
<div class="row">
<div class="col-md-5" style="padding-bottom: 50px;">
<h2>Ansök nu och spara tusentals kronor</h2>
Fyll i dina uppgifter och jämför lån från Sveriges ledande banker. Du kan låna upp till 500 000kr från 3,5% i ränta.<br />
<br />
Endast en kreditupplysning görs genom Conteo, men sin ansökan om lån skickas till alla våra samarbetsbanker. En budgivning mellan bankerna påbörjas och du får resultatet inom 24 timmar.
</div>
<!-- can be replaced by col-md-offset-2 on element below it -->
<div class="col-md-2">.col-md-2</div>
<div class="col-md-5">
<div class="loan-form">
<h3>Hur mycket vill du låna?</h3>
<div>
<b>Lånebelopp</b><span class="pull-right"><span style="font-weight: bold;" id="loanamount">100 000</span> kr</span><br />
<div id="mainloan_slider"></div>
</div>
<br />
<br />
<div>
<b>Återbetalningstid</b><span class="pull-right"><span style="font-weight: bold;" id="repaymenttime">8</span> år</span><br />
<div id="repaymenttime_slider"></div>
</div>
<br />
<hr style="background-color: #E6C485; height: 2px;" />
<!-- remove class form-inline from here -->
<!--<div class="form-inline"> -->
<div>
<div class="form-group row">
<div class="col-md-6">
<input ID="txtFirstname" class="form-control loan-form-textbox" placeholder="förnamn"/>
</div>
<div class="col-md-6">
<input ID="txtLastname" class="form-control loan-form-textbox pull-right" placeholder="efternamn"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox3" class="form-control loan-form-textbox" placeholder="personnummer"/>
</div>
<div class="col-md-6">
<input ID="TextBox4" class="form-control loan-form-textbox pull-right" placeholder="email"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<input ID="TextBox1" class="form-control loan-form-textbox" placeholder="hemnummer"/>
</div>
<div class="col-sm-6">
<input ID="TextBox2" class="form-control loan-form-textbox pull-right" placeholder="mobilnummer"/>
</div>
</div>
<div class="form-group row" style="margin-top:25px; padding-right: 0">
<div class="col-sm-6">
<select ID="ddCivilstand" class="form-control loan-form-textbox">
<option value=""> Gift</option>
<option value=""> Singel</option>
<option value=""> Skild</option>
<option value=""> Änka/Änkeman</option>
<option value=""> Separerad</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddEmploymentType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Fast anställd</option>
<option value=""> Egen företagare</option>
<option value=""> Visstidsanställd</option>
<option value=""> Pensionär</option>
<option value=""> Student</option>
<option value=""> Arbetslös</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-sm-6">
<select ID="ddChildren" class="form-control loan-form-textbox">
<option value=""> 1</option>
<option value=""> 2</option>
<option value=""> 3</option>
<option value=""> 4</option>
<option value=""> 5</option>
</select>
</div>
<div class="col-sm-6">
<select ID="ddAccomnodationType" class="form-control loan-form-textbox">
<option value=""> Annat</option>
<option value=""> Hyresrätt</option>
<option value=""> Bostadsrätt</option>
<option value=""> Inneboende</option>
<option value=""> Villa/Radhus</option>
</select>
</div>
</div>
<div class="form-group row" style="margin-top:25px;">
<div class="col-md-6">
<input ID="TextBox5" class="form-control loan-form-textbox" placeholder="boendekostnad"/>
</div>
<div class="col-md-6">
<button ID="btnApply" class="btn btn-primary pull-right">Ansök nu</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have an online banking login that I'm trying to take from an old client site and put on their new site. If I copy the form and paste it into my new site, it just reloads the page when submitted. I've tried to change it to an asp.net form using the appropriate and other applicable tags with the same result.
If I take the form and put it in a simple index.html file, it submits and takes me to the correct external site.
I was unable to set the ID & values with the asp.net form and that may be one of the issues.
Any help is appreciated.
Here is the HTML form version that works in .html page that needs to work in .aspx page:
<form action="some external site" method="POST" autocomplete="OFF" target="_top">
<input type="hidden" name="sssid" value="my value">
<input type="hidden" name="iid" value="another value">
<div class="field-container">
<label for="aid" id="aid-label">Access ID</label>
<input name="aid" id="aid" type="text" size="8" onFocus="toggle_label(this, 'focus');" onBlur="toggle_label(this,'blur');" />
</div>
<div class="field-container">
<label for="passcode" id="passcode-label">Passcode</label>
<input name="passcode" id="passcode" type="password" size="8" onFocus="toggle_label(this, 'focus');" onBlur="toggle_label(this,'blur');"/>
</div>
<div class="form-row">
<input type="submit" name="Submit" value="Go" class="button">
</div>
</form>
Here is my asp.net form version that I tried:
<form action="some external site" method="POST" autocomplete="OFF" target="_top">
<input type="hidden" name="sssid" value="some value">
<input type="hidden" name="iid" value="another value">
<asp:TextBox runat="server" ID="sssid" CssClass="form-control" type="hidden" ClientIDMode="Static"></asp:TextBox>
<asp:TextBox runat="server" ID="iid" CssClass="form-control" type="hidden" ClientIDMode="Static"></asp:TextBox>
<div class="form-group">
<asp:Label runat="server" id="lblAccessID"></asp:Label>
<asp:TextBox runat="server" ID="txtAccessID" CssClass="form-control"> </asp:TextBox>
</div>
<div class="form-group">
<asp:Label runat="server" id="lblPassCode"></asp:Label>
<asp:TextBox runat="server" ID="txtPasscode" CssClass="form-control" TextMode="Password"></asp:TextBox>
</div>
<button type="submit" class="btn btn-blue">GO
<img src="/Content/img/icon-sm-arrow.png" alt="" />
</button>
</form>
My asp.net form code behind:
protected void Page_Load(object sender, EventArgs e)
{
txtAccessID.Attributes.Add("placeholder", "Access ID");
txtPasscode.Attributes.Add("placeholder", "Passcode");
}
I had to use the following to post this correctly:
<asp:LinkButton runat="server" ID="btnSubmit" CssClass="btn btn-blue" PostBackUrl="urlhere" Text='GO <img src="/Content/img/icon-sm-arrow.png" alt="" />' />
set PostBackUrl property of Button control => https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.postbackurl(v=vs.110).aspx
the reason webforms always posting it 2 itself may be due to their __doPostBack script.
I am customizing the account registration section of a new VS 2013 web application which comes with bootstrap css format. I am trying to build a form on a page and cannot get one section to display inline instead of block. Latest try is below.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCountry" CssClass="col-md-2 control-label">Country</asp:Label>
<div class="col-md-10">
<asp:DropDownList runat="server" ID="ddlCountry" CssClass="form-control" Width="200" />
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbPostalCode" CssClass="col-md-2 control-label">Postal Code</asp:Label>
<div class="col-md-10-inline">
<asp:TextBox runat="server" ID="tbPostalCode" CssClass="form-control" Width="200" MaxLength="10" Height=" " />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCountry"
CssClass="text-danger" ErrorMessage="The country field is required." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbPostalCode"
CssClass="text-danger" ErrorMessage="The postal code field is required." />
</div>
</div>
</div>
</div>
This is how everything I try to get it to display inline ends up looking like
I want the Postal Code label and text box to display on same line as Country. Normally an easy task but bootstrap clearing getting in the way
what i did to achieve this is wrote each form controls in a separate row. ie,
<form role="form">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter email">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name">
</div>
</div>
</div>
</form>
In the above code, First Name and Last Name elements will be shown in a same line,
I don't know whether its right way or not but it worked for me.
check it here http://ezmotionq.com/registration
<div class="step-content">
<div class="step-pane active" id="step1">
<div class="control-group ">
<label class="control-label" for="inputWarning">Please select the Event Name</label>
<div class="controls">
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="EventName" DataValueField="EventId"></asp:DropDownList>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:WBENCConnectionString %>' SelectCommand="SELECT [EventId], [EventName] FROM [Event]"></asp:SqlDataSource>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="control-group " >
<asp:Label ID="DateLabel" runat="server"></asp:Label>
<div class="controls">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="control-group ">
<label class="control-label" for="inputWarning">
<span class="muted">You can learn more about the program here</span></label>
<div class="controls">
<label class="radio">
<asp:RadioButton ID="Radio1" runat="server" Text="Yes" value="option1" /></label>
<label class="radio">
<asp:RadioButton ID="Radio2" runat="server" Text="No" value="option2" /></label>
<label class="radio">
<asp:RadioButton ID="Radio3" runat="server" Text="Uncertain" value="option2" /></label>
</div>
</div>
</div>
<div class="step-pane" id="step4">
<div class="control-group">
<label class="control-label" for="selectError30">Which days will you be available to participate in the Matchmaker Sessions?</label>
<div class="controls">
<asp:DropDownList ID="selectError30" runat="server" OnDataBound="selectError30_DataBound">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label">Upload your capability statement. <a style="color: #67c2ef;" href="#">What's this?</a></label>
<div class="controls">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
</div>
here the DropDownlist1_onselectedIndexChanged event got full page load..
and RadioButtonList1 event also get page load...
here how can I use the Update Panel to overcome the full page load....
In my code all events perform Page_Load....
I want to prevent that loading....
If there is a full page load then since panel is inside the page, it will also get refreshed. You can put the drop down inside another update panel. This will prevent the refreshing of radio button update panel.