I have a simple form. Its got one field and a submit button.
I hide the submit button. The submit button is actually triggered with an anchor
tag that calls a javascript method that uses jQuery to get the element and execute
a click(). This works fine, the form posts and record is successfully written into the DB.
So now I added xVal for validation. I am trying to add in the simple client side validation.
It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.
Any grande ideas? Thanks much!
Heres some code...
<div id="manufacturerButtons" class="moduleRow">
<%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
| <a class="actionImage" href="javascript: addManufacturer();">
<img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>"> <span>Add
Manufacturer </span></a>
</div>
<div class="moduleContent">
<div id="manufacturerContainer">
<div class="moduleRow">
<h3>
New Manufacturer</h3>
</div>
<div class="moduleRow">
<% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
<table class="noBorder" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 125px">
<h6>Name:</h6>
</td>
<td>
<%= Html.TextBox("Name") %>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<input type="submit" id="btnAdd" name="btnAdd" />
</td>
</tr>
</table>
<% Html.EndForm(); %>
<%= Html.ClientSideValidation<EquipmentManufacturer>() %>
</div>
</div>
Javascript:
function addManufacturer() {
//$('form').submit(); // doesnt work when trying to validate either
$('#btnAdd').click();
return true;
}
What you need to do is trigger the jQuery validation on your form. Try:
$('form').validate();
To submit the form upon successful validation, try:
$('form').validate({ submitHandler: function(form) { form.submit(); } });
Note that 'form' should be a valid jQuery selector for your form...
Related
Hi I have a question is that possible to have function to display my table after the button was pressed, because now it's always on? I've tried with some IF functions but they weren't working.
My code:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<br />
<span style="font-weight: bold">Tytuł filmu:</span> #Html.TextBox("VideoName")
<input type="submit" value="Szukaj" class="btn-primary" />
<br />
<br />
<table cellpadding="0" cellspacing="0">
<tr>
<th>
#Html.DisplayNameFor(model => model.ImageUrl)
</th>
<th>
#Html.DisplayNameFor(model => model.VideoName)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ImageUrl)
</td>
<td>
#Html.DisplayFor(modelItem => item.VideoName)
</td>
</tr>
}
</table>
}
If you put your markup inside a conditional block as follows:
#if (true)
{
#* PUT MARKUP HERE *#
}
Then the markup will only appear when the if condition is true.
Alternatively, you can use client-side code to simply hide the markup. I don't know which is best, because you haven't provided any details about what you are doing.
Instead of saying THE button, perhaps you should've talked about what kind of button you have and what is it supposed to do. If it works server side, use my first suggestion. If it needs to work client side, use my second suggestion.
You can do that in number of ways,
Javascript:
document.getElementById('mytable').style.display = 'block';
Give your table an ID and set its display to none; initially, then using javascript on the button click switch the table display to block;
function buttonClick(){
document.getElementById('myTable').style.display = 'block';
}
<table id='myTable' style='display:none;'>...</table>
<input type="submit" value="Szukaj" class="btn-primary" onclick='buttonClick()' />
Notes:
- It can be much easier if you are using jquery
- You can use event listener for the button click
Server side code:
On your action method set a TempData or ViewBag variable and then in the html check if this value exist, if true show the table
I am sure there are many other ways to do that but most of them will be around both ideas I listed.
You can have a button that toggles the visibility of the table, call the below function on the button onclick event to show or hide the table.
function toggleTable() {
var lTable = document.getElementById("YourTableId");
lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
You have several good answers but it depends on exactly what you are trying to accomplish. I've used a variety of what has been provided. You mention showing table on button click. Do you also need to hide table if said button is clicked again? If so, client side jQuery and .toggle() could help.
$(document).ready(function(){
$("button").click(function(){
$("#myTable").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Toggle</button>
<table id="myTable" style="border: 1px solid black; display: none">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
how to perform an action when i click the html submit button without using runat server. Where i have to write the code and what i have to write. Please help me. I have a below code:
<table>
<tr>
<td>Enter User Id</td>
<td><input type="text" id="txtUserId" name="userId"/></td>
</tr>
<tr>
<td>Enter Password</td>
<td><input type="password" id="txtPassword" name="password"/></td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkRememberMe" />
<label for="chkRememberMe">Remember Me</label>
</td>
</tr>
<tr>
<td><input type="Submit" id="btnSubmit" value="Login" name="submitButton"/></td>
</tr>
</table>
I want to write logic in *aspx.cs file. Thank you.
Any http post of a page back to the server will trigger your codebehind to be executed, regardless of whether you have a runat="server" or not. You can detect this by inspecting the IsPostback property of the Page object.
All asp.net buttons are "submit" buttons. Typically, you'll want to have a runat="server" attribute on your button so you can handle events for that specific button in your codebehind. While I can only think of a few select reasons for not, the primary one typically cited is that the runat="server" causes the control ID to be changed so that it is unpredictable in client scripts and CSS. If this is your reason, you can set the clientidmode to static on that control.
In my web page i am using panel then div. panel is loading first and then div tag, but I want two at a time. I tried Ajax update process and java script Loading image but not working.
please help me.
<div class="container-fluid contentStart" >
<div class="row-fluid">
<div data-layout='{"type": "border", "hgap": 3, "vgap": 3}' class="layout mailVertical">
<asp:Panel ID="pnlRefDet" runat="server" class="layout mailVertical" >
....
</asp:panel>
<div class="west" style="background-color:#FAFAFA; width:32%" runat="server" id="divMessageInbox">
.....
</div>
</div>
</div>
</div>
You can put both in table then it will load at once
<table>
<tr>
<td>
panel goes here
</td>
</tr>
<tr>
<td>
div goes here
</td>
</tr>
</table>
I am doing a form POST that looks like
<form action="http://ServerName/fse5/main/FormPost.aspx" id="frmLogin" method="post" target="_blank">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<%= CompleteRequest %>
<input type="submit" name="__exclude__Submit" value="Run Illustration Software Online" runat="server" />
</table>
</form>
However, when I render this HTML the input tag looks like
<input onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(''); " name="ctl00$PlaceHolderMain$IllustrationSoftwareComponent$ctl00" type="submit" value="Run Illustration Software Online" />
How come ASP.net is adding onClick and name attribute? How do I stop this?
To stop it, don't make it a user control by adding runat="server"; it seems that you don't want it/need it.
I have a table of roles that has checkboxes with access or not. I need a help-button on the right most column that shows information for the role using JQuery Dialog. For some reason the dialog only shows every second time.
Below is the code I use:
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<%foreach (Role role in ViewData["Roles"] as List<Role>)
{ %>
<tr>
<td width="20%">
<%=role.RoleName %>
</td>
<td width="70%">
<%=Html.CheckBox(role.RoleName, Model.IsInRole(role.LoweredRoleName)) %>
</td>
<td width="10%">
<%if (!string.IsNullOrEmpty(role.Description))
{ %>
<%Html.RenderPartial("Help", new KeyValuePair<string, string>(role.RoleName, role.Description)); %>
<%} %>
</td>
</tr>
<%} %>
</table>
Help.aspx:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KeyValuePair<string, string>>" %>
<a href="#" onclick="$('#<%=Model.Key.Replace(" ", "") %>').dialog(); return false;">
<img border="0" src="../../Content/Images/help_icon.gif" alt="?"/>
</a>
<div id="<%=Model.Key.Replace(" ", "") %>" title="<%=Model.Key %>" style="display:none;">
<%=Model.Value %>
</div>
A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open')
http://docs.jquery.com/UI/Dialog#overview and
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
But I'd suggest to use something like http://plugins.learningjquery.com/cluetip/ instead. ClueTip has options to be opened via click and stay until closed, so you can choose between hover and click activation. It is also extremely easy to get content via AJAX, so you don't have to load page full of information that user may never click to see.