I have a form with a modal form for now, I plan to have another modal form on the form but issue is, when i fill the modal form and click on Submit, It actually fires the code behind but the modal form closes and the page reloads. The success or error message will only appear when i reopen the modal.
I want the modal to remain and the page should not reload so that i can see the error or success message.
Code below.
<!-- Modal starting Point -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">
<div class="w3-center"><br/>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">×</span>
<div class="w3-content w3-purple w3-center" style="width:100%;"><h2 style="text-align:center;">Change User Password</h2></div>
</div>
<div class="w3-container">
<div class="w3-section w3-row-padding">
<div class="w3-half">
<label style="margin-left:0px">UserName:</label>
<asp:TextBox runat="server" ID="Username" CssClass="w3-input w3-border w3-animate-input" TextMode="singleline" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Username"
CssClass="text-danger" ErrorMessage="The UserName field is required." />
</div>
<div class="w3-half">
<label>Password:</label>
<asp:TextBox runat="server" ID="Password" CssClass="w3-input w3-border w3-animate-input" TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
CssClass="text-danger" ErrorMessage="The Password field is required." />
</div>
<div class="w3-half">
<label>Confirm Password:</label>
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="w3-input w3-border w3-animate-input" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword" CssClass="text-danger" ErrorMessage="The Confirm Password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
</div>
<asp:Button type="button" runat="server" ID ="ChangeUserPassword" Text="Change Password" CssClass="w3-button w3-block w3-section w3-padding w3-purple w3-hover-blue" />
<asp:Label ID="InvalidCredentialsMessage" runat="server" CssClass="w3-block" ForeColor="Red" Visible="False" Width="400"></asp:Label>
</div>
</div>
<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
<button runat="server" onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red w3-card-2">Cancel</button>
</div>
</div>
I don't know about asp.net, but i can see you don't have a form definition. Usually you define the form and a submit (button or input) and then you could do something before the submit. For example, if you use Jquery:
$('#myform').submit(function() {
// return true or false depending of some validation
// returnig false the form isn't submitted
});
Other way is using the "onlick" event of the submit.
Saludos,
Related
I am facing an issue with modal. i have a modal that serves as sign up form and after I fill in the needed data to create account and click submit, the modal disappears. I later added a line of code on the server side to keep the modal appearing but it did not work. Please I need help. Here is my code:
<button type="button" runat="server" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#MyModal">New User?</button>
<!-- Modal -->
<div class="modal" id="MyModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">JosCheck - Sign Up</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="email">Email Address</label>
<asp:TextBox ID="mailtxtbx" CssClass="form-control" Width="300px" runat="server" placeholder="Email.." TextMode="email"></asp:TextBox>
<br />
</div>
<div class="form-group">
<label for="password">Password</label>
<asp:TextBox ID="pass" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
<br />
</div>
<div class="form-group">
<label for="Confirm_password">confirm Password</label>
<asp:TextBox ID="conpass" CssClass="form-control" Width="300px" runat="server" placeholder="Confirm Password" TextMode="password"></asp:TextBox>
<asp:CheckBox ID="check1" runat="server" />
<br />
</div>
<div class="form-submit">
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</div>
<div>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:Label ID="Label3" runat="server"></asp:Label>
<asp:Label ID="Label4" runat="server"></asp:Label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SERVER SIDE CODE (aspx.cs)
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#MyModal').modal('show')", true);
I have a page with textboxes where a user enters their name and address. I also have ASP.NET requiredfieldvalidators associated with each of the input textboxes to verify that they enter in their info. Everything works for validating the fields from C# server-side, however, I need to validate them from client-side as well. I have an OnClientClick and OnClick events tied to a button.
When the OnClientClick function is called, I want to verify that the requiredfieldvalidators are valid (i.e. user entered info into input boxes) and if so, then I am wanting to start a JS timer that will do something after a certain period of time elapses. In the meantime, the Onclick server-side event fires and executes code to insert input into database. The server-side code is executing correctly in that my if (Page.IsValid) is correct.
If student did not enter info into all required fields, then it is false and does not execute the rest of the code. If student did enter all info, then inserts into DB. However, in the client-side code, when I execute if (Page_ClientValidate()) it ALWAYS returns true even if no fields have been filled out.
What am I missing? I want to say if "validation is successful (i.e. all fields have been entered) then start timer, otherwise do not start timer". Below is short snippet of my code. So when client-side function "Test()" is called, it is always saying 'true' even when inputs are empty, but the server-side function shows Page.IsValid is false, stops and shows the validator messages (which are defined in server-side function during Page_Load()). Why does client-side always give me true but server-side is false?
Client:
<%# Page Language="c#" CodeBehind="test1.aspx.cs" AutoEventWireup="false" Inherits="test1" %>
<!DOCTYPE html>
<html>
<head>
<title>xyz</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div id="webPage">
<h3 class="section-title" align="left">User Information</h3>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Name on Card</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">First Name:</label>
<asp:TextBox ID="tbBillFirstName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirstName" ControlToValidate="tbBillFirstName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Last Name:</label>
<asp:TextBox ID="tbBillLastName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLastName" ControlToValidate="tbBillLastName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Billing Address</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street1:</label>
<asp:TextBox ID="tbBillAddress1" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAddress1" ControlToValidate="tbBillAddress1" Display="Dynamic"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19" runat="server"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street2:</label>
<asp:TextBox ID="tbBillAddress2" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">City:</label>
<asp:TextBox ID="tbBillCity" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillCity" ControlToValidate="tbBillCity" Display="Dynamic" runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">State:</label>
<asp:DropDownList ID="StatesDDL" runat="server" DataTextField="State_name" DataValueField="State_code" CssClass="input-textbox editable" AutoPostBack="False" BackColor="#fff2e6"></asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBillState" ControlToValidate="StatesDDL" Display="Dynamic" InitialValue="Select" runat="server" Font-Name="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Zip:</label>
<asp:TextBox ID="tbBillZip" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillZip" ControlToValidate="tbBillZip" Display="Static"
runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cvZip" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" runat="server" Display="Dynamic" ControlToValidate="tbBillZip"
OnServerValidate="CheckZipFormat"></asp:CustomValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Country:</label>
<asp:DropDownList ID="ddlCountry" runat="server" DataTextField="Country_name" DataValueField="Country_code"
OnSelectedIndexChanged="CountryChanged" AutoPostBack="True"
CssClass="input-textbox editable" BackColor="#fff2e6">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" runat="server" ControlToValidate="ddlCountry"
Display="Dynamic" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" InitialValue="00"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
</div>
<div id="divSubmit" class="grid-row bottom-nav">
<div class="grid-col-xs-12" style="text-align:center;">
<asp:LinkButton ID="btn_submit2" runat="server" OnClientClick="Test();" OnClick="btn_submit_Click" CssClass="button button-orange" CausesValidation="true">Submit</asp:LinkButton>
</div>
</div>
</div>
<script type="text/javascript">
function Test() {
if (Page_ClientValidate()) {
alert('valid');
}
else {
alert('not valid');
}
}
</script>
</form>
</body>
</html>
Server-side:
public void btn_submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// insert into DB
}
}
I am using bootstrap modal for one of the comment/feedback forms, It works working sometime and sometime it only shows the black overlay & no modal.
Not sure where it is wrong as i don't get any error in the console also.
I am facing two issues, When it works then it closes the form when i click the save button without saving or validating.
and second issue with i am facing now is that when i click on button/link to open the modal it only show the black overlay and no modal window
<a id="btnPostComment" class="btn btn-com-po" >POST COMMENT</a>
$(window).load(function() {
$("#btnPostComment").click(function() {
$("#modalPostComment").modal({
backdrop: 'static',
keyboard: false
});
});
});
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalPostComment">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="category-headding ">POST A COMMENT</h3>
</div>
<div class="modal-body" style="padding:25px;">
<asp:UpdatePanel ID="updPanelForm" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlForm" runat="server">
<div class="row">
<div class="col-sm-12">
<p>[*] required field.</p>
<asp:ValidationSummary ID="vsCommentForm" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" />
<asp:RequiredFieldValidator ID="rfvFullName" runat="server" ErrorMessage="Name field can't be left blank" CssClass="css-validator" ControlToValidate="txtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvtxtEmail" runat="server" ErrorMessage="Email field can't be left blank" CssClass="css-validator" ControlToValidate="txtEmail" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rfevtxtEmail" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtEmail" CssClass="css-validator" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="rfvddlCountry" runat="server" InitialValue="0" ErrorMessage="Select Country" CssClass="css-validator" ControlToValidate="ddCountry" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfMessage" runat="server" ErrorMessage="Message field can't be left blank" CssClass="css-validator" ControlToValidate="txtMessage" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtValidate" CssClass="hidden" runat="server"></asp:TextBox>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtFullName" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-1">
<span class="input_label_content" data-content="Full Name">Full Name *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtEmail" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-2">
<span class="input_label_content" data-content="Email Address">Email Address *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtMessage" runat="server" CssClass="input_field" TextMode="MultiLine" MaxLength="10" TabIndex="4"></asp:TextBox>
<label class="input_label" for="message">
<span class="input_label_content" data-content="Your Email">Your Message *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<asp:Button ID="btnSaveComment" CssClass="btn btn-stylex" runat="server" Text="Post Your Comment" CausesValidation="true" ValidationGroup="vgCommentForm" UseSubmitBehavior="False" OnClientClick="ValidateCommentForm(this);" OnClick="btnSaveComment_Click"
/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlMessage" runat="server" Visible="false">
<asp:Label ID="lblSuccess" CssClass="lbl-com-success" runat="server" Text="Comment posted"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
Try this
Bump for a bit of an explanation? I thought it might have been because jQuery wasn’t being loaded until later...
I’ve seen the workarounds but i’d like to understand in case I come across this again
I want to display modal popup if user is not exist but modal popup is disappearing if user is not exist.
<i class="fa fa-key" aria-hidden="true" style="margin-right: 8px;"></i>Login
<div id="login-form">
<div class="modal-body">
<asp:TextBox ID="txt_UserName" runat="server" ValidationGroup="login" CssClass="form-control" autocomplete="off" placeholder="Enter Email ID"></asp:TextBox>
<div class="error-msg text-left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please Specify Your Email Id" ControlToValidate="txt_UserName" ValidationGroup="gr_in" ForeColor="Red"></asp:RequiredFieldValidator></div>
<asp:TextBox ID="txt_Password" runat="server" CssClass="form-control" ValidationGroup="login" TextMode="Password" autocomplete="off" placeholder="Enter Password"></asp:TextBox>
<div class="error-msg text-center">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter your Password" ControlToValidate="txt_UserName" ValidationGroup="gr_in" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
<div class="error-msg text-center">
<asp:Label ID="lbl_errormsg" runat="server" Visible="false" ForeColor="red"></asp:Label>
</div>
</div>
<div class="modal-footer">
<div>
<asp:Button ID="btn_Login" runat="server" Text="Login" OnClick="btn_Login_Click" CssClass="btn btn-primary btn-lg btn-block" ValidationGroup="gr_in" />
</div>
<div>
<asp:Button ID="btn_LostPassword" runat="server" Text="Forgot password?" OnClick="btn_LostPassword_Click" CssClass="btn btn-link" />
<asp:Button ID="btn_Register" runat="server" Text="New User?" OnClick="btn_Register_Click" CssClass="btn btn-link pull-right" />
</div>
</div>
</div>
Below is button Click code, I want to show modal popup if status is not success, I wrote script code in else condition but pop pup is showing, I tring If user is not exist then modal pop up should not go.
protected void btn_Login_Click(object sender, EventArgs e)
{
string StatusMsg = string.Empty;
bo.Para1 = txt_UserName.Text;//UserName
bo.Para2 = txt_Password.Text;//Password
bo.Para3 = this.Page.Request.ServerVariables["REMOTE_ADDR"]; // SystemIp
HttpBrowserCapabilities browserInfo = Request.Browser;
bo.Para4 = browserInfo.Browser; //BrowserType
bo.Para5 = browserInfo.Version;//Browser Version
bo.Para6 = browserInfo.Platform;//OperatingSystem
bl.Get_User_Login(bo, out LoginDetails, out StatusMsg);
if (StatusMsg == "Success")
{
ShowResult();
}
else
{
lbl_errormsg.Visible = true;
lbl_errormsg.Text = StatusMsg;
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "none", "<script>$('#login-modal').modal('show');</script>", true);
}
}
I have this code below. I am attempting to on the checkbox click the 2 expanded divs would be shown/hidden. For some reason the functions are being hit but they are not hiding/showing hte divs. I put the exact code in jfiddle and it worked correctly. Any input would be great thanks.
HERE IS JFIDDLE THAT WORKS CORRECTLY http://jsfiddle.net/svmY3/3/
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="HorizontalSinglePageOptinSqueezePage2.ascx.cs" Inherits="UmbracoUsercontrols.HorizontalSinglePageOptinSqueezePage2" %>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
alert('test234123123');
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
alert('test2343');
});
});
function showhide() {
alert('test');
$("#expanded, #expanded2").toggle();
}
</script>
<!-- BASIC FORM -->
<div class="col-md-4">
<form role="form">
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="text" id="name" placeholder="NAME"/>
</div>
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="email" id="email" placeholder="EMAIL"/>
</div>
<div class="assistance">I would like immediate assistance: <input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div>
<!-- EXPANDED FORM SECTION 1 -->
<div style="display:none" runat="server" class="expanded" id="expanded">
<div class="form-group">
<asp:textbox runat="server" type="tel" class="form-control" id="phone" placeholder="PHONE"/>
</div>
<p class="center">Please tell us about your situation and we'll see if we can help. We will also email you the <em>The 5 Easiest Ways to STOP Foreclosure in Under 48 Hours or Less</em>.</p>
</div>
<!-- END EXPANDED FORM SECTION 1 -->
</form></div>
<div class="col-md-5">
<!-- EXPANDED FORM SECTION 2 -->
<div runat="server" style="display:none" class="expanded" id="expanded2">
<div class="form-group">
<asp:label runat="server">Are you most interested in:</asp:label>
<asp:dropdownlist runat="server" id="interest" class="pull-right">
<asp:listitem value="Selling" Text="Selling"></asp:listitem>
<asp:listitem value="Refinancing" Text="Refinancing">
</asp:listitem>
<asp:listitem value="Keeping" Text="Keeping"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<Asp:Label runat="server" >Are you in foreclosure:</Asp:Label>
<asp:DropDownList runat="server" ID="foreclosure" OnChange="javascript:toggle();">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Selected="True" Value="No" Text="No" />
</asp:DropDownList>
</div>
<div class="form-group">
<asp:label runat="server">Your best guess, how much do you owe on:</asp:label><br />
<asp:label runat="server" >1st Mortgage:</asp:label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<label>2nd Mortgage:</label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<asp:label runat="server" >Have you filed bankruptcy:</asp:label>
<asp:dropdownlist runat="server" ID="bankruptcy" class="pull-right">
<asp:listitem value="No" Text="No"></asp:listitem>
<asp:listitem value="Yes" Text="Yes"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<asp:label runat="server" >Please describe your situation (briefly):</asp:label><br />
<asp:textbox runat="server" ID="situation" class="form-control"></asp:textbox>
</div>
</div>
<!-- END EXPANDED FORM SECTION -->
<asp:button runat="server" id="button" name="button" type="submit" text="Get Your E-Book Now" class="btn btn-primary btn-lg trackMe" data-trackerid="optin" OnClick="submitButton_Click"></asp:button>
<div class="center privacy">
<small>100% Privacy Guaranteed</small>
</div>
</div>
When an ASP control has runat="server", it generates a new id for the element so that it can bind its own JS handler to that new generated id. I bet if you inspect that element on the browser, its id won't be assist. Remove runat="server" if you aren't actually doing a server callback.
Put showhide() inside the $(document).ready function. Otherwise you're assigning the toggle-effect before the according input element is even loaded.
$(document).ready(function () {
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
});
function showhide() {
$("#expanded, #expanded2").toggle();
}
});