I am posting multiple forms in one submit for a 'Refer a Friend' page. There is initially just 2 forms, one for the referrer and one for a referral. Users can 'add' more referral forms by clicking a plus sign which clone()s the referral form and append it to the container.
<div class="form-wrap">
<form id="referrer-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post" >
inputs...
</form>
<form id="first-ref" class="referral-form" role="form" action="<?=$_SERVER['REQUEST_URI'];?>" method="post">
inputs...
</form>
</div>
<div class="buttons">
<a id="plus" class="btn btn-primary" href=""></a>
<a id="minus" class="btn btn-danger" href=""></a>
<button id="submit" class="btn btn-warning btn-lg form-control">SUBMIT</button>
</div>
With my current jQuery, the 2 forms that are loaded with the page markup post just fine. However, the ones that have been clone()d are not posting. All the attributes appear the same.
// AJAX post on each form
var form = $('form');
$("#submit").click(function () {
$('#referrer', '#referrer-form').val('what is posted to leadsource field');
$(form).each(function () {
if ($(this).attr("id") != "referrer-form") {
$('#referrer', this).val('Referred by: ' + $('#referrer-form #name').val());
}
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
});
});
alert("form submitted");
$('form input').val('');
});
$("#plus").click(function () {
$("#first-ref").clone().appendTo(".form-wrap");
$(".referral-form").last().attr('id', '');
$(".referral-form").last().find('input').val('');
load_phoneMask_js();
});
$("#minus").click(function () {
$(".referral-form").last().remove();
});
</script>
jQuery's clone() has an argument in the form of .clone( [withDataAndEvents ] ), meaning if you want to keep data and events, you pass true
$("#first-ref").clone(true).appendTo(".form-wrap");
And make sure you get those forms inside the event handler
$("#submit").click(function () {
var form = $('form');
... etc
Related
I have an environment where I have two forms on one page. One of them is loaded via an AJAX request and the other one exists on page load.
Now, both of them have a dropzone. Note that the IDs of the forms and dropzones are different so there is no ID conflict.
I am using Laravel 5.4 if that matters.
test.blade.php
<form id="show-edit-form" name="show-edit-form" class="form-horizontal" role="form" method="post"
enctype="multipart/form-data" action="{{url('editLocation')}}">
{{csrf_field()}}
<input type="hidden" id="location_id" name="location_id" value="{{$location->id}}">
<div class="form-group">
<div class="col-xs-12">
<div class="dropzone" id="editfiles"></div>
</div>
</div>
<div class="clearfix form-actions">
<div class="col-md-3 col-md-9">
<button class="btn btn-success btn-edit-submit" type="submit" id="edit-submit-all">
<i class="ace-icon fa fa-save fa-fw bigger-110"></i> Save changes
</button>
</div>
</div>
</form>
<div class="form-test">
</div>
javascript
jQuery(function ($) {
Dropzone.options.editfiles = {
url: 'laravel route',
...
};
$(document).on('click', '.btn-test', function () {
$.ajax({
url: "my url",
success: function(data) {
$('.form-test').html(data); // Form returned here
Dropzone.options.files = {
url: 'another laravel route',
...
};
}
});
)};
)};
The problem is that, the other dropzone which is created after an AJAX request is not rendered even though I have specified it.
Some help would be appreciated. Thanks.
So, what I did is changed the way I initialize dropzones.
Instead of this:
Dropzone.options.editfiles = {
url: 'laravel route',
...
};
I used:
var first = new Dropzone("#editfiles", {
url: 'laravel route',
...
};
And I used Dropzone.autoDiscover = false; as the first line in the jQuery function.
This seems to work.
I want to add css to a class when my form is submitted because it take long time, but nothing change! here is my form
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
the div I want to change :
<div id="circlecontainer"></div>
and my script :
$('form.std').submit(function(e){
$( "#circlecontainer" ).removeClass('whatever').addClass('whatever');
});
I want the button to be disabled too when the submit goes on?
Try this.
<form id="myForm" method="post" class="std" enctype="multipart/form-data">
<button type="submit" id="submitBtn" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
$('#myForm').submit(function(e){
$("#circlecontainer").addClass('whatever');
$("#submitBtn").prop('disabled', true).html('Please Wait...');
});
Reason 1. you will need e.preventDefault(), otherwise submit the form will refresh the whole page
Reason 2. Since reason 1, You will need to use ajax to post the form data instead of using default form event, please refer to this question for how to set it up in your submit function jQuery AJAX submit form
<script type="text/javascript">
$( "#circlecontainer" ).removeClass('whatever')
var frm = $('.std');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: //'your post url',
data: frm.serialize(),
success: function (data) {
$("#circlecontainer").addClass('whatever');
}
});
ev.preventDefault();
});
</script>
Simple add a listener to your button and change the class attribute
var divClassChanger=function()
{
var div=document.getElementByID("circlecontainer");
div.setAttribute("class", "someotherclass");
document.getElementById("yourBtnId").disabled = true;
};
document.getElementById("yourBtnId").addEventListener("click",divClassChanger);
you only need a id in you button
You really need to consider using Ajax request as this will definitely solve your problem. As you have it
<form method="post" class="std" enctype="multipart/form-data">
<button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
<span>Garder<i class="icon-chevron-right right"></i></span>
</button>
</form>
AJAX Request Script
$('form').on("submit", function(e) {
e.preventDefault();
var $form = $(this), url = $form.attr('action');//url could be your PHP script
var posting = $.post(url, {$('yourinputs').val()});
posting.done(function(data){
$('.circlecontainer').removeClass('yourclass');
});
});
This should work.
In my page there are several DIVs, which are supposed to show different news items depending on the user selection and a press of a submit button.
Am I able to refresh only a single DIV when the relevant submit button is clicked?
I tried <input type ="button"> instead of <input type="submit"> but that didn't work as expected. My code is below:
<div class="dloader"></div>
<div class="search">
<form action="" method="post">
Furniture:
<input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<?php
if( isset($_POST['submit']) ){
$postItemHeader = htmlentities($_POST['val1']);
}?>
<script>
$(window).load(function() {
$(".dloader").fadeOut("slow");
})
</script>
Take One Button For Post Event
<input type="submit" id="add" name="add" />
If You want to pass the Text Data, so a text value from the Text to fetch the particular data
<div id="result">Result should appear here</div>
Use Javascript To POst The Text Data To Back End
$(document.ready(function() {
$("#add").click(function(e) {
e.preventDefault();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#add').val,
success: function(data, status) {
$("#result").html(data)
}
});
});
});
What you need is AJAX. (read the documentation). A simple example is here.
The HTML
<div id="target_div"></div> <!-- Here is where you gonna place your new content -->
<input type='button' id='trigger' onClick="get_new_data()" value="Get new Content"> <!-- When this button is pressed get new content -->
The Javascript
function get_new_data()
{
$.ajax(
{
type: POST,
url: "you-url-here.php",
dataType:"HTML", // May be HTML or JSON as your wish
success: function(data)
{
$('div#target_div').html(data) // The server's response is now placed inside your target div
},
error: function()
{
alert("Failed to get data.");
}
}); // Ajax close
return false; // So the button click does not refresh the page
} // Function end
I have a model object from twitter bootstrap which is as follows
<!-- Name Edit div -->
<div id="form-content" class="modal hide fade in" tabindex="-1">
<form name="form" action="<c:url value="/editname" />" method="post">
<div class="modal-header">
<h4>Edit Name</h4>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls">
<ul class="nav nav-list">
<li class="nav-header">First Name</li>
<li><input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline"></li>
<li class="nav-header">Last Name</li>
<li><input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline"></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button id="submit" class="btn btn-success">Update</button>
<button class="btn" data-dismiss="modal" >Close</button>
</div>
</form>
</div>
and my ajax script is like follows:
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
var $form = $(this).closest("form").attr('id');
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(msg){
$("#thanks").html(msg);
$("#form-content").modal('hide');
},
error: function(){
//alert("failure");
}
});
});
});
But the request is not firing. I checked in firebug and it looks like it's not able to get the form object and the request is not going to the controller. How can i make it work. I will have multiple forms in the same page in future.
I would suggest you use the .submit() function:
$(function() {
$('#form_id').submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(msg){
$("#thanks").html(msg);
$("#form-content").modal('hide');
},
error: function(){
//alert("failure");
}
});
});
});
Set the form id to something and change the javascript to match
You can also add a data-ajax="true"to all the forms you want to submit bia ajax and then use:
var forms = $('form[data-ajax="true"]');
forms.submit(function(e){
e.preventDefault();
// do ajax
});
<form name="form" action="<c:url value="/editname" />" method="post">
One thing is that you did not given a id for form.
var $form = $(this).closest("form").attr('id');
And if the id exist(if u adding it through code), then above $form will contain the id of the form. That is a string.
So use like this,
var $form = $(this).closest("form");
instead
var $form = $(this).closest("form").attr('id');
All HTML form input controls (input, select, button, etc) has a reference to their owner. This makes it possible to do:
var $form = $(this.form);
But I think oleron´s answer with using submit event is the correct way to do it.
Your form doesn't have an id attribute. Give it one and it might work.
so
var $form = $(this).closest("form").attr('id');
will not return a value.
Hello I want to have list of files in directory and a form below each of them that allows my users to name them.
That's all clear - I made it in php, but now I want to have this list and hidden forms, and when I'm clicking on one of my file's name, the form shows under the clicked name.
Something like here: http://papermashup.com/demos/jquery-sliding-div/#
Here is the code: http://papermashup.com/simple-jquery-showhide-div/
But it works in a way, that when i click on one of files, all forms shows or all hides. How to fix it to work only for clicked file?
JSFIDDLE EXAMPLE: http://jsfiddle.net/qbNrR/
#UPDATE - SIMILAR PROBLEM
Hey, I've got similar problem with submitting ajax forms - using this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
my forms are in div id=#upform and when i'm trying to submit any of them via $.ajax it submits only the first one, here's the code:
<script>
$(function() {
$(".button").click(function() {
var txt = $(".tekst#test").val();
var dataString = 'tekst=' + tekscior;
$.ajax({
type: "POST",
url: "upload/base",
data: dataString,
success: function() {
$('#upform').html("<div id='message'></div>");
$('#message')
.html("<h2>described!</h2>")
.append("<p>thanks!</p>")
.hide()
.fadeIn(1500, function() {
$('#message')
.append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");
});
}
});
return false;
});
});
</script>
AND Here are my forms:
// ONLY THIS ONE IS SUBMITTED, EVEN WHEN I'M SUBMITTING THE SECOND ONE!
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>
You can use the next() jQuery method. Then your code will look something like:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(e) {
$(e.target).next(".slidingDiv").slideToggle();
});
});
Try event.currentTarget to get the form that triggered the click event
on click event use jquery like
$(this).show(); // or hide();
as in example
$('.show_hide').click(function(){
//$(".slidingDiv").slideToggle();
$(this).slideToggle();
});