POST Multiple forms with same id from javascript - javascript

i have a little problem...i read a lot posts and i find some answers but...!i have multiple forms who created dynamically in PHP code!I have checkbox to every form and i check the forms to save the edits!my problem is when i check 3 forms only the first saved because only this post to save.php page!i make some changes to my code:
What i can do to make this code to send all forms to save.php page when i press th button save all
function save_all()
{
var all_elem=document.getElementsByTagName("*");
var same_id=new Array();
var index=0;
var answer=confirm("The prices from checked products will change!Are you sure");
if(answer)
{
for(var i=0;all_elem.length;i++)
{
if(all_elem[i].id=="form1"){
same_id[index++]=all_elem[i];
document.forms[all_elem[i]].action="save_all.php";//error
document.forms[all_elem[i]].submit();//error
}
}
}
//this is my form and i have while loop to create multiple forms
<form id="form1" name="form[<?=$form_counter++;?>]" method="post" class="checkboxes">

First, IDs must be unique. Period.
http://www.w3.org/TR/html4/struct/global.html#adef-id
Secondly, that's way too much code and very inefficient DOM traversal.
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++)
{
forms[i].submit();
}
But I doubt this will work. A form submittal reloads the page in some fashion. How can multiple form submissions occur at once (other than in the extremely obscure case of submitting multiple forms to different windows)?
And if they all must occur at once, why aren't they in a single form?

First. Use unique IDs always
Second. You can send the forms one by one, using Ajax, with jQuery or other library you like. But better, use a single form, adding all your input fields to it. So, when you submit your form, all data will be sent to your PHP script (hint: use unique names for each of the fields, so you can identify which product they represent)

Related

Change form parameter based on form selection

I have 3 different forms on a single page where the user can switch between using JS. The forms represent different information and only one can be submitted at a time where the user is then redirected to a different page based on the form they selected. The issue is that I have 2 input fields that are common to these forms so they are outside the forms. I am able to submit them alongside a form if I set the :
<input id="default" form="form1">
value.
So I figured it would be a simple thing to just add a function in each script where I hide/show the forms to also change that parameter to the form I want submitted however it doesn't seem to work.
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.form = "form2";
}
I have something like this but it doesn't change the form parameter.
You need to actually give your input an ID of default so you can target it:
<input form="form1" id="default">
use setAttribute
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.setAttribute("form", "form2");
console.log(input1.getAttribute("form"))
}
form2Search();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="default" form="form1">

How to navigate to last <input> tag in fieldset using Jquery in a Drupal View form

I am not a front-end developer and I have very limited exposure to JQuery JS etc. So any help is appreciated, thanks.
Objective : - I want to put the sum of all fields (except last ) of a fieldset into last field of that fieldset.
The form is rather complicated, in this form, there are multiple fieldsets and each fieldset contain multiple fields.
This form is generated by Drupal Views & I have very limited options to navigate in this form.
I can not use id, name or any other attribute as they are dynamically generated by CMS also there are hundreds of such fieldset so it is not feasible to write code for every one of them.
So, future addition of fields may alter the attributes. And I can not add my own attributes, classes, or ids to this form.
form looks something like this
<fieldset>
------<div>
---------<fieldset> **this one**
------------------<input>
------------------<input>
------------------<input>
------------------<input>
----------------nth <input> <= Sum of 1st to (n-1)th should come here
-----------------------<div>
I think that it can be done possibly through input:last but can't figure out how to use it properly.
Here is the function I wrote
$(function() {
$('input').change(function() {
var sum = 0;
// Loop through all inputs
$(this).closest('fieldset').find('input').each(function() {
sum += parseInt($(this).val());
console.log(sum);
// i want to put sum into last <input> tag of the current fieldset
});
});
}); // end function()
the output of console.log ($(this).closest('fieldset').find("input").last());); is
So, I figured that I have to extract attribute value, so far I have tried these
$(this).closest('fieldset').find("input").last().data('value'); Undefined
and
$(this).closest('fieldset').find("input").last().attr('value'); results in Undefined

Set multiple form values using jQuery Data attribute

