I'd like to create a function that that submits all the formularies with a checkbox checked and hides with their respective div tags
I put the following code as an example
<html>
<script>
//the jquery function to submit all forms
$(function () {
$(".formerasemessage").each(function () {
var par_div = $(this).closest(".demo"); //finding the closest div
$(this).validate({
submitHandler: function (formbeingsubmitted) {
$.post('remove.php', $(formbeingsubmitted).serialize(), function (data) {
$(formbeingsubmitted).hide("slow");
par_div.hide('slow'); //hide the div
});
}
});
});
});
</script>
<body>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="checkItem"></form>
</div>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="Checkbox1"></form>
</div>
<div class="demo">
<form method="post" class="formerasemessage">
<input type="checkbox" id="Checkbox2"></form>
</div>
<input type="button" value="Submit all checked">
</body>
</html>
I need to reprogram the function Jquery so that it can perform the desired function.
the visual result would be something like this:
that's my inbox of Outlook, checked my mails and then I click in 'remove' and my emails are hidden and deleted
$(document).ready(function(){
$('button').click(function(){
$(":checked",".formerasemessage").each(function () {
var par_div = $(this).closest(".demo"); //finding the closest div
var form = $(this).closest('form');
form.validate({submitHandler: function () {
$.post('remove.php', form.serialize(), function (data) {
form.hide("slow");
par_div.hide('slow'); //hide the div
});
}
}).submit();
});
});
});
You could call the input using document.getElementById("inputid").value. To hide anything, use a css code :
#inputid {visibility: hidden}
You can also archieve the same effect using javascript.
Archive to execute a js function with for instance : I can be clicked
You'll find several options online (W3schools) such as onclick, onmousein, onchange ...
Related
I have a form that is using a function like
$(document).ready(function() {
$("#form1").submit(function() {
But I have 2 other forms that I'd like to use the same function if/when they submit, how would I write that?
$(document).ready(function() {
$("#form1").submit(function(),
$("#form2").submit(function(),
$("#form3").submit(function() {
Thanks
If I understand, you want to share a function for various submit event handlers. This is fairly simple:
function submitHandler() {
// handler stuff here.
}
$(document).ready(function() {
$("#form1").submit(submitHandler);
$("#form2").submit(submitHandler);
$("#form3").submit(submitHandler);
}
and alternative, if you want to handle all forms, is to specify which forms in the jquery selector. You can do this for all forms on the page:
$(document).on('submit','form', function() { });
or, if you just add a class name to the forms you want to use it on:
$(document).on('submit','.formclass', function() { });
You should be able to just do this:
$("#form1, #form2, #form3").submit(function() {
formid = this.id;
console.log('Processing form [' +formid+ ']');
...etc...
Any of the specified IDs will trigger that submit function.
Using the formid var, you can fine-tune any form-specific mods within the function.
You can pass the id of the form to submit them separately.
This code will allow you to have as many forms as you like without having to update the JS.
function submitForm(id) {
$("#" + id).submit(function(e) {
e.preventDefault();
for (let i = 0; i < e.target.length - 1; i++) {
console.log(e.target[i].name, e.target[i].value);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input name="name">
<button onClick="submitForm('form1')">Submit</button>
</form>
<form id="form2">
<input name="name">
<button onClick="submitForm('form2')">Submit</button>
</form>
<form id="form3">
<input name="name">
<button onClick="submitForm('form3')">Submit</button>
</form>
By JQuery you can use the below function $("form").submitNow() with any form element.
$.fn.submitNow = function() {
var form = $(this);
// handle form element
console.log(this.id, this.action);
$(this).submit();
}
//use it
$("form").submitNow();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="./action1" id="action1">
<input type="submit" value="form1" />
</form>
<form action="./action2" id="action2">
<input type="submit" value="form2" />
</form>
<form action="./action3" id="action3">
<input type="submit" value="form3" />
</form>
My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.
HTML:
<form id="myForm">
<fieldset>
<ol>
<li>
<label for="data">Data</label>
<input id="data" name="data" type="text" placeholder="Ex.º: 14-02-2014" required>
</li>
<li>
<label for="conta">Conta</label>
<input id="conta" type="text" name="conta" placeholder="Ex.º: " required>
</li>
</ol>
<input id="oknovo" type="submit" value="OK & Novo" />
<input id="okfechar" type="submit" value="OK & Fechar" />
</fieldset>
</form>
JS:
$(document).ready(function () {
var form = $('#myForm');
var botao;
form.validate();
if (form.valid()) {
$("#myForm input[type=submit]").click(function (event) {
botao = $(this).attr('id');
alert("clique " + botao);
});
};
});
I want to validate the form using JQuery validation plugin.
If it is valid according to the rules specified in the HTML form, then identify which of the buttons was clicked. The validation plugin is working but the form is never valid, therefore the function is never called to alert the id of the button.
You may see a live JSFiddle here.
If the form isn't valid at DOM ready (which it will never be), then your code to add the event handler to the button won't run. You should consider running your validation on a different event, say when the text in the textbox changes.
Example:
$('input[type=textbox]').change(function() {
// put your validation code here.
});
Put your validation inside the click event, and it starts working:
$(document).ready(function () {
var form = $('#myForm');
var botao;
form.validate();
$("#myForm input[type=submit]").click(function (event) {
if (form.valid()) {
botao = $(this).attr('id');
alert("clique " + botao);
}
event.preventDefault();
});
});
Working fiddle
Try adding event.preventDefault();
$("#myForm input[type=submit]").click(function (event) {
event.preventDefault();
botao = $(this).attr('id');
alert("clique " + botao);
});
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();
});
how to get the parent div id of current submit form with the ajaxform plugin
I am not having any problems with the success state
Thank you.
below is my code.
<script type="text/javascript" charset="utf-8">
$('.formsubmit').ajaxForm( {
beforeSubmit: function() {
// here want form parent div display loading..
var id = $(this).parent().id; // my problem here how to get current action form parent div id
$('div#'+id).html("Loading...");
},
url: '/post.php',
success: Response,
datatype: ($.browser.msie) ? "text" : "xml"
});
function Response(xml) {
// let say XML return is equal 1
var id = xml;
$('div#'+id).html("Success");
}
</script>
<html>
<body>
<div id="1">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='stackoverflow.com'>
</form>
</div>
<div id="2">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='jquery.com'>
</form>
</div>
<div id="3">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='google.com'>
</form>
</div>
</body>
</html>
From what I can see in the docs, beforeSubmit method is invoked with three params:
the form data in array format
the jQuery object for the form
the Options Object passed into ajaxForm/ajaxSubmit
Given that if you change your before submit to
beforeSubmit: function(formData, formObj, options) {
var id = formObj.parent().attr('id');
$('div#'+id).html("Loading...");
}
This should work although I haven't tested it.