Hi i am trying to refresh a single DIV on my page called #total_number. Inside that DIV is a column of a table i've called into the DIV. The DIV counts the number number of records submitted.
What I want it to do is when I submit - I want the DIV to count the total number of records submitted.
<div id="total_number"></div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
$("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Photo has been added to your favorites!</div>");
setTimeout(function() {
$(".messages").fadeOut(function() {
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
Now I want a code that will only refresh the DIV #total_number on click on the submit button.
Is it something like the following:
<div id="total_number" count="0" readonly>No submitted records yet!</div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
var count = parseInt($("$total_number").attr('count'));
var nCount = (count+1);
$("$total_number").attr('count',nCount).html(nCount+' Records been submitted');
$("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Photo has been added to your favorites!</div>");
setTimeout(function() {
$(".messages").fadeOut(function() {
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
Try Something
<div id="total_number"></div>
<form id="form1" name="form4" method="POST" action="pay.asp">
<label for="comment2"></label>
<input name="comment" type="text" id="comment" size="60" />
<input name="comme" type="hidden" id="comme" value="<%=(rs_user.Fields.Item(" email ").Value)%>" />
<input name="comfn" type="hidden" id="comfn" value="<%=(rs_user.Fields.Item(" fname ").Value)%> <%=(rs_user.Fields.Item("lname ").Value)%>" />
<input name="item" type="hidden" id="item" value="<%=(rs_resq.Fields.Item(" item ").Value)%>" />
<input name="ctype" type="hidden" id="ctype" value="album" />
<input name="price" type="hidden" id="price" value="<%=(rs_resq.Fields.Item(" email ").Value)%>" />
<input type="hidden" name="MM_insert" value="form1">
<input name="imageField" type="image" id="changePanel" src="imgs/buttons/Untitled-1.png" align="top" />
</form>
<script>
$(document).ready(function() {
$("form").on('submit', function(event) {
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function() {
var count = parseInt($("$total_number").attr('count'));
var nCount = (count+1);
$("#total_number").html(nCount); //Puts response data inside <div id="total_number"></div>
});
});
});
</script>
OR
<div id="submit">ajax</div>
<div id="div_element"></div>
<script>
$('#submit').click(function(event){
$("#div_element").load('URL?html=some_arguments');
});
</script>
Related
This is my first post I am able to call PHP without refreshing the page. But I am having trouble finding a way to generalize this for multiple buttons.
HTML
<form action="#" class="t" method="POST" id="p1">
<label for="t1">text_1</label>
<input type="text" id="t1" name="t1" value="<?= $t1='' ?>" />
<input type="submit" class="button" id="b1" name="insert" value="submit">
</form>
<form action="#" class="t" method="POST" id="p2">
<label for="t2">text_2</label>
<input type="text" id="t2" name="t2" value="<?= $t2='' ?>" />
<input type="submit" class="button" id="b2" name="select" value="submit">
</form>
I can send the value from the first text input to PHP, but I cannot figure how to do this with multiple forms.
JavaScript
$(document).ready(function(){
$('body').on('submit', '#p1', function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'answers.php',
data : formData,
success : function(data) {
alert(data);
$('#p').text(data);
}
});
});
});
PHP
$tab1 = (isset($_POST['tab1'])) ? $_POST['tab1'] : null;
$t1 = (isset($_POST['t1'])) ? $_POST['t1'] : null;
echo $tab1;
echo $t1;
I added a code snippet. When submitted it will console.log the value of the desired inputs value
$(document).ready(function(){
$('body').on('submit', '.t', function(event) {
event.preventDefault();
var formData = $(this).serialize();
console.log(formData);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" class="t" method="POST" id="p1">
<label for="t1">text_1</label>
<input type="text" id="t1" name="t1" value="1" />
<input type="submit" class="button" id="b1" name="insert" value="submit">
</form>
<form action="#" class="t" method="POST" id="p1">
<label for="t2">text_2</label>
<input type="text" id="t2" name="t2" value="2" />
<input type="submit" class="button" id="b2" name="select" value="submit">
</form>
Say that I have more than 100 forms on one page (I know it is a lot, but neccesary in this matter) and I have a Ajax that submit each forms without reloading the page it is in, and Show/Hide a DIV on callback from jQuery on success and error, how do I:
1 : Target the specific DIV ID in the jQuery
2 : Make sure that it submit the specific form and only this form (not validating on required fields from other forms)
JS Code:
<script>
$("form").on("submit", function(e) {
var dataString = $(this).serialize();
let response_div = $("[id^='response_div_']")
$.ajax({
type: "POST",
url: "update_userdata.asp",
data: dataString,
success: function() {
response_div.html("<div id='message' style='background-color: #28a745;'></div>");
$("#message")
.html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
.hide()
.fadeIn(1500, function() {
$("#message").append(
""
);
});
}
});
e.preventDefault();
});
</script>
HTML:
<div id="response_div_initials_1">
</div>
<form name="Initials2" id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_EconomyColumns_1">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_initials_2">
</div>
<form name="Initials2" id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_EconomyColumns_2">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
I tried different variations of $("[id^='response_div_']") but havent had success with any attempts I have tried.
If you have 100+ form, I would suggest event delegation for one event listener listens multiple forms.
If those response_div_ are just for displaying message to a specific form, but not for storing data, I suggest you to not setting a unique id to them. Instead, I move the response div under the form and set it with form_response class so you know which div to update.
I also put the styling into <style> so you don't need to handing css inside the script.
I usually don't write html within string literal. To have a icon after the response message, you can offload it to CSS which makes your script neater. Check the form_response::after style. Font awesome has an article on that.
p.s. you need to fix the submit button and form name. There are 2 EconomyColumns1 and Initials2 form.
$('html').on('submit', 'form', function(e) {
e.preventDefault();
var dataString = $(this).serialize();
// obtain the submitting form with e.currentTarget
// then search the tree down for div with class form_response
let responseDiv = $(e.currentTarget).children('div.form_response');
$.ajax({
type: "POST",
url: "https://6049aeb7fb5dcc001796a5ad.mockapi.io/foobar", // mock api for testing
data: dataString,
success: function() {
$(responseDiv)
.html("Løn Information er nu opdateret")
.hide()
.fadeIn(1500, function() {
// what is this line for?
$("#message").append("");
})
// wait 5 second
.delay(5000)
// fade out
.fadeOut(1500);
}
});
});
.form_response {
display: none;
background-color: #28a745;
color: white;
}
.form_response::after {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 900;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
This is what you want...?
the HTML
<h2>Form 1</h2>
<form>
<div class="message"></div>
<input type="text" name="name-a">
<button type="submit">Submit</button>
</form>
<h2>Form 2</h2>
<form>
<div class="message"></div>
<input type="text" name="name-b">
<button type="submit">Submit</button>
</form>
then jQuery
$('form').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
let msgBox = $(this).find('.message');
$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("Put your html message here that will display according to the submited form");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});
});
and some CSS
.message {
border: 1px solid red;
padding: 4px;
text-align: center;
width: 100px;
margin: 4px;
display: none;
}
the working demo https://jsfiddle.net/jozsefk/1yw7c9x3/ Please note, that this is just an example to show you how to do it and you must adapt this to your code.
Also this will display your input name and value if exists based on a form submited.
Here is the code I have last tried:
<div class="message" style="background-color: #28a745;"></div>
</div>
<form name="Initials1" id="Initials1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials1" value="Submit">Send</button>
</fieldset>
</form>
<script>
$('form').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
let msgBox = $(this).find('.message');
$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("<p>Hello World!</p>");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});
});
</script>
The message CSS from you is still in the doc aswell
For some reason I can't retrieve value from text inputs with the serialize() form inputs function in jquery.
If i the inputs are type="text" console.log returns:
position_id=229&step=1&name=&email=
If the inputs are type="hidden" and a value="test" is added console.log returns:
position_id=229&step=1&name=test&email=test#test.com
This is my form:
<form id="referral-form" action="#" method="post">
<input type="hidden" name="position_id" value="{{$position->id}}" />
<input type="hidden" name="step" value="1" />
<input name="name" class="form-control" type="text" value="" id="name" required/>
<input name="email" class="form-control" type="text" value="" id="email" required />
<div class="button submit"></div>
</form>
and here is my javascript event:
onRefer: function(e) {
e.preventDefault();
var $form = $("#referral-form");
console.log($form.serialize());
}
This allows me to change the category of photos without leaving the page. IT WORKS.
Next step - The pre-defined category of a photo has a button with a green background and the other two have red. When making a new choice I want the pressed button to turn green and the other two buttons for that photo to turn to/stay red. The green css is c_on and the red css is c_off.
How can I set the right css to the right button with javascript/ajax/jquery?
Any help greatly appreciated. (Styles are defined correctly in my code but I could not get it to paste here properly so I used a comment).
JS:
<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
e.preventDefault();
});
});
</script>
CSS:
.c_on {color: #000;background-color:#F00;}
.c_off {color: #000;background-color:#0F0;}
HTML:
<img src="myfoto1.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_on">
</form>
<form id="form2">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_off">
</form>
<form id="form3">
<input name="num" type="hidden" value="1373" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0"><br>
<form id="form1">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="1" >
<input type="submit" value="1" class="c_off">
</form>
<form id="form2">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="2" >
<input type="submit" value="2" class="c_on">
</form>
<form id="form3">
<input name="num" type="hidden" value="1374" >
<input name="shw" type="hidden" value="3" >
<input type="submit" value="3" class="c_off">
</form>
You can do it as follows:
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
This would make your code look as follows:
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).serialize(),
});
// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
e.preventDefault();
});
});
I find it hard to understand exactly what you mean, but with a couple of events and booleans you should probably be able to do something like this fairly easy.
var image_1 = false
if (image_1 === true) {
//change button styles
}
var element = getElement('div.image') // example
element.addEventListener('click', function () {
image_1 = true'
}
And the wouldn't even be any ajax involved. For example you could submit when all are true.
Hope this helps
$('input:submit').on('click',function(){
$('input:submit').removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
})
You should add a click event for each button, which allow you to remove any .c_on class, and apply it to the clicked button.
$('input[type="submit"]').on('click', function () {
$(".c_on").removeClass('c_on').addClass('c_off');
$(this).removeClass('c_off').addClass('c_on');
}}
Try this solution and check theCSS for appropriate color to the class.
UPDATE:
id must be unique. Hence I have changed the id of the forms to class.
Then I have added new data-image property to differentiate the set of buttons.
Updated Code snippets:
$(function() {
$('form').on('click', 'input[type="submit"]', function(e) {
$.ajax({
type: 'post',
url: "test_ajax_update_code.php",
data: $(this).parent().serialize(),
});
var clicked = $(this),
imageName = clicked.data("image");
clicked.removeClass("c_off").addClass("c_on");
$('input[type="submit"]').each(function() {
var self = $(this);
if (!clicked.is(self)) {
if (self.hasClass("c_on") && imageName == self.data("image"))
self.removeClass("c_on").addClass("c_off");
}
});
e.preventDefault();
});
});
.c_off {
color: #000;
background-color: #F00;
}
.c_on {
color: #000;
background-color: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_on" data-image="img1">
</form>
<form class="form2">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_off" data-image="img1">
</form>
<form class="form3">
<input name="num" type="hidden" value="1373">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="1">
<input type="submit" value="1" class="c_off" data-image="img2">
</form>
<form class="form2">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="2">
<input type="submit" value="2" class="c_on" data-image="img2">
</form>
<form class="form3">
<input name="num" type="hidden" value="1374">
<input name="shw" type="hidden" value="3">
<input type="submit" value="3" class="c_off" data-image="img2">
</form>
I have a form element which contains a bunch of input elements (however, I expect it would be the same if instead of a form, the inputs were in a given div) . JavaScript needs the the values within the form multiple times. Instead of using a bunch of var id=$('#id').val(); script, how can I grab everything in the form, and then use the values like mainForm.id?
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
EDIT
Not perfect, but maybe just:
var obj=document.getElementById('mainForm');
console.log(obj.id.value);
Try creating an empty object , utilizing $.each() to populate object with property id of input , object value with value of input
var obj = {};
$.each($("#mainForm input"), function(key, val) {
obj[val.id] = val.value
});
console.log(obj)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
Without jQuery
var obj = {};
var inputs = document.querySelectorAll("#mainForm input");
[].forEach.call(inputs, function(val, key) {
obj[val.id] = val.value;
});
console.log(obj)
<form method="post" id="mainForm">
<input id="id" name="id" type="hidden" value="1" />
<input id="cid" name="cid" value="pages" type="hidden" />
<input id="task" name="task" value="delete" type="hidden" />
<input id="controller" name="controller" value="display" type="hidden" />
<input id="CSRF" name="CSRF" value="123" type="hidden">
</form>
$('#mainForm input').each(function() {
// do what you want with the input here
// console.log($(this).attr('id')); will print the id of every input for example
});