I'm in the process of converting an existing website to use MVC and Entity Framework.
The layout / styling is all supposed to stay the same, and in order to follow that guideline I need to submit my login form using an <a> tag, because it has a custom image for the button.
Here's my form:
#using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
<label>
<span>Username
</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password
</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
</div>
}
As you can see, the <a> tag formerly submitted login info using javascript. This is not what I'm looking to accomplish.
How can I change that tag to submit my form to my controller action?
I've made small changes
HTML
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
JSFiddle
Typically you do not want to put a lot of javascript inside html tags, but if this only occurs once in your solution it will be fine. If however, there are anchor tags all over that need to post using Gokan's solution would work better with a marker class and some javascript in a common place.
Change your anchor tag to look more like this:
Just need to change Single line, For Optimization I think this one is a best way.
#using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
// your HTML code
<div class="spacer">
</div>
}
Related
I tried this in my code but the required function doesn't seem to work in my web page :
<div>
<label for="Username">Username: </label>
<input type="text" name="username" required>
</div>
For the "required" attribute to work, the <input> must be be wrapped in <form> ... </form> tags.
If the input box is located within a <form> tag as intended, then required will work correctly in all modern browsers. Demo:
<form>
<div>
<label for="Username">Username: </label>
<input type="text" name="username" id="Username" required>
</div>
<input type="submit" value="click to test"/>
</form>
Also for= on a label requires the target element to have an id with matching text before it's effective. It doesn't interact with the name attribute. I've added an id in the demo.
I have a problem with my website and I don't get it why it doesn't work.
I have two separate domains with the same WordPress theme (http://takoplius.lt and http://takoplius.ru). The interesting thing when I load pages on Chrome browser .lt version contact form inputs are not working, but in .ru version, everything works just fine with contact form and I can type text in inputs. When I try to load the .lt page in Firefox, contact form works just fine there.
Here is my form code:
<form method="post" id="kontaktu_forma" onsubmit="send_email('<?=$lang;?>'); return false;">
<label><?=$vardas_pavarde;?>: </label>
<input class="input" type="text" name="vardas" />
<label><?=$imones_pavadinimas;?>: </label>
<input class="input" type="text" name="imone" />
<label><?=$adresas_aa;?>: </label>
<input class="input" type="text" name="adresas" />
<label><?=$telefono_nr;?>: </label>
<input class="input" type="text" name="phone" />
<label><?=$el_pastas;?>: </label>
<input class="input" type="text" name="email" />
<label><?=$dominancios_paslaugos;?>:</label>
<textarea class="input" rows="5" name="klausimas"></textarea>
<input type="button" class="button" value="<?=$siusti;?>" onclick="send_email('<?=$lang;?>'); return false;" style="margin-left: 15px;" />
</form>
It would be great if someone helps me with this issue.
Thanks!
you have to change this
jQuery(function($) {
$('body').disableTextSelect();
});
To
jQuery(function($) {
$('#main').disableTextSelect();
});
not only your input selection is disables but you cant select any text from that website
because your are disabling text selection from js, I found below code in your website, you remove this code and it will fix your problem
jQuery(function($) {
$('body').disableTextSelect();
});
just remove or comment out above code.
I would like to make this form below
<form enctype="application/x-www-form-urlencoded" action="http://cpanel.gateway245.com/auth" method="post">
<p class="element">
<label for="email">Email address</label>
<br/>
<input type="text" name="email" id="email" value="" placeholder="E-mail">
</p>
<p class="element">
<label for="password">Password</label>
<br/>
<input type="password" name="password" id="password" value="" placeholder="Password">
</p>
<input type="submit" name="submit" id="submit" value="Login">
</form>
So that when a link is clicked the form shows I have seen some websites with login forms like this is it possible to be done in html under div menu ui?
Showing/hiding content can't be done in HTML alone - you'll need JavaScript to handle the click event.
This is a rudimentary example to get you on the right track. Many, many, many more examples are on SO already.
CSS
#ttt { display: none; }
HTML
Click to show form
<form id="ttt"> ... </form>
JavaScript
function show(target){
document.getElementById(target).style.display = 'block';
}
So I have a form with two fields, one of these fields needs to have information in to successfully display the next page. How would I disable the submit button until that field has some text in it?
Here's the HTML Code;
<div id="content">
<form action="avatarquery.php" method="POST" id="login-form">
<fieldset>
<p>
<label for="login-username">Server Name:</label>
<input type="text" id="login-username" name="name" class="round full-width-input" autofocus />
</p>
<p>
<label for="login-password">Server IP:</label>
<input type="text" id="login-password" name="ip" class="round full-width-input" />
</p>
<input class="button round blue image-right ic-right-arrow" type="submit" id="register" />
</fieldset>
<br/><div class="information-box round">Please Note: Some servers may not work due to their Configs not having Query Enabled.</div>
</form>
If that has to be done using HTML, then in HTML5, you can use
<input type="text" required />
Otherwise in JavaScript, you can try setting an attribute to the input button.
Until the value is "", you can set the attribute
<input type="submit" disabled />
Is it possible by default make all the fileds in a div class as required fileds. I have a form and inside the form i have a div class.. why i am using the div class is by defalut the div class is hidden and when i clicked on some check box it will be visible. SO i need all the elements in the div class should be required filed. I was trying required="required" on all the elements but it is not working. Any one has idea?
Here is my html
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Any help will be appreciated
Syntax highlighting - probably the greatest tool at any coder's disposal. (It's even on Stack Overflow!)
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Attributes are red and their values are blue. So it should look more like this:
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name" /><br>
<label> age </label>
<input required="required" type="text" name="age" /><br>
</div>
</form>
and FYI the required attribute doesn't need a value:
<input type="text" name="age" required />
Change your code as follow:
<input type="text" name="name" required>
and
<input name="age" required>
Just writing "required" make your fields as required. It works only in HTML5. So put it before html tag starts.
if you want to use html5 you can do it with required(this only works on browsers that support html5), if not use a jquery plugin for validation like this:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/