I have created div element for text field, i need to add contents dynamically to that div element. As a novel I'm a little bit confused, I have tried using id for the input tag, can I do it by using javascript?.
<div>
<input type="text" name="fullname" id="name">
</div>
please see above code, please instruct.
To change the value of an input element you have to set the value property of the element like the following way:
document.getElementById('name').value = 'New value';
<div>
<input type="text" name="fullname" id="name">
</div>
Related
<span>
<input name="" autocomplete="off" label="" class="form-control mandatory field-mandatory" placeholder="">
<span class="goog-combobox-button"/>
<input type="hidden" value="3" id="ctl00_cntMainBody_OBJECT_ONE__PMLookupField" name="ctl00_cntMainBody_OBJECT_ONE__PMLookupField">
</span>
I would like to find out if there is a way, using jQuery, to find if the input above the one with id=ctl00_cntMainBody_OBJECT_ONE__PMLookupField has a css class field-mandatory. There are many spans on the page with similar to this one. I am working within the existing structure of html with no option to change. Since the input has no id the only way to locate it is by using the input below it that has an id.
Find each hidden input and target the sibling you want :-
$("input[type='hidden']").each(function() {
var inputAbove = $(this).siblings('input.field-mandatory');
// DO SOMETHING
});
I have input :
<input type="text" id="nameProduct">
I want set value :
document.getElementById("nameProduct").value="hello";
How can I do it before page load input ?
You can't do it with JavaScript, the dom element object can only get after it loaded. The right way is to set value attribute for input.
<input type="text" id="nameProduct" value="hello">
A simple hack you can do is hide element initially and show it after value updated using JavaScript.
var ele=document.getElementById("nameProduct");
ele.value="hello";
ele.style.display='block';
<input type="text" id="nameProduct" style="display:none">
Is it possible to bind input element name to its parent index (div) so whenever div index changes input name is changed automatically? Something like this:
<div>
<input type="text" name="parent.index"/>
</div>
I guess thats what you need:
<div onchange = "this.children[0].name=this.parentNode.indexOf(this)">
<input type="text" />
</div>
Short Question:
How do you link a label element to an input element without using the input element's id using jQuery and javascript?
Long Question:
I am using jQuery to clone a form with possibly more than one instance of the form being available for the user to fill in.
A label's 'for' attribute is supposed to be set to the 'id' attribute of the input element that it is for. This works when the input element has a unique id.
Because I am cloning the same input element there will be multiple input elements with the same id in the document. Therefore I'm avoiding having id attributes for input elements but I'd still like to focus on the input element when the label is clicked. I also want to avoid generating random ids for fields or setting onclick events on labels.
Edit #1
Example mark up (note no ids)
<form>
<label>First Name:</label><input type='text' name='FirstName' /><br/>
<label>Last Name:</label><input type='text' name='LastName' /><br/>
</form>
Example cloning code:
var newForm = $('form').clone();
$(newForm).find('label').each(function(){
var inputElement = $(this).next('input');
// I'd love to set the label's for attribute to an element
$(this).attr('for', inputElement);
});
$(document).append(newForm);
Edit #2
There currently are three options:
Set onclick events for labels to focus on the input field they're for. Criteria for deciding which labels are for which inputs can be the next input element or something else
Embed the input fields in the label fields (might not be possible due to designer's choices)
Generate random ids while cloning each form
Well it would be nice to see the markup, but if i can assume that the markup will look somewhat like this
<form name="f1">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>
<form name="f2">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>
then you could do something like this
$('form label').live('click',function(){
$(this).next('input').focus();
});
you will need to use live or delegate since you're cloning the forms on the fly i'm assuming.
The simplest solution is to move the <input> tags inside the <label> tags and forgo the for attribute altogether. Per the HTML spec, <input> tags without for attributes are implicitly associated with their contents.
Try this:
<form>
<label>First Name: <input type='text' name='FirstName' /></label><br/>
<label>Last Name: <input type='text' name='LastName' /></label><br/>
</form>
(See: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1)
You shouldn't have multiple identical ids in the page. It defeats the purpose of the id attribute and is against the W3C spec.
Regardless, jQuery's $(this) could help you in this situation. Say you gave all your the "focusable" class. Then you could do:
$('.focusable').focus( function(){
$(this).doSomething();
});
This is really an HTML question. A label can be associated wtih a form control either by its for attribute having the same value as the associated control's id attribute, or by having the control as a child of the label, e.g.
<form ...>
<label for="nameField">Name:<input id="nameField" name="nameField" ... ></label>
<label>email:<input name="emailField" ... ></label>
</form>
I suppose in jQuery you need something like:
var labelAndInput = $('<label>text<input ... ></label>');
or whatever. Note that older versions of IE (and maybe more recent ones too) the label will not be associated with the control without the for attribute (or htmlFor property), there is no other way.
I have the next input element:
<input type="text" name="username" id="username" value="user name"
helper="formText" defvalue="user name" class="filling" />
How can I get this html by id "username" with help of jQuery?
I try to make it with get(), html(). But I want to get html of current element.
Thank you in advance.
Sorry for my english.
You can't get the exact HTML (as different browsers handle this differently), but closest you can get is appending a cloned version to a temporary element and taking the .innerHTML of that, like this:
var html = $("<div/>").append($("#username").clone()).html();