I ran into a really odd bug today while writing a simple login form and formatting via Semantic UI.
Here's the template:
<div class="ui form attached fluid segment">
<form name="loginForm">
<div class="field">
<label>Email</label>
<input type="email" name="loginEmail" placeholder="bruce.li#shaolin.com">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="loginPassword" placeholder="Shh...">
</div>
<input type="submit" class="ui blue submit button" value="Login">
</form>
</div>
Here's the event handler:
Template.login.events({
"submit form": function( event, template ) {
event.preventDefault();
var userEmail = event.target.loginEmail.value;
var userPassword = event.target.loginPassword.value;
Meteor.loginWithPassword( userEmail, userPassword );
event.target.reset();
FlowRouter.go( "newsfeed-view" );
}
});
All this works perfectly fine until you start changing/removing the button. If i were to change to or remove the button, then the submit event will not work. However, other events such as click do work with or without the button.
Related
I am trying to add a class to my div if there is an error in the ModelState. Is there any way to achieve this?
This is how the Html looks like:
<div class="form-group">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Now I would like to add the class has-danger to the div arround it if an error occured on the Vorname property. Like this:
<div class="form-group has-danger">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Edit:
If your form is submitted to the server with no prior on-the-client JavaScript validation (old school! but it works), then you’ve got yourself the easiest of all fixed. You can just add these CSS classes whenever the page loads in the following fashion:
$(document).ready(function() {
$('.input-validation-error').parents('.form-group').addClass('has-danger');
});
I'm trying to place an event tracking code, and for the life of me it will not work. I've done it on other sites and it works without any problems. Not sure if it's because the button code is different. Below is the button code and I've bolded where I placed the event tracking code. Please tell me where I've gone wrong!
<div id="optin">
<form action="http://iuzeit.us7.list-manage1.com/subscribe/post?u=89560f169a7c1aa335b0885ff&id=16962f2a89" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<p>iuzeit will be ready for beta testing soon. Leave us your email address and we'll give you exclusive access!</p>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear" style="padding-top:10px;">
<center>
<input type="submit" value="Subscribe" **onClick="_gaq.push(['_trackEvent', 'Register for Beta', 'Subscribe', 'Register on Blog Sidebar']);"** name="subscribe" id="mc-embedded-subscribe" class="button">
</center>
</div>
I would use an onsubmit on the form tag, instead of onclick on the input tag. The reason being is that event will only fire if the form is submitted and not every time the button is clicked.
Your form tag would look like this:
<form action="http://iuzeit.us7.list-manage1.com/subscribe/post?u=89560f169a7c1aa335b0885ff&id=16962f2a89" method="post" onsubmit="_gaq.push(['_trackEvent', 'Register for Beta', 'Subscribe', 'Register on Blog Sidebar']);" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
I am just getting started messing around with Meteor and can't get the following code for a simple Collection.insert to update the database when the event is triggered. I can even see the page update with the value of the text field for a split-second before disappearing (presumably once Meteor realized the value wasn't written to the server). Inserting via the console works just fine... Is there some basic concept that I am overlooking?
file.js
var Tasks = new Meteor.Collection("Tasks");
if (Meteor.isClient) {
Template.main.task = function() {
return Tasks.find({});
};
Template.main.events = {
'click #submit' : function(event) {
var task = document.getElementById("text").value;
Tasks.insert({title: task});
}
};
}
file.html
<body>
{{> main}}
</body>
<template name="main">
<form class="form-inline">
<input type="text" id="text" class="input-small" />
<input type="Submit" class="btn" id="submit" value="Submit"/>
</form>
{{#each task}}
<span id="output">{{title}}</span>
{{/each}}
</template>
Your submit button issues a page reload before your javascript is executed canceling your request to the server.
Try using 'mousedown' instead of 'click' or (much better) prevent the button from doing a page reload.
Try using this snippet, it disables the submit for the button so only your javascript is executed.
<body>
{{> main}}
</body>
<template name="main">
<form class="form-inline">
<input type="text" id="text" class="input-small" />
<button type="button" class="btn" id="submit">Submit</button>
</form>
{{#each task}}
<span id="output">{{title}}</span>
{{/each}}
</template>
I changed your second <input>-tag to button and set it's type attribute to 'button' to make the button do nothing.
please see this html codes :
<!-- PAGE - 5 -->
<div class="section cc_content_5" id="page5" style="display: none;">
<div class="pad_content">
<div class="right grid_1">
<h1>
Contact Address
</h1>
<img src="Images/photo_5.jpg" alt=""><br />
<br />
<strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
Glasgow, D04 89GR.<br />
Telephone: +1 800 123 1234<br />
Fax: +1 800 123 1234<br />
E-mail: www.copanyname.com<br />
</div>
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
E-Mail:</label><input class="textbox" name="email" value="" type="text">
<label>
Subject:</label><input class="textbox" name="subject" value="" type="text">
<label>
Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
<label>
Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
height: 32px;">
<div class=" clear">
</div>
<label>
</label><input class="textbox" name="capthca" value="" type="text">
<div class=" clear">
</div>
<label>
</label><input class="pin" name="submit" value="Submit" type="submit">
</form>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
and their script :
<script type="text/javascript">
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
i really want to know how can i put page 5 in my asp.net web form?
as you we can not have a form inside default asp.net web page form.
so what can i do about page 5?
thanks in advance
You can not have two forms inside an asp.net page and both work on code behind.
The alternative that you have.
Place the second form before or after the asp.net form
Do not set second form, just read the input data that you interesting on code behind.
Dynamically create the form at the end of the page using the javascript and post it.
Because here I see that you post to php and I think that you like to keep the old code with asp.net, add them after the closing form of the asp.net form.
<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
...
</form>
More Extreme
Because you all ready use javascript you can do this trick. Copy and paste all the content in a form at the end of the page and post it.
<form id="AspForm" runat="server">
...
<div id="ajax-contact-infos" >
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
<input class="pin" name="submit" value="Submit"
type="button" onclick="SubmitThisForm();return false;" >
...
</div>
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
<div id="PlaceOnMe" ></div>
</form>
and on javascript copy it just before post it as
<script type="text/javascript">
function SubmitThisForm()
{
// here I copy (doublicate) the content of the data that I like to post
// in the form at the end of the page and outside the asp.net
jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
// Now we submit it as its your old code, with out change anything
jQuery("#ajax-contact-form").submit();
}
// here is the old code.
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
All this is with the minimum changes. You can how ever make optimization, but this is the general idea.
You have a number of options; nesting the forms is the worst as it's something that will/wont work depending on the browser.
You can as #Aristos has mentioned, have one form after the other. This is a good solution but is not necessarily the best in terms of your site design.
The second is that you could embed your contact form on a normal HTML page, then include it on your parent page in an iframe or similar. This would get around the issues of nested forms, but might not give you the behaviour you want in terms of user experience.
The third is that your contact form would be better suited to being a User Control
You would put all of your contact form fields into the ascx file, and handle the button click for the submit in this control. After processing this submit, you can replace the user control with a simple message thanking the user for their input.
You can also put all of the required form validation in this. Your ASCX might look something like:
<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<label for="<%=InputContactName.ClientID%>">Name:</label>
<asp:TextBox runat="server" id="InputContactName" value="" />
<!-- Rest of Form goes here -->
<div class=" clear">
</div>
<asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
<label> </label><input class="pin" name="submit" value="Submit" type="submit">
<div class="clear"></div>
</div>
</div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
<p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>
In your ContactFormSubmit_Click button you can just grab the text from your contact form, hide the ContactPanel, and show the ThanksPanel.
Really simple, and encapsulated away in a user control.
Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>