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.
Related
In a frontend new custom post creation form, I'm trying to replace a normal input type file with dropzone, but it doesn't upload the images to the server.
I have created a new div for dropping the files, and I have wrapped the previous input as a fallback inside my form:
<form id="new_post" name="new_post" method="post" action="#" class="dropzone" enctype="multipart/form-data">
<!-- other form fields here -->
<div class="dropzone-previews"></div>
<div class="fallback">
<input type="file" name="file[]" multiple="multiple" />
</div>
<input type="hidden" id="new_cpt_action" name="new_cpt_action" value="new_cpt" />
<input type="submit" value="submit" id="submit" name="submit" />
</form>
To make dropzone work with the code above, I have the following options in my script:
$(document).ready(function () {
Dropzone.autoDiscover = false;
$("#new_post").dropzone({
uploadMultiple: true,
addRemoveLinks: true,
previewsContainer: ".dropzone-previews",
});
});
When I click the submit button, the creation of the new post is triggered and everything works as expected, but the images are not uploaded and attached. The input type="file" works perfectly, but dropzone doesn't.
If the server is able to handle the files with a normal input, does anyone know I am missing on the dropzone option?
Many thanks!
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.
I'm just learning javascript and php. I created a contact form and I'd like the submit button to accomplish two things when I press it:
submit the data to me (this part is working)
read my onclick function (this part is not working)
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">
<?php
if ($_POST['submit']) {
////?????
}
?>
I'm sending the data to my email, and so I get that. But the onclick function doesn't seem to work. I tried reviewing add onclick function for submit button but it didn't help.
I need to see your submit button html tag for better help. I am not familiar with php and how it handles the postback, but I guess depending on what you want to do, you have three options:
Getting the handling onclick button on the client-side: In this case you only need to call a javascript function.
function foo() {
alert("Submit button clicked!");
return true;
}
<input type="submit" value="submit" onclick="return foo();" />
If you want to handle the click on the server-side, you should first make sure that the form tag method attribute is set to post:
<form method="post">
You can use onsubmit event from form itself to bind your function to it.
<form name="frm1" method="post" onsubmit="return greeting()">
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
html:
<form method="post" name="form1" id="form1">
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>
Javascript:
to submit the form using javascript
function eatFood() {
document.getElementById('form1').submit();
}
to show onclick message
function eatFood() {
alert('Form has been submitted');
}
if you need to do something before submitting data, you could use form's onsubmit.
<form method=post onsubmit="return doSomething()">
<input type=text name=text1>
<input type=submit>
</form>
I have this code:
<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {
document.getElementById("boton").style.display = 'none';
document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";
return true;
}
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio" /></td>
</tr>
</table>
<div id="boton">
<input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>
Create a hidden button with id="hiddenBtn" and type="submit" that do the submit
Change current button to type="button"
set onclick of the current button call a function look like below:
function foo() {
// do something before submit
...
// trigger click event of the hidden button
$('#hinddenBtn').trigger("click");
}
<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>
if you want to open a page on the click of a button in HTML without any scripting language then you can use above code.
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>