Is it possible to get form field data and serialize it by using the class assigned to two divs ?
I have 4 divs that contain form fields, only two DIVs are shown at a time. What is shown depends on a drop down selection.
if select = 1, the divs with the class classOne are show and divs with classTwo are hidden
if select = 2, the divs with the class classTwo are show and divs with classOne are hidden
When I submit the form, I want to serialize either both divs with classOne, or classTwo, depending on what was selected in the dropdown.
So far I can't get it to serialize the form date from the divs..
data: $('.classOne').serializeArray(),
This doesn't pass any data to my back end script.
You need to target the form controls within those elements. You can use the pseudo selector :input to cover various control tags and types
data: $('.classOne :input').serializeArray()
DEMO
Another common way to do this is to use <fieldset> tags and disable the inactive ones. Disabling a fieldset disables any form controls within it so you can then effectively use serialize() on the whole form since it does not include disabled controls
serializeArray() return all enabled input field data. You need to disable the input fields which you don't want serializeArray() to return.
When you select the dropdown, set the attribute of input fields to disabled.
To make input field disabled :
$(input).attr('disabled','disabled');
if select = 1, the divs with the class 'classOne' are show and divs with 'classTwo' are hidden and disabled
if select = 2, the divs with the class 'classTwo' are show and divs with 'classOne' are hidden and disabled
Related
I am using v-form-builder from https://github.com/sethsandaru/vue-form-builder .
I am trying to show and hide the fields & sections of the forms depending upon the business logic. I am able to hide the fields by applying additionalContainerClass “d-block”. But by doing so, other fields which had the values visible, they also goes blank.
To achieve this, I have used the following call-backs of vueJs.
mounted() {
//check the fields to hide
// hide the fields found by applying using the following code
this.formData.sections[action.field_section_id].additionalContainerClass = "d-block"
}
Now, as soon as the class of “d-block” is added to the field_section, other fields which had the values inserted, gets blank. Here is the video recording of the issue.
https://drive.google.com/file/d/1ztF22iGOW0msR3MAfG13qmgn7zo-4jh_/view?usp=sharing
I currently have a script, which select every checkbox on a page and then submits the form. Every checkbox is under multiple divs on the page.
I currently have to sit for a round 3 hours manually fetching each selector for a few hundred checkboxes on a page. I then create a recurring list on
this.click('selector');
As you can imagine, my scripts are very bulky and pretty unpractical.
Is there any way I can fetch the id for every visible <input> with type="checkbox"?
I only want to fetch the ids that are visible on the page and click on each of them.
If the checkboxes have id attributes, then it is fairly easy with casper.getElementsAttribute(selector, attributeName):
var ids = casper.getElementsAttribute('input[type="checkbox"][id]', 'id');
The CSS selector works like this:
input[type="checkbox"] matches all input elements that have the type of "checkbox" and
[id] further restricts the selection to all elements that have an id attribute set (it wouldn't make sense to retrieve id attributes of elements that don't have those).
I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
I am currently building a site where I prefered to use a div element as a checkbox.
If selected the checkbox class is toggled using javascript.
Heres the html.
<div class='col span_1_of_6 menuGroup'>
<div class="circl3" style="background-image:url(images/icons/'.$icon.') background-repeat:no-repeat;"></div>
<p class='menuGroupName'>$items</p>
</div>
$icon (an icon for the item) & $items (item name) are php to fetch from mysqli db. I originally used entire html in php echo. But, for better reading I posted like that.
Here's the javascript.
$(".menuGroup").click(function() {
$(this).toggleClass("btnOn");
});
Here is the div element in 2 states. Selected and Not Selected.
http://postimg.org/image/5sk0z4tgj/
WHAT I WANT is the <p> element name to be submited to the next page when i click the Submit Button
And is there is a better alternative to this method?
Make hidden checkbox and add onchange handler to change state of your pseudo checkbox.
Hidden checkbox will submit to the next page.
OR
See the CSS3 only examples how to make it with out javascript.
You can see every element and pick up the selected ones and send the response
$('.menuGroup').each(function() {
if ($(this).hasClass('btnOn')) {
// Save element to send
}
});
I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...