I have a from in facebox modal (http://defunkt.io/facebox/ ) which it has an IDand I have a problem calling the selector/ID of the form.
Here are the code
=== index.php ===
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
$(document).ready(function() {
$('a[rel*=facebox]').facebox({
loadingImage : 'loading.gif',
closeImage : 'closelabel.png'
});
$('#myform').submit(function(event) {
$.ajax({
type : 'POST',
url : 'process.php';
data : {'name' : $('input[name=name]').val(),'email' : $('input[name=email]').val()},
success:function() {
alert('success!');
},
});
event.preventDefault();
});
});
</head>
<body>
Show Form
</body>
</html>
==== showform.php ====
<form action="process.php" id="myform" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your Name" >
<input type="email" name="email" placeholder="Your Email" >
</form>
Any help on that is very appreciated!
Thanks
You're trying to call an ID located in another page you cant do that your script interact only with the DOM loaded into your page , you need to move your from into index.php , also it should be url:'process.php',, not url : 'process.php'; , one more thing , you have no submit botton , here is a working example
$('#myform').submit(function(event) {
console.log("form submited")
$.ajax({
type : 'POST',
url : 'process.php',
data : {'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val()
},
success:function() {
alert('success!');
},
});
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" id="myform" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your Name" >
<input type="email" name="email" placeholder="Your Email" >
<input type="submit" value="submit" />
</form>
Related
Please can some one point me in the right direction with this code.
When my form has been submitted a message is displayed however at the moment the Submit Button is still present.
I want to remove/hide the submit button once the form has been successfully submitted and the Success Message is being displayed.
I have looked around for answers on stack-overflow but so far everything I have tried has not worked.
Im sure I need to add something like this:
$('#sky-form button[type="submit"]').hide();
However I think maybe there is something already in the code that is stopping this from happening.
Here is my submit and message part of my form:
<button type="submit" button class="border-button">NEXT</button>
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</form>
And here is the ajax:
submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
}
});
},
Thanks so much to anyone that can help with this.
FULL CODE:
<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">
<fieldset>
<div class="row">
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="home_address" placeholder="Home Address">
<b class="tooltip tooltip-bottom-left">Enter your home address</b>
</label>
</div>
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="biz_address" placeholder="Biz Address">
<b class="tooltip tooltip-bottom-left">Enter your biz address</b>
</label>
</div>
</div><!-- END OF ROW DIV -->
</fieldset>
<!-- FORM ONE DATA -->
<input type="hidden" name="name"
value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email"
value="<?php echo $_POST['email']; ?>">
<!-- END OF FORM TWO DATA -->
<!-- FORM TWO DATA -->
<input type="hidden" name="mobile"
value="<?php echo $_POST['mobile']; ?>">
<input type="hidden" name="home"
value="<?php echo $_POST['home']; ?>">
<!-- END OF FORM TWO DATA -->
<div class="row">
<div class="col-md-4" align="left">
<button type="submit" button class="border-button">NEXT</button>
</div>
</div><!-- END OF ROW DIV -->
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</div>
</form>
</div>
<!-- START OF JS VALIDATION -->
<script type="text/javascript">
$(function()
{
$("#sky-form").validate(
{
rules:
{
home_address:
{
required: true
},
biz_address:
{
required: true
},
messages:
{
home_address:
{
required: 'Please enter your home address'
},
biz_address:
{
required: 'Please enter your business address'
},
},
// Ajax form submition
submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
}
});
},
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
<!-- END OF JS VALIDATION -->
JQuery Librarys:
`
<!-- fort forms -->
<script src="../form/jquery.min.js"></script>
<script src="../form/jquery-ui.min.js"></script>
<script src="../form/jquery.form.min.js"></script>
<script src="../form/jquery.validate.min.js"></script>
<!-- for page finctions -->
<!-- PROBLEM FILE = <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>-->
<script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="../js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.js"></script>
<script type="text/javascript" src="../js/plugins.js"></script>
<script type="text/javascript" src="../js/main.js"></script>`
I just tried this code and seems to be working.
If it did not work please check the error you are getting in console.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">
<fieldset>
<div class="row">
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="home_address" placeholder="Home Address">
<b class="tooltip tooltip-bottom-left">Enter your home address</b>
</label>
</div>
<div class="col-md-4" align="left">
<label class="input">
<input type="text" name="biz_address" placeholder="Biz Address">
<b class="tooltip tooltip-bottom-left">Enter your biz address</b>
</label>
</div>
</div><!-- END OF ROW DIV -->
</fieldset>
<!-- FORM ONE DATA -->
<input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
<!-- END OF FORM TWO DATA -->
<!-- FORM TWO DATA -->
<input type="hidden" name="mobile" value="<?php echo $_POST['mobile']; ?>">
<input type="hidden" name="home" value="<?php echo $_POST['home']; ?>">
<!-- END OF FORM TWO DATA -->
<div class="row">
<div class="col-md-4" align="left">
<button type="submit" button class="border-button">NEXT</button>
</div>
</div><!-- END OF ROW DIV -->
<div class="message">
<i class="fa fa-check"></i>
<p>Thanks for your order!<br>We'll contact you very soon.</p>
</div>
</form>
<!-- START OF JS VALIDATION -->
<script type="text/javascript">
$(function()
{
$("#sky-form").validate({
rules:
{
home_address:
{
required: true
},
biz_address:
{
required: true
}
},
messages:
{
home_address:
{
required: 'Please enter your home address'
},
biz_address:
{
required: 'Please enter your business address'
},
},
// Ajax form submition
submitHandler: function(form) {
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
$('#sky-form button[type="submit"]').hide();
}
});
},
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
<!-- END OF JS VALIDATION -->
I am trying to use jquery-validate plugin to validate a form inside a bootstrap-dialog. The "required" rule doesn't prevent me from submitting a form with an empty text field. However, "digits" rule works so that means validation is initialized properly. What am I missing here? Thanks.
Here's how I display the bootstrap-dialog and how I initialize validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>App Title</title>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap/3.0.3/bootstrap.min.css" />"></link>
<script src="<c:url value="/js/jquery/1.10.2/jquery-1.10.2.min.js" />"></script>
<script src="<c:url value="/js/jquery-ui/1.10.4/jquery-ui.min.js" />"></script>
<script src="<c:url value="/js/bootstrap/3.0.3/bootstrap.min.js" />"></script>
<script src="<c:url value="/js/bootstrap-dialog//bootstrap-dialog.min.js" />"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/style.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery-ui/1.10.4/jquery-ui.min.css" />"></link>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap-dialog/bootstrap-dialog.min.css" />"></link>
<script src="<c:url value="/js/jquery-validation/1.11.1/jquery.validate.min.js" />"></script>
<script type="text/javascript">
function wireValidationEvent($form)
{
$form.validate({
errorElement: 'span',
errorClass: 'help-block',
wrapper: "div",
rules: {
name: {
required: true
}
},
messages: {
name: {
required: "Please enter the name properly."
}
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
}
function showModalDialog(url)
{
var get = $.get(url, '');
get.done(function(data) {
// Note that data contains just a form without any button.
// The form is dynamically injected into the body of the modal dialog. That's why wireValidationEvent() is called each time when a form is injected.
// When Save button is clicked, the form will be submitted using jquery.
BootstrapDialog.show({
title: 'Update Form',
closable: true,
autodestroy: true,
onshow: function(dialogRef){
var $body = dialogRef.getModalBody();
$body.append(data.trim());
var $formObj = $body.find('#formOfReligion');
if ($formObj)
{
// TODO bug: required validation rule doesn't work here
wireValidationEvent($formObj);
}
else
{
alert('formOfReligion is missing');
}
},
buttons: [{
label: 'Save',
action: function(dialog) {
var formObj = $('#formOfReligion');
if (formObj && formObj.length > 0)
{
var form = formObj[0];
var post = $.post(form.action, formObj.serialize());
post.done(function( data ) {
// succeeded
dialog.close();
$('#frmQuery').submit();
});
post.fail(function( data ) {
// failed
});
}
}
}, {
label: 'Cancel',
action: function(dialog) {
dialog.close();
}
}]
});
});
return true;
}
</script>
Here's what the modal dialog looks like.
<div class="modal-backdrop fade in"></div>
<div id="bea044b7-a0cb-48df-8b57-6cbdedac9bdf" class="modal fade bootstrap-dialog type-primary size-normal in" tabindex="-1" style="display: block;" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="bootstrap-dialog-header">
<div class="bootstrap-dialog-title">Update Form</div>
<div class="bootstrap-dialog-close-button" style="display: block;">
<button class="close">×</button>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message"></div>
</div>
<form id="formOfReligion" class="form-horizontal" role="form" method="POST" action="/prs/protected/test" novalidate="novalidate">
<fieldset>
<div class="form-group">
<div>
<label class="control-label" for="name">Name</label>
</div>
<div>
<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="bootstrap-dialog-footer">
<div class="bootstrap-dialog-footer-buttons">
<button id="667d578f-490e-4d08-a8c1-1013b60c3394" class="btn btn-default">Save</button>
<button id="8b647389-edce-4f64-af8e-64521e865dcf" class="btn btn-default">Cancel</button>
</div>
</div>
<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
You have a hard-coded value of "test" on the input so the required rule is already satisfied without the user having to enter anything.
BTW: I don't think you have a good naming system here: id="id", name="id", id="name", and name="name". It's not semantic, not scalable, and potentially confusing.
I used django-tinymce in my project. The django-tinymce editor is appended on textarea field using "tinyMCE.execCommand('mceAddControl', false, id); " command but the problem is that it does't have image upload functionality from local machine. please suggest me which editor suits in my condition.
Use jquery-easyui-1.3.4 example is below
<form id="my_form" action="/quiz/upload/" method="post" enctype="multipart/form-data">
{%csrf_token%}
<input id="image" name="image" type="file" /> <input type="submit" value="upload" />
and my script
<script type="text/javascript">
$(function(){ $('#my_form').form({ success:function(data){
tinymce.activeEditor.selection.setContent("<img src='"+data+"' />"); } });
});
in a view im repating the same form and posting it via ajax, my concern is the ajax is working for 1st form but not working from second form, below is the code im using.
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
<script type="text/javascript">
$('.post_comment').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $('.comment_text').val()
};
$.ajax({
url: "<?php echo site_url('/comment'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
</script>
Your problem is post_text: $('.comment_text', this).val() which will give you the value of the first selected .comment, what you want is the .comment in the current form. Try
<script type="text/javascript">
$('.post_comment').click(function() {
var form_data = {
csrfsecurity: $("input[name=csrfsecurity]").val(),
post_text: $(this).closest('form').find('.comment_text').val()
};
$.ajax({
url: "<?php echo site_url('/comment'); ?>",
type: 'POST',
data: form_data,
success: function(response){
$(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
}
});
return false;
});
</script>
Also element ids should be unique.
I have the following page, and checking the request, I can't find the HTTP_X_REQUESTED_WITH header? I even tried various hacks such as adding the header manually (per another question here), but to no avail. Anyone have any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#form").bind("submit", function(e) {
e.preventDefault()
$.post("/members/login/", $("#form").serialize(),
function(data){
alert(data);
});
});
});
});
</script>
<form id="form" action="" method="post">
<ul>
<li><label for="id_email">Email:</label> <input type="text" name="email" value="" id="id_email" /></li>
<li><label for="id_password">Password:</label> <input type="password" name="password" id="id_password" /></li>
</ul>
<input type="hidden" name="next" value="" />
<input id="submit" type="submit" value="" />
</form>
This shouldn't matter, but I use django and check with request.is_ajax(). I verified that the header isn't in the request. This is deployed on localhost.
There seems to be a closing too much in your code, try this:
<script type="text/javascript">
$(function() {
$("#form").on("submit", function(e) {
e.preventDefault()
$.post("/members/login/", $("#form").serialize(), function(data){
console.log(data);
});
});
});
</script>