So let us say i have a form with id #form which has two input fields, namely title & price.
I click on the Edit button somewhere in the application which has data attributes (e.g data-title="Apple" data-price="10")that are to be assigned to the #form upon clicking the button.
the obvious solution that works is
$("#name").val($(this).data('name'));
$("#price").val($(this).data('price'));
This obviously looks bad when you have too many fields. So I am trying to get something like this to work $('#form').data($(this).data());, more or less in a single like
Have tried this many ways with no success
Any help is appreciated
You could create a jquery plugin that you can call from the element that contains the data points and have it apply the data based on the key to elements within the form of that same name. Example below
$.fn.applyData = function(form) {
$form = $(form);
$.each($(this).data(), function(i, key) {
$form.find('#' + i).val(key);
});
};
JSFiddle: http://jsfiddle.net/LCM8S/43/

JavaScript n PHP w/ Select Boxes

Example is here.
I'm moving countries from one select box to another, when I submit the form I want the values in the right text box to be used by php. When I give the right box a name for a php array, like ToLB[] the Javascript fails. How can I handle this so that the submitted values will be used by php processes?
in forms it's a typical process to use an action and a method. This is declared within the form tag. For example
<form name='phpSend' method='post' action='myActions.php'>
Now when your form is submitted it is instantly 'posted' to the url myActions.php and is automatically declared as a $_POST array.
The names of the inputs become the array keys and the value becomes the value.
A basic method is to do a procedural action. Meaning if you leave the action attribute blank, the action will submit the form to the page you're already on and use if statements to check if the form has been submitted.
if(isset($_POST)&&isset($_POST['someName'])){
//form submitted!
}
Now, I've never used a multiple select before so you may want to var_dumb() or print_r() your output to double check but my guess is it'll be an Array within the $_POST array.
Submitting with javascript
if(document.getElementByName('phpSend').submit){//or however your checking
var selected=[];
for(var e=0;e<document.getElementByTagName('select').options.length;e++){
if(document.getElementByTagName('select').options[e].selected==true)selected[e]=document.getElementByTagName('select').options[e].value;
}
//then add the selected array to your preferred method of sending your data to your php document
}
I often encounter a situation like this and I usually submit the select options as a string.
Add an hidden field to your form:
<input type="hidden" name="valuesToSubmit">
<script type="text/javascript">
var selectobject=document.getElementById("myselect");
var myValues = "";
for (var i=0; i<selectobject.length; i++){
myValues = myValues + selectobject.options[i].value + ",";
}
document.form.valuesToSubmit.value=myValues;
</script>
In the PHP scripts that receive the posting data you can use the explode function to turn your sting into an array and then iterate on it ... depends what you need to do. Remember to remove the last unwanted ","
I have taken a look at your code.
There are some missing parts and amendments to do to make it works.
I didn't test the amendments but I think they should work.
1)you have to add the hidden field inside the form.
<form name="combo_box" action="test.php">
<input type="hidden" name="valuesToSubmit" value="">
2)Then you have to give the id to the select box because you use the id to reference the object like this var selectobject=document.getElementById("ToLB");
<select multiple size="10" name="ToLB" id="ToLB" style="width:150">
3)Change th submit button with a normal button so you can force the submit only when the loop is ended and the values have been passed into the hidden field.
<input type="button" name="submit" id="submit" value="Submit" onClick="updateValues()">
4)Force the submit at the end of the javascript
function updateValues(){
var selectobject=document.getElementById("ToLB");
var myValues = "";
for (var i=0; i<selectobject.length; i++){
myValues = myValues + selectobject.options[i].value + ",";
}
document.form.valuesToSubmit.value=myValues;
document.combo_box.submit();
}

Jquery to detect if duplicate values in forms

I have built a dynamic table containing form fields that can be added or removed when required.
What im wondering is.. Is there a plugin or script that has been created that can search a set of form fields for duplicate values ?
Example.
We have a form field with a class of "field-name"
this field may exist 10 times on the page because its part of dynamic rows.
So what im hoping is.. for a plugin that wont allow duplicate values to exist in these fields on the page ?
You can check the fields yourself with a few lines of code. The below runs on form submit and creates a copy of the original values with duplicates removed. If the lists don't match then you know you have some duplicate values.
$('form').submit(function (evt) {
var dynamicFields = $('.field-name'),
uniques = $.unique(dynamicFields);
if (uniques.length != dynamicFields.length) {
alert('Please make sure all your values are unique.');
return false;
}
});

Categories