I have a card created and defined in HTML. I want to get rid of it in the HTML and therefore create the same card using jquery/javascript, that way a new one can be created on the click of a button.
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )"></asp:Label>
</asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3" runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
</div>
Something like this should work.
In your HTML:
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
</div>
<button id="myBtn">Click me</button>
In your javascript
const card = `
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )">
</asp:Label></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3"
runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
`
const button = document.getElementById("myBtn")
const mainDiv = document.getElementById("divEntryPanel")
button.onclick = function () {
mainDiv.innerHTML += card
}
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 need to post form to Salesforce to create a case. Before submitting a form depending on which button is clicked I need to change form values.
I created a from which has two buttons, when first button is clicked I am setting time to current time, if second button is clicked I am picking time which is entered by client. Also from code behind I need to get account id and assign it to form value.
<form runat="server" id="sf_case_form" name="sf_case_form" action="https://test?encoding=UTF-8" method="post">
<input hidden="hidden" id="sf_account_id" maxlength="20" runat="server" name="sf_account_id" size="20" type="text" />
<input type="hidden" id="external" name="external" value="1" />
<input hidden="hidden" type="submit" name="submit"/>
<div class="wrapper wrapper-content p-xs">
<div class="row">
<div class="col-lg-3">
<div class="contact-box center-version">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Request Callback</h5>
</div>
<div class="ibox-content" >
<div class="form-group">
<label class="font-normal">Your phone number</label>
<input id="selected_phone_number" name="selected_phone_number" type="text" class="form-control" data-mask="(999) 999-9999" runat="server" placeholder="(999) 999-9999"/>
</div>
<asp:button style="margin-bottom: 20px" id="btn_call_now" OnClick="call_now_Click" type="button" runat="server" Text="Call me now" CssClass="btn btn-w-m btn-danger"/>
<div class="form-group" id="data_1">
<label class="font-normal">Choose your desired date and time to schedule a call</label>
<div class="input-group date">
<input id="selected_date" name="selected_date" type="text" runat="server" class="form-control" value="03/04/2014"/>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="input-group clockpicker" data-autoclose="true">
<input id="selected_time" name="selected_time" type="text" runat="server" class="form-control" value="09:30"/>
<span class="input-group-addon">
<span class="fa fa-clock-o"></span>
</span>
</div>
<div style="margin-top: 20px">
<asp:button id="btn_schedule_call" type="button" runat="server" OnClick="schedule_call_Click" Text="Schedule a call" CssClass="btn btn-w-m btn-primary"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Code behind
protected void call_now_Click(object sender, EventArgs e)
{
//Set date to current date
selected_date.Value = DateTime.Now.ToString("d");
selected_time.Value = DateTime.Now.ToString("t");
post_form();
}
call_now_Click is not getting called and how can I submit a form after values are changed from code behind?
When using
<button type="button" onclick="yourFunctionName()">Click Me!</button>
add ClientIDMode="Static" to your server control to use simpler ID
<input ClientIDMode="Static" id="selected_date" name="selected_date" type="text" runat="server" class="form-control" value="03/04/2014"/>
add
in the script
<script>
function yourFunctionName() {
document.getElementById('selected_date').value = new Date();
....
....
document.form.submit();
}
</script>
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 am trying to save the data which is entered in the modal popup to the main page.
here is the code for the main page.
Company Info
<div id="AddMoreDetails">
<div class="table" runat="server" id="AddMore">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<table style="width:200%;">
<tr>
<td>Company Name</td>
<td>Company Address</td>
<td>Contact</td>
<td>Company HO</td>
<td>HO Contact</td>
<td>Email ID</td>
</tr>
<tr>
<td>
<textarea id="TextArea1"></textarea>
</td>
<td>
<textarea id="TextArea2"></textarea>
</td>
<td>
<textarea id="TextArea3"></textarea>
</td>
<td>
<textarea id="TextArea4"></textarea>
</td>
<td>
<textarea id="TextArea5"></textarea>
</td>
<td>
<textarea id="TextArea6"></textarea>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="text-align: right">
<div class="row">
<div class="col-md-12">
Here is the code for Modal popup window
<div id="myModalPopup" class="modal fade" role="dialog" data-keyboard="false"> // modal popup window
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: orangered; border-top-left-radius: 4px; border-top-right-radius: 4px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Company Details</h4>
</div>
<div class="modal-body">
<asp:Panel ID="Panel2" runat="server" class="tab-pane">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<asp:Label runat="server" ID="lblNmeComp" Text="Name of Company" AssociatedControlID="txtNmeComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtNmeComp" CssClass="form-control" />
<br />
</div>
<div class="col-sm-4">
<asp:Label runat="server" ID="lblAdrComp" Text="Adress of Company" AssociatedControlID="txtAdrComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtAdrComp" CssClass="form-control" />
<br />
</div>
<div class="col-sm-4">
<asp:Label runat="server" ID="lblConctComp" Text="Contact Number" AssociatedControlID="txtConctComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtConctComp" CssClass="form-control" />
<br />
</div>
</div>
</div>
Here is the button code for opening Modal popup window
<button id="AddMore_Button" class="btn btn-primary" data-target="myModalPopup">Add More</button> </div>
Here is the button code for saving data from modal popup window.
<button type="button" runat="server" onclick="savepopupdata()">
To get the values from modal popup window I have written a javascript function.
<script type="text/javascript"> //Java script function
function savepopupdata()
{
document.getElementById.valueOf(txtNmeComp) = document.getElementById.valueOf(TextArea1);
document.getElementById.valueOf(txtAdrComp) = document.getElementById.valueOf(TextArea2);
document.getElementById.valueOf(txtConctComp) = document.getElementById.valueOf(TextArea3);
}
</script>
But unfortunately it is not saving the data. Any wrong in this code.
We can get input elements values by it attributes only like ID, Class ...
try with
document.getElementById("TextArea1").value;
...
if you want to find elements by ids and change their values, then try this code
function savepopupdata() {
document.getElementById('txtNmeComp').value = document.getElementById('TextArea1').value;
document.getElementById('txtAdrComp').value = document.getElementById('TextArea2').value;
document.getElementById('txtConctComp').value = document.getElementById('TextArea3').value;
}