I haven't found a concrete answer as to whether this is possible, but it seems like it should be...
I would like to serialize all the input elements contained in a div. I can't use a form, because it would be nested within another form. I would then get the values and post them via ajax.
Here is the jsFiddle example I am playing with:
http://jsfiddle.net/9uyz5/
If I change the root to a it works as expected.
Thanks for your help.
I've modified the jsfiddle from this other question:
https://stackoverflow.com/a/1186309/25020
you need to serialize all the inputs inside your container, not the actual container itself. so:
$('div :input').serialize()
Try this, to get all.
$('#divID *').serialize()
this also works with
$('div :input').serializeArray()
:)
For serializing the contents of the div with a button, this will be the more efficient way as it doesn't traverse through the entire dom.
$(this).closest('div').find("input,select,textarea").serialize();
make sure to attach this with the button event and make sure to include event.preventdefault with the button so that it does not submit the primary form if the div is inside it.
Related
i have an appended div, what i want is to append a div with the appended one.
please see the codepen of my code which is well explained with comments.
here is the structure i want:
DIV 1 --> DIV 2(append with div1) --> DIV 3(Append to already appended Div 2)
i tried to use appendTo(); and also $('#clsDashRegion_levelThree').find('#clsDashRegion_siteAlmCriticite').append(infoRegionSiteCriDetails); but it does not work. if you can help me please make it work, thank you !
To be honest the code is quite bad. There are much better ways to accomplish what you want, but nevertheless here is your fiddle slightly modified. Please tell me if the behavior is what you want:
https://codepen.io/anon/pen/OjNXWv
One important thing is that the id in the second div that you want to be clickable does not receive direct events because it was generated dynamically. So you have to use event delegation like so:
$(document).on('click','#clsDashRegion_siteAlmCriticite',function() { ...
After the
$('#clsDashRegion_levelTwo').html(infoRegionCriticite);
});
Shouldn't you then call
levelThreeCriticiteDetailsBloc()
Otherwise when you click '#clsDashRegion_siteAlmCriticite' nothing will happen.
I have a button with the class of
button.btn.btn-default.check-all
how do I find this button, get the text it says and change it with a find?
I tried something like this but not sure if it works
var r = $("button").find("check-all");
It appears that you have a button with multiple classes and you want to select the element based on all the classes. Simply use the following selector
$('button.btn.btn-default.check-all')
You can get the text by
$('button.btn.btn-default.check-all').text()
And can update by
$('button.btn.btn-default.check-all').text('your_updated_text');
You should do something like:
var element = $('button.btn.btn-default.check-all');
//save text in prevText
var prevText = element.text();
//now, change it!
element.text('text-changed');
Using class names to get an element might not be a good solution. My solution would be to use id attribute and use this id attribute to get the correct element.
See this fiddle
HTML
<button id="my-button" name="buttonName" onclick="change()">Hi</button>
and JS
alert(document.getElementById('my-button').innerHTML);
function change(){
document.getElementById('my-button').innerHTML='hello';
}
What I have done here is, used document.getElementById('my-button').innerHTML which gets the text of the button using document.getElementById(). The same thing can be used to set the text in a button.
This question lead to basic skills in jQuery. I truly recommande that you could find out jQuery Api documentation and read deeply into it. You can get a very good view of jQuery thus you can do much better and efficient in your work.
Here is the link that may help you with this question.
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/attributes/
You can use the jQuery :contains() psuedo selector to create a variable that will pinpoint the button with the specified text. It can be any text, but be cautious if you have buttons with similar text because the return is not an exact match (to avoid this only input/search text that you know is unique to the button).
var r = $("button:contains('check-all')");
To change the text with the newly created variable you can use the jQuery .text() method.
r.text('check-none');
Fiddle Example
:contains() jQuery
Hello all I have a form and some 20 input elements inside it, On a particular event i want to remove all the elements inside it. I don't want to use remove()/removeChild() as i have to get each and every element and say remove. is there any way using which we can just remove all the elements in a form. please help
Just empty the form using .empty()
$('form').empty()
$('form').empty();
reference empty()
Try this : $('form').hide();
you can set to empty string
$('form').html('')
so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?
Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')
Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");
There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)
I have an input field fld. I wrap this field inside a div in one part of my code.
input.wrap('<div>')
In another part of the code I obtain the field 'fld' which is a jQuery object.
fld.el contains the input field.
Now, I want the div I previously wrapped around this fld.
fld.el.parent() does not work for me. Nor does fld.el.parents(). Tried fld.el.closest('div') with no luck.
If I load the input element again via id, I am able to access the parent objects.
$('#'+fld.id).parent() works. But I do not want to introduce any ids.
Any way in which I can just make use of the fld.el I have and obtain the parent?
What's the ".el" in fld.el.parent() about? Try fld.parent().
Not 100% sure but try:
parentdivs = fld.el.parents("div:first");
OR
parentdivs = fld.parents("div:first");
This will get your first parent div of an item
Without seeing your code and based on the behavior you're describing, I would guess that fld.el is not a jQuery object.
Try:
$(fld.el).parent();
If you're 100% certain it is a jQuery object (and the above doesn't work) you should post your code, or at least recreate your issue using jsfiddle.net