On the form, a customer can create multiple groups. Every group has the same input fields. If customer clicks on '+ Additional Group' then an additional group will be created dynamically via jQuery (The html is downloaded via an AJAX call).
Below is the sample html. Each ul tag is a group. In the group ul, each input field includes a group number field. Like this: foo_1, foo_2
current_group is a hidden field which keeps track of the total number of groups.
If add_group button has been clicked, jQuery will get the total number of groups from current_group and then additional group dynamically.
Is this how it should be done?
Also if a customer click on Submit button when they have finish Form - it may return back to same page because of Error Validation via PHP. I don't want to loose dynamic html groups again. How can this be solved?
<h2> Group One </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_1'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<h2> Group Two </h2>
<ul class="Form">
<li>
<label>Foo</label>
<select name='foo_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</li>
<li>
<label>Bar</label>
<select name='bar_2'>
<option value='car'>Car</option>
<option value='bike'>Bike</option>
<option value='van'>Van</option>
</select>
</li>
<ul>
<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />
Well if the first set of HTML elements is there already, you can always use jQuery's clone() to copy the elements instead of calling the server. You would need to find the elements and replace the names like you talked about.
jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");
In a more readable format
var count = 1;
function addRow(){
count++;
var newFormElems = jQuery(".Form").clone(); //clone the form
var selects = newFormElems.find("select"); //find the selects
selects.eq(0).prop("name", "foo_" + count); //rename first
selects.eq(1).prop("name", "bar_" + count); //rename second
newFormElems.appendTo("#someElem"); //add to the page
}
Another way to redo the naming function which it increments the number:
newFormElems.find("select").each(
function(){
this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
}
);
And what is the best way to deal with the dynamic forms? Well you can submit the data with Ajax or you have the php code write out form after the validation.
There are several way to do one thing. This is your logic. It should work if no mistakes made.
Whenever you are fetching displaying the new group keep a hidden field named group_ids[]
You will receive all the group ids in an array. You can access that array from $_REQUEST['group_ids'] (you can use $_POST or $_GET according to your code)
Now whenever you submit the page check what group ids are submitted by user. You can receive the drop down values also. If you need to display those groups again you can get it from database using $_REQUEST['group_ids'] and keep the correct option selected by comparing the current value from the user selected value.
Related
I have a Buy button that a user can click on to purchase a particular product.
This takes them through to a purchase form I've built.
One of the fields on that form uses a URL parameter so it knows which product the user wants to buy.
So what I want to do is to have a HTML select field somewhere on the page before (where the Buy button is) and allow the user to select the product there.
Then when they click on the Buy button, it passes the selected value through via the URL. For example:
// Some content here promoting the three products.
// Now I want a select field for the user to choose one of the three products, like this.
<select id="productSelect">
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>
// Then I have some more content here showing the pros/cons of each product.
// Finally, I have a buy button at the bottom of the page that takes them to the page with the purchase form.
// Here is where I want to grab the value of the select field and pass it through via the "product" parameter like this.
<a class="button" href="/buy/?product='select value here'">Buy</a>
Do this with JavaScript:
document.getElementsByClassName("button")[0].addEventListener("click", function(event) {
var product = document.getElementById("productSelect").value;
event.target.setAttribute("href", "/buy?product=" + product);
});
This will work.
I have a form which has a select input
<select class="form-control" id="taskSelect" name="taskSelect" >
<option value="" name="task" id="task">Select One</option>
<option value="1" name="task">1</option>
<option value="2" name="task">2</option>
</select>
Now depending on what is selected, a sub form appears. I have set up an example JSFiddle
Now I need to pass any data that has been completed to a function
submitHandler: function(form){
var params = $(form).serialize();
generatePDF(params);
}
Normally to get the input I would do something like this
$('#someInput').val();
But in my situation I dont know what will be inputted so I am serializing things. If selection 1 is selected, then I only need the inputs for the fields it displays, not the fields for selection 2. Serializing seems to capture all inputs, not the ones that I want.
What is the best way to only pass the inputted data to the function?
Thanks
Maybe you can try splitting the form into 2 parts. Once this is done you can serialize only the selected form. This is assuming you don't have any other form elements outside the two tasks you mentioned above
I've got an option-select dropdown autopopulating using data pulled from an oracle database using asp-classic. The option's id's are the employee id numbers. I'm doing a query to a database to get the employee id who was working during the shift. Once I get that ID, I want to set that option to be the currently selected option, but it's not working for me. Here's what I've got:
<select id="supervisor1" style="width:90%">
<option value="1234" id="1234">John1 Smith </option>
<option value="1235" id="1235">John2 Smith </option>
<option value="1236" id="1236">John3 Smith </option>
<option value="1237" id="1237">John4 Smith </option>
<option value="1345" id="1345">John5 Smith </option>
<option value="1346" id="1346">James Smith </option>
</select>
So that's an example of the select. Obviously names and id numbers have been changed, and there are about 50 names in the actual program.
Now, when the ASP code executes on pageload, the current supervisor is stored in an ASP variable called "foreman1".
<script>
var selectedIndex = '<%=foreman1%>'
var sup1 = document.getElementById('supervisor1');
//alert(selectedIndex);
sup1.options[sup1.options.selectedIndex].selected = true;
</script>
This stores the value of 'foreman1' in a javascript variable. It stores the supervisor selectbox in a variable as well. Then it is supposed to go through the options of supervisor1, find the one with the id of 'foreman1' and then make it selected, which I imagine would make it show up on the page as being the one that is selected. however, it isn't doing this. What am I doing wrong?
If selectedIndex is the value of the option you'd like to select, just set the selects value to the same value
<script>
var selectedIndex = '<%=foreman1%>'
var sup1 = document.getElementById('supervisor1');
sup1.value = selectedIndex;
</script>
and place the script tag before </body>
I have main categories and Sub categories of products when I select any main category it shows related sub-categories. But When I post the form it posts last sub-category value instead of selected sub-category value.
JavaScript Code
$(function() {
$('#category').change(function(){
$('.sub-category').hide();
$('#' + $(this).val()).show();
});
});
HTML code
<Select id="category" name="product_category">
<option value="eco">Main Category 1</option>
<option value="organic">Main Category 2</option>
</Select>
<Select name="product_sub" id="eco" class="sub-category">
<option value="eco1">Sub Category 1</option>
<option value="eco2">Sub Category 2</option>
</Select>
<Select id="organic" name="product_sub" class="sub-category" style="display:none;width:270px;">
<option value="organic1">Sub Category 3</option>
<option value="organic2">Sub Category 4</option>
</Select>
For Example: When I am selecting sub category 1 , its posting value of sub category 3
All successful form fields are submitted to the server. CSS display does not impact whether or not a form field is considered successful. The HTML spec defines what makes a control successful.
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated submit button is successful.
All "on" checkboxes may be successful.
For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
For menus, the control name is provided by a SELECT element and values are provided by OPTION elements. Only selected options may be
successful. When no options are selected, the control is not
successful and neither the name nor any values are submitted to the
server when the form is submitted.
The current value of a file select is a list of one or more file names. Upon submission of the form, the contents of each file are
submitted with the rest of the form data. The file contents are
packaged according to the form's content type.
The current value of an object control is determined by the object's implementation.
If a control doesn't have a current value when the form is submitted,
user agents are not required to treat it as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons.
OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
Disable the form fields you do not want submitted.
$('#category').change(function(){
$('.sub-category').hide().prop('disabled', true);
$('#' + $(this).val()).show().prop('disabled', false);
});
The syntax to set a dropdownlist to multiple values is as following:
$("#multiple").val(["Multiple2", "Multiple3"]);
My problem is that I don't know how many values I have. So how do I set a dropdownlist dynamicaly to multiple values with values from an array?
Your code should work as seen in this live demo.
Markup:
<select multiple="multiple" id="multiple">
<option value="1">item 1</option>
<option value="2">item 2</option>
</select>
Script:
$('#multiple').val(['1', '2']);
Result:
do a check to know if the array has more values:
if (array[i]) { //DO WHAT YOU NEED}
It's not clear to me what you're trying to achieve.
You can use an array as argument of val() and this is the result:
> Passing an array of element values allows matching <input
> type="checkbox">, <input type="radio"> and <option>s inside of n
> <select multiple="multiple"> to be selected. In the case of <input
> type="radio">s that are part of a radio group and <select
> multiple="multiple"> the other elements will be deselected.
That means that will affect in your case only a select with muptiple choice enabled (and not a simple dropdown list).
If, on the contrary by 'set to multiple values' means adding options to an existing select, val() is not built to do that (for this you can have a look here)