I have a bootstrap popover form which has couple of input text fields and a submit button. The popover is displayed fine with the input text fields but when clicking the submit button the default action is not prevented at all. I have also tried to log in the form submit, but does not log anything at all. I think the reason has to do with popovers and how they are implemented in the first place.
Create
<div id="popover-head" class="hide"><h4>Create</h4></div>
<div id="popover-content" class="hide">
<form method="post">
<p><input type="text" id="name" name="name"></p>
<p><input type="text" id="tel" name="tel"></p>
<input type="submit" id="submit">
</form>
</div>
JQ:
$('#popover').popover({
html: true,
placement: 'right',
title: function () {
return $("#popover-head").html();
},
content: function () {
return $("#popover-content").html();
}
});
$('form').submit(function(){
alert('form submitted');
return false;
});
Anyone with a much clear idea can be of help. Thanks.
The reason is, that your .popover-content is actually cloned and injected into the DOM inside a <div>, the .popover itself. So your submit() is never binded to the form shown inside the popover, since it is added later. If you bind the event to document as a delegated event handler, then it will work with the form shown inside .popover too :
$(document).on('submit','form',function(){
alert('form submitted');
//prevent -> return false
return false;
});
demo -> http://jsfiddle.net/r1q6qjpo/
Note: .hide is deprecated :
.hide is available, but it does not always affect screen readers and
is deprecated as of v3.0.1. Use .hidden or .sr-only instead.
Related
I have php code that echos a form that was inserted into my html by another jquery code. This all works fine. I am trying to submit this form with ajax.
echo '<form id="comment_form" action="commentvalidation.php?PhotoID='.$_GET['PhotoID'].'" method="POST">';
echo '<label>Comment: </label>';
echo '<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>';
echo '<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >';
echo '</form>';
The form works fine when submitted traditionally. The problem is I cant get it to be be submitted with ajax. The .submit just wont prevent the default action.
<script>
$(function(){
$('#comment_form').submit(function() {
alert("we are in");
$.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
$('#comment_form').html("<div id='message'></div>");
});
//Important. Stop the normal POST
return false;
});
});
</script>
You're probably binding the submit event handler before the form is in your page. Use event delegation instead of direct binding, for example
$(document.body).on('submit', '#comment_form', function(e) {
e.preventDefault();
alert('We are in');
// and the rest, no need for return false
});
As an addendum, try not to echo out great chunks of HTML from PHP. It's much more readable and you're less likely to run into problems with quotes and concatenation if you just switch to the PHP context when required, eg
// break out of the PHP context
?>
<form id="comment_form" action="commentvalidation.php?PhotoID=<?= htmlspecialchars($_GET['PhotoID']) ?>" method="POST">
<label>Comment: </label>
<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>
<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >
</form>
<?php
// and back to PHP
The problem seems to be from the fact that form that was inserted into my html by another jquery code. From what I understood from this, the form was dynamically created after the page was loaded.
In that case when the submit handler registration code was executed the element was not existing in the dom structure - means the handler was never registered to the form.
Try using a delegated event handler to solve this
$(function(){
$(document).on('submit', '#comment_form', function() {
alert("we are in");
$.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
$('#comment_form').html("<div id='message'></div>");
});
//Important. Stop the normal POST
return false;
});
});
Demo: Problem
Demo: Solution
I'm having great issues making this contact form that can be seen on the below visual. What I want the contact form to do is display on submit a thank you message or a message of confirmation instead of redirecting to the contact.php file where there isn't any styles you can see this in action on the provided link.
I've found some information that I can do this with Jquery Ajax that I've also tried displayed below, but I still can't seem to get it to work on submit to show a message in the pop up.
Does anyone know an easier way to do this or maybe point me in the right direction as this is something that I've been trying to fix for god knows how long.
Thank you for any help
Visual:
http://madaxedesign.co.uk/dev/index.html
PHP & HTML:
<?php
$your_email = "maxlynn#madaxedesign.co.uk";
$subject = "Email From Madaxe";
$empty_fields_message = "<p>Please go back and complete all the fields in the form.</p>";
$thankyou_message = "<p>Thank you. Your message has been sent. We Will reply as soon as possible.</p>";
$name = stripslashes($_POST['txtName']);
$email = stripslashes($_POST['txtEmail']);
$message = stripslashes($_POST['txtMessage']);
if (!isset($_POST['txtName'])) {
?>
<form id="submit_message" class="hide_900" method="post" action="/contact.php" onsubmit="javascript: doSubmit();">
<div id="NameEmail">
<div>
<label for="txtName">Name*</label>
<input type="text" title="Enter your name" name="txtName" />
</div>
<div>
<label for="txtEmail">Email*</label>
<input type="text" title="Enter your email address" name="txtEmail" />
</div>
</div>
<div id="MessageSubmit">
<div>
<textarea maxlength="1200" title="Enter your message" name="txtMessage"></textarea>
<label for="txtMessage">Message</label>
</div>
<div class="submit">
<input type="submit" value="Submit" /></label>
</div>
</div>
</form>
Jquery:
function doSubmit(){
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
You can add return false; at the end of your doSubmit function or the following code to prevent the form to redirect the user to the action page.
var doSubmit = function (event) {
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
event.preventDefault();
}
$(function () {
$('#submit_message').submit(doSubmit);
});
Modified HTLM
<form id="submit_message">
...
</form>
What is this code doing ?
First, we are defining a function to submit the form data.
Notice the event argument in the function. The first variable in this function is all the form values serialized in a ajax-complient request string. The .ajax() function is sending all the datas to your server. Note that as you did not set the type argument in the .ajax() function, the data are going to be send using the GET HTTP method.
Finally, event.preventDefault() prevents the submit event to be triggered in the browser. When the browser detect a submit event, it will try to submit the form based on the action and the method parameters in the <form> html tag. Usually, this submission performs an user redirection to the action page. This event.preventDefault() will disable this redirection. Note that the event argument is going to be set automatically by jQuery.
Last part, the $(function() { ... }); part means "execute this part when the document is fully loaded." It ensures that the element with sumbit_message id exists before calling the .submit() method. This last method is an event binder. It means that when the submit event is fired on the submit_message form, the function doSubmit will be called.
I hope you have a better understanding of this script. This is a pretty basic one, but if you understand clearly the mechanics, it will help you do become a better jQuery programmer. :)
Fiddle Demo
1.<form onsubmit='confirm()'>
function confirm()
{
alert("Thank You");
}
2.in contact.php call the page that is displayed again
You need to prevent the default event of the form. To do this, add the e.preventDefault(); function to the top of your function in order to prevent this event from firing.
Also notice that we are passing the e parameter to your function. This represents the event that has been fired.
function doSubmit(e){
e.preventDefault();
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
}
Try this
change your form with
<form id="submit_message" class="hide_900" method="post">
and in script put it
$("#submit_message").submit(function(e){
e.preventDefault();
//call your ajax
});
I have a form
<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform">
......
<input type="submit" value="Add Purchase" />
</form></div>
After user submits the form..he is first made to confirm the enteries:
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
where the confirm div is:
<div id='confirmdiv'>
data to be confirmed....
<input type="button" value="Confirm" id = "confirmform"/>
<input type="button" value="Cancel" id = "cancelform"/>
</div>
I am trying to submit the form once user clicks on confirm button
$('#confirmform').click(function(){
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
But the form is not submitting...anyone knows what am i doing wrong here??
its because when you call the $('#purchaseform').submit(); it will again read your first statement which is
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
try using a hidden input to indicate if the datas are confirmed or not. In your form put a hidden textfield
<div id='formdiv'>
<form action='purchase.php' method="POST" id="purchaseform">
<input type="submit" value="Add Purchase" />
<input type="hidden" name="isconfirm" id="isconfirm" value="0" />
</form></div>
then in your other statement put a condition before you call return false and the other functions
$('#purchaseform').submit(function(){
var confirm = $("#isconfirm").val();
if(confirm == 0) {
$('#formdiv').hide();
$('#confirmdiv').show();
return false; }
});
then change this as well
$('#confirmform').click(function(){
$("#isconfirm").val(1); //change the value to 1
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
It's pretty logical that it's not submitting. After all, whenever it tries to submit, it will instead go to your submit event handler, which always returns false. You have to make sure that if the submit comes from your script instead of from the button in the form, it does submit. One way to do that is like this:
var confirmed = false;
$('#purchaseform').submit(function(){
if (!confirmed)
{
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
}
else
{
confirmed = false;
return true;
}
});
$('#confirmform').click(function(){
confirmed = true;
$('#purchaseform').submit();
$('#formdiv').show();
$('#confirmdiv').hide();
});
This can easily be edited to suit your needs. Another way to do this would be to instead bind the original event to the submit button instead of the actual submit event, but if you do that, you might get into trouble later on if you have a text field in the form and the user presses enter while it's selected. This would then directly submit without confirmation, whereas in the above solution it will neatly ask for a confirmation.
you want to have a confirm dialog, first i think that is better to use the jquery ui dialog plugin http://jqueryui.com/dialog/#modal-confirmation
Here is the code to use :
1- add "display:none" to your confirm dialog
<div id='confirmdiv' style="display:none">
data to be confirmed....
</div>
delete confirm event
$('#confirmform').click ....
2- init your dialog
$( "#confirmdiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$('#purchaseform').submit();
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
3- Test your code
4- thats all folks
You are overriding what happens when the form gets submitted in
$('#purchaseform').submit(function(){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
});
Instead, how about you use
$('#purchaseform').find(":submit").click(function(e){
$('#formdiv').hide();
$('#confirmdiv').show();
return false;
}
Or, of course, you can set an ID on the submit button and use that.
That's because your $('#confirmform').submit() function invoke the 1st submit function again.
I have a form using the form jQuery plug in to handel the posting of the data. In the example i am working with the data is psoted to another php file which reades a database and echos back a result which is displayed below the from.
The code works very well with one glitch. If you hit the enter button while the text filed is selected everything cleared including the result that has been written to the screen. Is it possible to disable to enter key and prevent it from doing this?
FORM:
<html>
<head>
</head>
<p>enter code here
<form name="form" action="" method="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name"/>
<input type="button" value="get" onclick="get();"/>
</form>
<div id="age"></div>
</p>
</body>
</html>
SCRIPT:
function get() {
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
}
Cheers.
You should consider using the jQuery Forms Plugin. It will save you from doing some of the dirty work, additionally it will intercept all ways of submitting the form - so instead of having to disable the RETURN key it will submit your form via AJAX.
If you don't want that, get rid of the button with the onclick event and replace it with a submit button and register your function as a onsubmit handöer:
$('form[name=form]').submit(function(e) {
e.preventDefault();
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
});
$(document).ready(function(){
$('form').submit(function(){
return false;
});
});
This will prevent the form from submitting, however the form will not work at all for users with javascript disabled.
A found some tuts and solved the issue.
I just put this in before my Jquery code to disable the enter button.
$(function () {
$('input').keypress(function (e) {
var code = null;
code = (e.keyCode ? e.keyCode : e.which);
return (code == 13) ? false : true;
});
});
Is there a way to hide a form from my users until they click a link and then the form drops down for the user to fill out, by using PHP or JQuery if so how? Is there a tutorial that will teach me how to do this?
Yes, you can do so, you hide the form initially either with jquery or css and the slideDown it down like this:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideDown('slow');
// prevent default action
return false;
});
});
and to hide it back, you can use the slideUp function:
$(function(){
$('a#link_id_2').click(function(){
$('form-selector').slideUp('slow');
// prevent default action
return false;
});
});
If you want to show and hide using same link, use the slideToggle instead:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideToggle('slow');
// prevent default action
return false;
});
});
Here is the prototype for your html:
<a id="form_show_hide">Show/Hide Form</a>
<div id="form_container">
<form>
...form elements...
</form>
</div>
and jquery for that:
$(function(){
$('a#form_show_hide').click(function(){
$('#form_container').slideToggle('slow');
// prevent default action
return false;
});
});
and finally here the demo for that
try adjusting the display property of the form using hide and show:
jQuery:
$('#formId').hide();
Yes, there are a number of ways to implement something like this. An Ultra Basic implementation:
<form action="" method="post" id="login_form" style="display: none;">
<label for="username">Username</label> <input type="text" name="username" /><br />
<label for="password">Password</label> <input type="password" name="password" />
</form>
Show Form
You could use any number of jquery plugins and methods for showing the form, including show()/hide(), fadeIn()/fadeOut(), slideUp(), slideDown() (as above) etc. You could use something like FancyBox (or Facybox) to display the form in a 'popup' type window.
Note - For compatibility, I'd suggest not using jquery in the onclick event.
Simple:
http://docs.jquery.com/Show
With effects:
http://jqueryui.com/demos/show/
You can do this with jQuery. You need a click target, then an event bound to the click target and a container for the form. Something like:
<span id="ClickTarget">Click Me!</span>
<div id="FormContainer"> <!-- fill in the form here --> </div>
<script type=text/javascript language=javascript>
$('#ClickTarget').click(function () {
$('#FormContainer').show();
});
</script>