<form action="theurl"><input name="somethingelse"></form>
<form action="theurl"><input name="action"></form>
// document.forms[0].action == 'theurl'
// document.forms[1].action == '[object HTMLInputElement]'
// document.forms[1].getAttribute('action') == 'theurl'
The first form works as expected.
For the second form, is there a way for document.forms[1].action to refer to the form's action property instead of the input element with name="action"? Obviously getAttribute() will work, but for learning purposes, is there another way to do this?
Related
I have an application with info page and edit page
the info page shows the info.
in the edit page i have fields with selectbox etc etc
I want to use same code for both. So I tried
if($('#product').has('option'))
{
console.log('hasSelect')
}
else{
console.log('NOSELECTNO')
}
in single page there is no option or select avaible
but in the edit it is.
How can I make sure it will work (and why is this not working)
edit tried this 2:
var attr = $('#product div').attr('select');
if (typeof attr !== typeof undefined && attr !== false) {
console.log("welmetselect")
}
else
{
console.log("zonderselect")
}
EDIT: HTML
<div id= product>
<div>some more divs</div>
<div> in 1 of the div we have <select><option></option></select></div>
</div>
And html infopage
<div id= product>
<div>only information</div>
<div>only text </div>
</div>
I think you need something like this:
if ($("#product option").length )
If you don't have an option, the length will be 0 (and therefore false)
First of all, you could just give them different IDs, or a class like .info and .edit, and simply check $('#product').hasClass('info'). I do not recommend checking for a specific descendant to identify an element anyway, because you want your code to be as flexible as it can be, and if you decide to add a select element to your info page in the future, for example, to filter out specific items to get info on, your code totally breaks.
Second, why your code is not working, is this.
var attr = $('#product div').attr('select');
select is not an attribute, it's a child. Use children('select') (if it's a direct child) or find('select') (if it's not a direct child).
As a sidenote, you can simplify typeof attr !== typeof undefined to typeof attr !== 'undefined' because we already know typeof undefined is returning 'undefined'.
Is there some way of determining at run time, if an element returns value for element.text() or not? Using javascript or jquery?
I.E. some way of checking if an element is pure text, or it is some other type of element?
Why I need a solution to the above---
I am trying to parse through some complicated forms with totally different coding styles (in the way, for example, text values for elements of a radio button may be enclosed in label tags, or they may be directly given, or they may be enclosed in span tags, and so on...)
So I need to parse the form with the form id as wrapper,
now if the text value for a radio button is enclosed in span, and current selected element is radio button, then next element will be the span tag (opening) which I want to do nothing with and move on. The one after that will be the text, and this I want to obtain using this.text().
Hence the whole question...
You can use nodeType to check if an element is pure text (in which case its value will be 3)
<div id="wrapper"><input type='radio' />some text here</div>
$('#wrapper').contents().each(function()
{
alert(this.nodeType);
});
It will alert 1 (for input) and 3 (for text). For type=3, you can use text() to get text value
Note- It'll also taken into account white spaces (as text nodes).
var attr = $(this).attr('name');
// For some browsers, `attr` is undefined; for others,
// `attr` is false. Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
// ...
}
Another way to check:
if( typeof( $(this).attr('name') ) != 'undefined' ) { // ... }
you can create you own extension method of jQuery:
$.fn.hasAttr = function(name) {
return this.attr(name) !== undefined;
};
$(document).ready(function() {
if($('.edit').hasAttr('id')) {
alert('true');
} else {
alert('false');
}
});
<div class="edit" id="div_1">Test field</div>
hi you can check the type of element as follow
<form >
<input type="text" id="a" value="abc"/>
</form>
<script>
var type = document.forms[0].elements[0].type;
alert(type);
</script>
Cannot get this to work. First time using variables passed into functions. Unchecking radio button should disable form field and vice versa. lineid variable distinguishes this radio/text input pair from 10 others.
My code:
<script type="text/javascript">
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid.disabled = false;
} else {
document.dupedit.lineid.disabled = true;
}
}
</script>
Subset of my HTML.
You need to pass a string into your disablefield function, so put the value in quotes when you pass it in. Something like:
<input onclick="disablefield('2671997')" />
This is because document.getElementById expects a string, not an integer.
Secondly, to enable/disable the field, you need to use disabled = true; rather than = 'disabled'.
document.dupedit.lineid is looking a for a field with name "lineid", which doesn't exist in your form. I would suggest giving the field an id and using document.getElementById again instead.
If you want to continue using the name attribute, you will have to use document.getElementsByName instead. This returns an array of matching elements (since multiple elements can share the same name), but if in your code you know that the element in question is the only one with that name, you can do this:
document.getElementsByName(lineid)[0].disabled = true;
You can see a working version (I think this is how you wanted it anyway) here. And here is a version using getElementsByName.
You are missing a closing brace on the function:
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
} //<-- here
Also, can I suggest you pass this to the function. Then you don't have to call getElementById
<input onclick='disablefield(this)' type.....
function disablefield(obj){
if (obj.checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
}
I think what you need is to re-think the code.
Don't use ID on the checkbox. Better move that ID to the text field you want to disable/enable and check whether that field is disabled/enabled, not the checkbox itself
use cleaner JS.
Please, take a look at the jsFiddle, I have compiled for you. Does it do what you expect, Dan?
I am having some problems with Javascript :(
This is an HTML form for a mobile webpage. To save space I put the names of the text fields inside the boxes. The name disappears when you focus on the box, but I am not able to make it reappear if the user didn't write anything.
Here is the Script (in head tag):
<script type="text/javascript"> resetDefault();{if (this.value.length==0); this.value="default";} </script>
Here is the HTML code:
<input onfocus="this.value=''" onblur="resetDefault()" name="nom" type="text" value="Nom complet" default="Nom complet"/><br><input onfocus="this.value=''" onblur="resetDefault()"name="courriel" type="text" value="Courriel" default="Courriel"/><br>
I keep getting a "resetDefault is not defined" error. I don't know if default is an accepted attribute for input, but I can't set it to "value" because value becomes 0 once someone has focused on the text field, right?
There are several problems with your javascript code. First, it is not syntactically correct. You should first change this code
resetDefault();
{if (this.value.length==0);
this.value="default";}
so that it has valid syntax, like this:
function resetDefault(){
if(this.value.length == 0){
this.value = "default";
}
}
The second problem is that this refers to the global object, instead of the DOM node you want. You need to pass in a value so it knows which input to change.
Change the onblur javascript so that it passes in a parameter to the function:
onblur="resetDefault(this);"
and change the function so it accepts a parameter:
function resetDefault(that){
if (that.value.length == 0){
that.value="default";
}
}
The third problem is that "default" will just change the value of the input box to the string, "default". I doubt that is what you want. Make the value match the default attribute you gave the input:
that.value = that.getAttribute("default");
Try it out on JSFiddle
The semicolon after resetDefault() in the script in the head needs to be removed - now it's a function call of a function that's not defined.
<script type="text/javascript">function resetDefault() { if (this.value.length==0) this.value="default";} </script>
You need to define the resetDefault() function like so:
function resetDefault() {
// Function stuff here
}
I'm using mootools to toggle the display (and existence) of two DOM elements in one of my forms. Then, I am using javascript to validate the form to make sure that all of the required fields were filled in. The problem is that the the browser seems to be caching the elements. For example, I have html like this:
<input name="inputbox" id="inputbox" type="text" />
<select name="selection" id="selection">...</select>
And the javascript for validation is something like this:
if (form.inputbox != null && form.inputbox.value == "") {
//don't submit form
{
else if (form.selection != null && form.selection.value == 0) {
//don't submit form
}
Now, this works fine when the page is first loaded and the input element has been removed. However, when I click the button that replaces the input element with the select element, from then on the form.inputbox and form.selection in the javascript code contain the respective element as it was in its last state in the DOM - even if it is no longer in the DOM. So is the javascript caching the DOM and not updating the elements when they are removed from the DOM? What is going on here, and, more importantly, how should I go about fixing it?
Edit: I am using mootools to do the removing and replacing of the elements, the documentation for the respective functions can be found here and here.
Evaluating an element by name (form.elementName) when non-existent returns undefined. Evaluating the property value of an object ($('elementId')) returns null. Undefined and null are treated differently.
Well, I can answer the second part of my question now: how to fix it. If you are using mootools, then use the dollar function (or getElementById might work) instead of using form.selection and form.inputbox:
if ($("inputbox") != null && $("inputbox").value == "") {
//don't submit form
{
else if ($("selection") != null && $("selection").value == 0) {
//don't submit form
}
It works, but I don't have an explanation for why the other didn't...