I have a profile edit form below in which I am asking the user to select multiple cities (I left 4, but on my page I am looking to add around 29,000) from a select2 dropdown menu using the following code, but the selected values do not save when I press the submit button and therefore when the page reloads there are no selected values.
<form action="/edit-my-profile/?action=edit&job_id=5792" method="post" id="submit-job-form" class="job-manager-form" enctype="multipart/form-data">
<fieldset class="fieldset-html">
<label for="html">HTML</label>
<div class="field ">
<select name='job_listing_region[]' id='regions' style='width:300px' multiple>
<option>Boca Raton,FL</option>
<option>New York City, NY</option>
<option>Los Angeles, CA</option>
<option>Boone, NC</option>
</select>
</div>
</fieldset>
<p>
<input type="hidden" name="job_manager_form" value="edit-job" />
<input type="hidden" name="job_id" value="5792" />
<input type="hidden" name="step" value="0" />
<input type="submit" name="submit_job" class="button" value="Save changes" />
</p>
</form>
and the following jquery script
<script>
jQuery(function($) {
$(document).ready(function() {
$("#regions").select2({
});
});
});
</script>
Is there a way I can have the selection box save the selected values?
Related
I am using $_SESSION to dynamically create forms for my web store. These forms hold the custom info for the product that the customer wants. This is the layout:
Page1
Customer fills out form that looks something like this:
<form action="page2" method="post">
<input type="text" name="size">
<input type="text" name="color">
<input type="submit" name="submit" value="Review Order">
</form>
Page2
Customer reviews order details and has the option of adding more products. Customer goes back to page1 to order another one. All of the customer's orders will show on page2 in their respective form.
Looks like this:
Size: 1
Color: blue
Click Here To Checkout
Size: 2
Color:green
Click Here To Checkout
Size:3
color:red
Click Here To Checkout
What I want is one button that will add ALL orders to the PayPal cart. Sure they can add every order individually by clicking on Click Here To Checkout, but then they will have to go through a big loop to add multiple products.
I want the customer to be able to add as many products as possible and then click one button that adds all of the orders to the shopping cart.
This is what I tried but it obviously didn't work:
<script>
$(document).ready(function(){
$('#clickAll').on('click', function() {
$('input[type="submit"]').trigger('click');
});
});
</script>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<button id="clickAll">Submit All</button>
Here is the php script that generates the dynamic forms using $_SESSION:
<?php
if(isset($_POST['submit'])) :
$test = array(
'size' => $_POST['size'],
'color' => $_POST['color'],
'submit' => $_POST['submit']
);
$_SESSION['testing'][] = $test;
endif;
if(isset($_SESSION['testing'])) :
foreach($_SESSION['testing'] as $sav) {
?>
<form action="paypal.com/..." method="post">
<input type="text" name="size" value="<?php echo $sav['size']; ?>">
<input type="text" name="color" value="<?php echo $sav['color']; ?>">
<input type="submit" name="submit" value="Click Here to Checkout">
</form>
<?php } endif; ?>
So the question is, how can I submit all of the forms with ONE button?
Have you tried to do it with $.ajax? You can add an foreach, or call another form on the Onsucces function. Another approach is changing all to one form with an array that points to the right "abstract" form:
<form action="" method="post">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<button id="clickAll">Submit All</button>
</form>
And in php:
foreach ($_POST['name'] as $key => $value) {
$_POST['name'][$key]; // make something with it
$_POST['example'][$key]; // it will get the same index $key
}
Here is a working jsFiddle: http://jsfiddle.net/SqF6Z/3/
Basically, add a class to each form and trigger() a submit on that class. Like so:
HTML (example only):
<form action="http://www.google.com" method="get" class="myForms" id="1stform">
<input type="text" value="1st Form" name="q1" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="2ndform">
<input type="text" value="2nd Form" name="q2" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="3rdform">
<input type="text" value="3rd Form" name="q3" />
</form>
<input type="button" id="clickMe" value="Submit ALL" />
jQuery:
$('.myForms').submit(function () {
console.log("");
return true;
})
$("#clickMe").click(function () {
$(".myForms").trigger('submit'); // should show 3 alerts (one for each form submission)
});
FWIW, I do this by creating an iframe, making that the target for the second form then submit both like this
//create the iframe
$('<iframe id="phantom" name="phantom">').appendTo('#yourContainer');
and create the dual submit like this:
function dualSubmit() {
document.secondForm.target = 'phantom';
document.secondForm.submit();
document.firstForm.submit();
}
works!
first create loop get all forms id and send them to ajax.
<script name="ajax fonksiyonları" type="text/javascript">
function validate(form){
//get form id
var formID = form.id;
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'ajax.php',
data: formDetails.serialize(),
success: function (data) {
// log result
console.log(data);
//for closing popup
location.reload();
window.close()
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
console.log(error);
}
});
return false;
}
//this function will create loop for all forms in page
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
validate(document.forms[i]);
}
}
create button for submit in order
<a class="btn" id="btn" onclick="submitAll();" href="">Save & Close</a>
then stop ajax call after success.also dont forget to log to console.
this code works in popup and closing popup after all ajax completed.
I have a form with a select box that determines if a div is hidden or shown. Each div has text boxes and a button. Since my validation is validating ALL divs hidden or shown, is it possible IF a select option is selected PHP can echo the form picked? For example, below I have
<div id="1" class="colors" style="display:none">
<input type="text" name="1">
<button type="submit" name="submit">Submit</button>
</div>
Is it possible to create an array to build the code above when that option is picked? Same goes for the second hidden div -
<div id="2" class="colors" style="display:none">
<input type="text" name="1">
<input type="text" name="2">
<button type="submit" name="submit">Submit</button>
</div>
This way only one form will be created at a time when a option is picked in the select box. Is this possible? Is this a good idea? The original form will have more form elements.. this is just a sample. Here's the code below.
<script>
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
<form action="" onSubmit="return validateForm(this)" method="post" name="form">
<select id="colorselector">
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="1" class="colors" style="display:none">
<input type="text" name="1">
<button type="submit" name="submit">Submit</button>
</div>
<div id="2" class="colors" style="display:none">
<input type="text" name="1">
<input type="text" name="2">
<button type="submit" name="submit">Submit</button>
</div></form>
If this is possible and a good idea, can you provide an example on how this can be accomplished?
I am using $_SESSION to dynamically create forms for my web store. These forms hold the custom info for the product that the customer wants. This is the layout:
Page1
Customer fills out form that looks something like this:
<form action="page2" method="post">
<input type="text" name="size">
<input type="text" name="color">
<input type="submit" name="submit" value="Review Order">
</form>
Page2
Customer reviews order details and has the option of adding more products. Customer goes back to page1 to order another one. All of the customer's orders will show on page2 in their respective form.
Looks like this:
Size: 1
Color: blue
Click Here To Checkout
Size: 2
Color:green
Click Here To Checkout
Size:3
color:red
Click Here To Checkout
What I want is one button that will add ALL orders to the PayPal cart. Sure they can add every order individually by clicking on Click Here To Checkout, but then they will have to go through a big loop to add multiple products.
I want the customer to be able to add as many products as possible and then click one button that adds all of the orders to the shopping cart.
This is what I tried but it obviously didn't work:
<script>
$(document).ready(function(){
$('#clickAll').on('click', function() {
$('input[type="submit"]').trigger('click');
});
});
</script>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<form action="" method="post">
<input type="text" name="name">
<input type="submit" name="submit" value="submit">
</form>
<button id="clickAll">Submit All</button>
Here is the php script that generates the dynamic forms using $_SESSION:
<?php
if(isset($_POST['submit'])) :
$test = array(
'size' => $_POST['size'],
'color' => $_POST['color'],
'submit' => $_POST['submit']
);
$_SESSION['testing'][] = $test;
endif;
if(isset($_SESSION['testing'])) :
foreach($_SESSION['testing'] as $sav) {
?>
<form action="paypal.com/..." method="post">
<input type="text" name="size" value="<?php echo $sav['size']; ?>">
<input type="text" name="color" value="<?php echo $sav['color']; ?>">
<input type="submit" name="submit" value="Click Here to Checkout">
</form>
<?php } endif; ?>
So the question is, how can I submit all of the forms with ONE button?
Have you tried to do it with $.ajax? You can add an foreach, or call another form on the Onsucces function. Another approach is changing all to one form with an array that points to the right "abstract" form:
<form action="" method="post">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<input type="text" name="name[]">
<input type="text" name="example[]">
<button id="clickAll">Submit All</button>
</form>
And in php:
foreach ($_POST['name'] as $key => $value) {
$_POST['name'][$key]; // make something with it
$_POST['example'][$key]; // it will get the same index $key
}
Here is a working jsFiddle: http://jsfiddle.net/SqF6Z/3/
Basically, add a class to each form and trigger() a submit on that class. Like so:
HTML (example only):
<form action="http://www.google.com" method="get" class="myForms" id="1stform">
<input type="text" value="1st Form" name="q1" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="2ndform">
<input type="text" value="2nd Form" name="q2" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="3rdform">
<input type="text" value="3rd Form" name="q3" />
</form>
<input type="button" id="clickMe" value="Submit ALL" />
jQuery:
$('.myForms').submit(function () {
console.log("");
return true;
})
$("#clickMe").click(function () {
$(".myForms").trigger('submit'); // should show 3 alerts (one for each form submission)
});
FWIW, I do this by creating an iframe, making that the target for the second form then submit both like this
//create the iframe
$('<iframe id="phantom" name="phantom">').appendTo('#yourContainer');
and create the dual submit like this:
function dualSubmit() {
document.secondForm.target = 'phantom';
document.secondForm.submit();
document.firstForm.submit();
}
works!
first create loop get all forms id and send them to ajax.
<script name="ajax fonksiyonları" type="text/javascript">
function validate(form){
//get form id
var formID = form.id;
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'ajax.php',
data: formDetails.serialize(),
success: function (data) {
// log result
console.log(data);
//for closing popup
location.reload();
window.close()
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
console.log(error);
}
});
return false;
}
//this function will create loop for all forms in page
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
validate(document.forms[i]);
}
}
create button for submit in order
<a class="btn" id="btn" onclick="submitAll();" href="">Save & Close</a>
then stop ajax call after success.also dont forget to log to console.
this code works in popup and closing popup after all ajax completed.
I am done with the search page where the user enters the information and select from the drop-list. I've also added the button AddList where you can have more than one search form with tag names changed. All of the searches will eventually be executed in one Submit button and each search will go in one single query. My table caries all the information and tuples contain only numbers.
UPDATED: I tried changing the input type of the input tags but the enable and disable functions can't seem to work on integers, only on text fields. How can I fix that?
My submission is tomorrow, and here is my search code:
<script type="text/javascript">
$('#exactButton').live('click', function(){
$(this).prev().prev().prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().attr('disabled',true);
$(this).prev().prev().prev().prev().attr('disabled',true);
});
$('#rangeButton').live('click',function(){
$(this).prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().prev().attr('disabled',true);
});
})
</script>
And this is my HTML code:
<button id="button">Add List</button><br><br>
<form id ="form" name="search" method="get" action="test.php">
<div id="div">
<select name ="select" >
...options...
</select>
Value:<input type="text" name="exact" id="exactField" />
From: <input type="text" name="from" id="fromField" />
To: <input type="text" name="to" id="toField" />
<br>
<input type="button" name="answer" value="Range" id="rangeButton" />
<input type="button" name="answer" value="Exact" id="exactButton" />
</div>
<br>
<input type="submit"name="search" value="Submit">
</form>
Thank you in advance..
as Dagon said, you will see all submitted parameters in the URL since you are submitting the form with method GET. here is very good explanation for this: http://www.w3schools.com/php/php_get.asp
One idea:
add some custom attributtes to the elements (to the clones too).
this.attr("mycustomattribute","somevalue");
after this, you can get all elements on the page with your custom attribute and your value.
divs = $('div[mycustomattribute="somevalue"]'); //should give all div container with attribute "mycustomattribute" with value "somevalue"
divs.each(function(){
console.log(this,$(this).attr('name'));//show expression (for debug)
});
then you can collect this elements, serialize it and add it to your post Not tested, but an idea.
Kind Regards
In PHP, it's already there.
print_r($_GET); will list all parameters sent by GET method
print_r($_POST); will list all parameters send by POST method.
Then, of course, you will need to iterate in the array to include each values in your query statement.
You can naming input with prefix or suffix correspond to sequence that user click to add list and add those set of inputs to only form.
<form id ="form" name="search" method="get" action="test.php">
<div>
<select name ="select[1]" >
...options...
</select>
Value:<input type="text" name="exact[1]" class="exactField" />
From: <input type="text" name="from[1]" class="fromField" />
To: <input type="text" name="to[1]" class="toField" />
<br>
<input type="button" name="answer[1]" value="Range" class="rangeButton" />
<input type="button" name="answer[1]" value="Exact" class="exactButton" />
</div>
<div>
<select name ="select[2]" >
...options...
</select>
Value:<input type="text" name="exact[2]" class="exactField" />
From: <input type="text" name="from[2]" class="fromField" />
To: <input type="text" name="to[2]" class="toField" />
<br>
<input type="button" name="answer[2]" value="Range" class="rangeButton" />
<input type="button" name="answer[2]" value="Exact" class="exactButton" />
</div>
.
.
.
<br>
<input type="submit"name="search" value="Submit">
</form>
<form action="here.php" method="POST">
<input type="text" name="text">
<div id="one">
<input type="hidden" name="aaa" value="one">
<input type="submit" value="Send">
</div>
<div id="two">
<input type="hidden" name="aaa" value="two">
<input type="submit" value="Send">
</div>
</form>
Now if i click on Send of div ONE or div TWO i have always in $_POST['aaa'] = 'two';
Is possible make one form with two submit with different values?
If i click on div one submit i would like reveice $_POST['aaa'] = 'one' and if i click on div two submit i would like receive $_POST['aaa'] = 'two'.
How can i make it?
I can use for this PHP and jQuery.
EDIT:
I dont want create two form - i dont want showing two many times <input type="text" name="text">
EDIT: maybe i can instead button submit ? but how?
It seems that what you actually want to do is have a value in each of the buttons, see this, for example:
<form action="demo_form.asp" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
You'd need two different forms:
<div id="one">
<form ...>
<input type="hidden" name="aaa" value="one">
<input type="submit" value="Send">
</form>
</div>
<div id="two">
<form ...>
<input ...>
<input ...>
</form>
</div>
Standard practice is that when two fields have the exact same name, to use only the LAST value encountered in the form and submit that.
PHP does have a special-case notation (name="aaa[]") to allow submitting multiple values with the same name, but that wouldn't help you here, as that'd submit ALL of the aaa values, not just the one closest to the submit button.
HTML form:
<form ...>
<input type="text" name="textfield">
<div id="one">
<input type="hidden" name="one_data" value="aaa" />
<input type="submit" name="submit_one" value="Submit" />
</div>
<div id="two">
<input type="hidden" name="two_data" value="bbb" />
<input type="submit" name="submit_two" value="Submit" />
</div>
</form>
server-side:
if (isset($_POST['submit_two'])) {
$data = $_POST['two_data'];
} else if (isset($_POST['submit_one'])) {
$data = $_POST['one_data'];
} else {
die("Invalid submission");
}
Instead of showing two submit button, you can show a radio list with two options and one submit button.
Try this:
in html-
<input id="PreviousButton" value="Previous" type="submit" />
<input id="NextButton" value="Next" type="submit" />
<input id="Button" name="btnSubmit" type="hidden" />
in jOuery-
$("#PreviousButton").click(function () {
$("#Button").val("Previous");
});
$("#NextButton").click(function () {
$("#Button").val("Next");
});
then you can see in the form results - what "Button" contains.