I am using ASP.NET MVC2 application in C#. I have two HTML forms on my content page.
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<form id="form1">
<input id="text1" type="text" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id="text2" type="text" />
<input type="submit" value="submit" />
</form>
</asp:Content>
What I want to do is to set the focus to Text Box after post back. After "form1" is submitted, "text1" should have focus and similarly after "form2" is submitted, "text2" should have the focus so that the user doesn't have to use mouse to put the focus back in text box and continue typing.
The following code works fine for a single HTML form on the page.
<html>
<head>
<script>
void function setfocus() {
document.getElementById("text1").focus();
}
</script>
</head>
<body onload="setfocus();">
<form method="post" action="">
<input type="submit" value="submit">
<input id="text1" type="text">
</form>
</body>
</html>
*The problem is I have two HTML forms on the page. Another issue is my web forms are on the content page of asp.net master page which reside inside the and only master form has tag which has "onload" property.
A friend of mine suggested me to use Ajax's ScriptManager and UpdatePannel. However, the UpdatePannel doesn't like HTML's elements inside it. It seems only support asp.net control elements.
Very grateful for your guidance.
Try this
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<form id="form1">
<input id="text1" type="text" />
<input name="selectedTextBox" type="hidden" value="text1" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id="text2" type="text" />
<input name="selectedTextBox" type="hidden" value="text2" />
<input type="submit" value="submit" />
</form>
<script>
var textBoxID = "<%: Context.Request.Form["selectedTextBox"] %>";
void function setfocus() {
var textBox = document.getElementById(textBoxID);
if(textBox) textBox.focus();
}
</script>
Edit: Prefix Context to Request object
You could append a hash to the action attribute of the first form:
<form id="form1" action="#form1">
<input id="text1" type="text" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id="text2" type="text" />
<input type="submit" value="submit" />
</form>
and then test for the presence of this hash in the url:
function setfocus() {
if (document.location.hash.indexOf('#form1') > -1) {
// form1 was submitted => set focus to the second textbox
document.getElementById("text2").focus();
} else {
document.getElementById("text1").focus();
}
}
Related
I can code forms with one ControlGroup but I'm having trouble with multiple ControlGroups. According to the example code, NgControlGroup should be used inside <div> elements and NgForm should be used in the <form> element. So here's my markup:
<form ng-form="main" (ng-submit)="handleSubmit()">
<div ng-control-group="group1" >
<input ng-control="c1"><br /><br />
<input ng-control="c2"><br /><br />
</div>
<div ng-control-group="group2">
<input ng-control="c3"><br /><br />
<input ng-control="c4"><br /><br />
</div>
<input type="submit" value="Submit">
</form>
Here's the code for the component's constructor:
constructor() {
this.group1 = new ControlGroup({
"c1": new Control("first"),
"c2": new Control("second")});
this.group2 = new ControlGroup({
"c3": new Control("third"),
"c4": new Control("fourth")});
this.main = new ControlGroup({
"g1": this.group1, "g2": this.group2});
}
I don't get any errors when I launch the component, but the controls don't take their initial values ("first", "second", and so on). That means the HTML elements aren't being properly bound to the Controls. Any thoughts? Are there any good examples that use NgForm and NgControlGroup?
I figured out what was wrong. The NgModelForm directive should be used instead of NgModel. Also, the <input> elements should mention the proper names of the ControlGroups. Here's the result:
<form [ng-form-model]="main" (ng-submit)="handleSubmit()">
<div ng-control-group="g1" >
<input ng-control="c1"><br /><br />
<input ng-control="c2"><br /><br />
</div>
<div ng-control-group="g2">
<input ng-control="c3"><br /><br />
<input ng-control="c4"><br /><br />
</div>
<input type="submit" value="Submit">
</form>
I wish to display some fields of my form in foundation reveal along with the submit button.
Something like:
<form action="" method="POST">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div id="display_detail" class="reveal-modal" data-reveal>
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
But when the link "Submit" is clicked, I see that the reveal-data div is actually put outside the form. How can this be rectified?
To make sure the Reveal modal actually hovers above the page, and not within some relatively positioned element, it is necesary to move the html to the top level body element.
To deal with this I didn't try to hack into the Reveal plugin to stop this behaviour, instead I added an event listener to a new form that duplicated the entries:
<form action="" method="POST" id="baseform">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div>
<!-- preferably hide this block using JS -->
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
<div id="display_detail" class="reveal-modal" data-reveal>
<form data-linked-form="baseform">
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</form>
</div>
Then using coffeescript:
# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
form = e.currentTarget
input = e.target
document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)
# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
form = e.target
document.forms[form.dataset.linkedForm].submit
)
How can I navigate to a new page without triggering the jQuery mobile form handling, which creates a ajax request and then loads the page with it's speczial funcationallity (I don't know the name for it)
Add this attribute to the form:
data-ajax="false"
Example:
<form action="demo.php" method="post" id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
I am trying to develop my first component for Joomla. I have installed Joomla 3, and things are going pretty good.
I want to add a form validation (client side) on the frontend, where I have a submission form.
My code is:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
The validation works, but does not show any message error - just a field. The HTML for the error field is:
<div id="system-message-container">
<div id="system-message" class="alert alert-error">
<h4 class="alert-heading"></h4>
<div></div>
</div>
</div>
So, how do I add text to the validation? Do I need to create a language file for my component?
You need to change form submit button as input
Try this-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<input type="submit" name="submit" value="Submit" />
</form>
Update:-
You can try this also-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form name="adminForm" id="myForm" method="post" onsubmit="return submitbutton();">
<input id="email" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton() {
var f = document.adminForm;
if (document.formvalidator.isValid(f)) {
document.adminForm.submit();
return true;
}
else {
var msg = new Array();
msg.push('Invalid input, please verify again!');
if($('email').hasClass('invalid')){
msg.push('<?php echo JText::_('Invalid Email')?>');
}
alert (msg.join('\n'));
return false;
}
}
</script>
This will validate form at the client side but not in server side.
For more info check this - http://docs.joomla.org/Form_validation
also make sure you have added this code in the index.php
<jdoc:include type="message" />
I've just had this very problem. The issue is that you don't have a label associated with the form field, Joomla validation code builds the error message from the label text.
If you don't want the label to appear then set it to hidden (if you're using bootstrap use the hidden class). You must add a for clause to the label. If you also give it an id which is the set to the input id + '-lbl', then it will optimise the speed of the label lookup.
<form class="form-validate" id="myForm" method="post">
<label class="hidden" for="inputid" id="inputid-lbl">Form label</label>
<input id="inputid" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
Sorry for unclear title - I don't know how to describe that problem in one sentence. Code sample will make it clear.
First UP button do nothing when clicked. Rest works like it should!
Below my view:
<%# Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/Main.Master"
Inherits="System.Web.Mvc.ViewPage<GeekClick.ViewModels.HomeViewModel>" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<title>Beta</title>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainPageLinks" runat="server">
<h2>Najlepsze linki w sieci</h2>
<div id="HomePageLinks">
<%foreach (var link in Model.Links) { %>
<b><%:link.Description %></b><br />
<%: Html.ActionLink("details", "Index", "Link", new {id = link.LinkID}, null) %>
<% using (Html.BeginForm("UpVote", "Home", new { linkId = link.LinkID }, FormMethod.Post)) {%>
<input type="submit" value="UP" /> <% } %>
<%: link.Votes %>
<% using (Html.BeginForm("DownVote", "Home", new { linkId = link.LinkID }, FormMethod.Post)) {%>
<input type="submit" value="DOWN" /> <% } %>
<% } %>
</div>
</asp:Content>
Controller:
[HttpPost]
public RedirectToRouteResult UpVote(int linkId)
{
var updateLink = _geekDb.Link.Single(a => a.LinkID == linkId);
updateLink.Votes++;
_geekDb.SaveChanges();
return RedirectToAction("Index");
}
[HttpPost]
public RedirectToRouteResult DownVote(int linkId)
{
var updateLink = _geekDb.Link.Single(a => a.LinkID == linkId);
updateLink.Votes--;
_geekDb.SaveChanges();
return RedirectToAction("Index");
}
And finally generated html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Beta</title>
<title>
</title></head>
<body>
<form method="post" action="./" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1NDk5OTQxMTBkZLMRoMOmMkoaJsHIkFWLWjn7HFSzna1LBeMqvRiCxdDQ" />
</div>
<div id ="mainPage" >
<h2>title</h2>
<div id="HomePageLinks">
<b>Something </b><br />
details
<form action="/Home/UpVote?linkId=1" method="post">
<input type="submit" value="UP" /> </form>3
<form action="/Home/DownVote?linkId=1" method="post">
<input type="submit" value="DOWN" /> </form>
<b>Somedesc </b><br />
details
<form action="/Home/UpVote?linkId=2" method="post">
<input type="submit" value="UP" /> </form>10
<form action="/Home/DownVote?linkId=2" method="post">
<input type="submit" value="DOWN" /> </form>
</div>
</div>
</form>
</body>
</html>
There shouldn't be viewstate, should be?
I can't see there any problem in code. Someone can?
Looks like somewhere (perhaps in your Main.Master) you have a <form runat="server" /> that's messing things up.
It makes sense why your first button does not work - notice <form method="post" action="./"> at the top of your output - it's clashing with your other form and posting to the wrong action.