access span in the from but undefined - javascript

I write something like this:
<form>
<input>text</input>
<div><span id="test">text</span></div>
.................
<button onclick="submitStudnetForm(this);"></button>
</form>
function submitStudnetForm(form){
alert(form['test']);
}
but it return undefined, and I don't where is wrong?
Thx in advance.

First off, this references the button rather than the form. Even if it did reference the form, the form element only contains references to input elements by name (not by id). You should use document.getElementById('test') instead. This assumes that there is only one such span on the page as there should be because ids must be unique.

Others have already said what I wanted to say. Also, is there a reason you're using a button with onclick to submit the form, rather than just input type="submit"? This way, users with javascript turned off won't be able to use that form.
(I can't insert this as a comment for some reason - I guess my reputation is too low for that?)

You're passing this, which is the button and you're trying to pull a property from it called test, which doesn't exist.

Form is not an array (it's a reference to a button element in this case) with an index named 'test'. when referring to elements by id you should use document.getElementById('test').

Related

Why isn't clear button function isn't working?

The clear button isn't working to clear list-group history
//html
<button class="btn btn-primary mb-3"
type="button"
id="clear-inputs"
onclick="clearIt()">
Clear history
</button>
<form id="history"></form>
<div class="list-group" id="history"></div>
//javascript clear button function
function clearIt() {
document.getElementById('history').value = "";
}
You have two elements with the same id (the <form> and the <div>). Browsers will render this, but it is invalid html, as the id attribute is supposed to be unique to an element. getElementById() is going to grab the first element with the designated id.
The second problem with your html is that neither form or div elements have a value attribute, so there is nothing for your function to clear. It is unclear from your example which element is supposed to be cleared by your button. For the <div>, you could try setting document.getElementById('yourUniqueId').innerHtml = "". That will clear any html inside of the <div>.
You don't need javascript for clear button, you can just use html for clear button only in form tag. Use for clear.
Here is a simple example: example
you have two 'history' id's - not a good practice
use 'innerhtml' instead of value - will yield much better results. value is better for like inputs like a
Make sure you provide a unique ID for your elements,
2 elements above has the same ID, also the function must be defined before calling it.
Always check your Console for logging/errors :)

Inputs inside Div class be grouped as JSON array [duplicate]

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.

How to make "val()" work in html form?

I have an online order form which works great! the only thing thats wrong is that i cant seem to find a way to send the input data from the text fields with Naam:, Adres: etc. (which is at the bottom of the code) i found out that i could use this code : $("#txt_name").val(); but it does not work properly. And i don't really know in which function i have to pace de code. Can someone help me? i'm not very experienced with jquery.
working website
javascript without the html
In your code you have the following
$(".txt_name").val();
You are using . as a class selector, you should use
$("#txt_name").val();
With # as an id selector
The first one gives you an array because you are selecting multiple elements and the second one gives you an element. I testet it in the browser console and it returns the value of the #txt_name Naam, but the first one returns undefined since .txt_name does not exist.
The same applies to the other fields, give them and id and you can get their values the same way.
$("#txt_name").val() should return a string which you can store in a variable of pass to a function.
if you want it to return something usefull "#txt_name" must be an input element or an element with a value attribute.
lets say you have a test inpu tag with the id="txt_name" if a user writes something that elements value attribue will be that text, even if you dont see it on the tag itself.
so $("#txt_name").val() will return the value of the value attribute of the htmlElement.

How to access elements from a certain form and certain type with jquery

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)

Accessing a parent added via wrap function

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

Categories

Resources