I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.
input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.
A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.
You can't add div inside of input element (unless you want it in input's value).
No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.
Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.
Related
I have an HTML form where users are able to input their mobile number. See below:
<form class="formulario" action="signature_test.html" method="get" onsubmit="return signature_Alert()" >
Mobile (mgrs): <input type="text" name="mobile" id="mobile"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
Whatever the user enters, is then populated in another HTML file. It innerHTML the text "Default":
<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
However, I would like that if the user leaves the mobile field blank, to have the "Mobile:" and the "Default" not displayed. Is that possible with Javascript?
By the way, this would be the Javascript that innerHTML the "Default" text.
<script>
var values = window.location.search.substring(1).split('&')
var mobile = values[3].split('=')[1]
document.getElementById('mobileInput').innerHTML = mobile;
</script>
Thanks.
Sure, just wrap the content in an element you can target and modify:
<span id="mobileInputContainer">
<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
</span>
Then just adjust that element's style similar to how you already adjust another element's content:
if (mobile.length < 1) {
document.getElementById('mobileInputContainer').style.display = 'none';
}
You'd of course want to double-check the actual value you're getting for mobile in your code. Make sure it doesn't have whitespace, etc. Or really tweak whatever your logic is for determining that no value is present to display. But the actual act of hiding the element is simple, just set the style to be hidden.
Additionally, I'd like to echo a comment above. <font> tags really shouldn't be used anymore. You'll find a little bit of an introduction to CSS styling can go a long way here. I recommend some introductory tutorials on the subject.
You also appear to have an errant </b> in your code. Perhaps you're not showing us the entire content. Either way, you'll want to double-check your HTML as well. Always start with valid and well-formed HTML before using any JavaScript or CSS, or behavior may not be what you expect.
I enter the text into test area and save then I click on Edit button now i have to remove the text from textbox.
I am getting error when i execute the below command for clearing textbox.
`Execute Javascript window.document.getElementByName('resolution').value='';`
HTML:
<span class="textarea-text edit" sfuuid="1832">
<textarea class="input-xlarge wide tleft" name="resolution" cols="" rows="">test</textarea>
<p class="help-block"></p>
</span>
Here you have a textarea tag not a input tag with value attribute. You can clearly see that your textarea. Doesn't have a value attribute. The text "test" is the innerHTML of the element so try setting the innerHTML
LIKE
document.getElementById("").innerHTML=' '
Names are not necessarily unique. Thus, there is no getElementByName method. It is getElementsByName (note the plurality). If you want to just try your operation on the first element found in the DOM with that name, change your code to:
Execute Javascript window.document.getElementsByName('resolution')[0].value='';
Note that it is not necessary to use JavaScript to accomplish this either. Instead, you could do:
Input Text name=resolution ${EMPTY}
I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.
The activeElement selector works fine, it is selecting the correct element.
Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?
Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
value applies only to objects that have the value attribute (normally, form controls).
innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).
They are not equivalent or replaceable. Depends on what you are trying to achieve
First understand where to use what.
<input type="text" value="23" id="age">
Here now
var ageElem=document.getElementById('age');
So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag
<button id='ageButton'>Display Age</button>
So here Display Age is the innerHTML content as it is written inside HTML tag button.
Using innerHTML on an input tag would just result in:
<input name="button" value="Click" ... > InnerHTML Goes Here </input>
But because an input tag doesn't need a closing tag it'll get reset to:
<input name="button" value="Click" ... />
So it's likely your browsers is applying the changes and immediatly resetting it.
do you mean something like this:
$('.activeElement').val('Some text');
<input id="input" type="number">
document.getElementById("input").addEventListener("change", GetData);
function GetData () {
var data = document.getElementById("input").value;
console.log(data);
function ModifyData () {
document.getElementById("input").value = data + "69";
};
ModifyData();
};
My comments: Here input field works as an input and as a display by changing .value
Each HTML element has an innerHTML property that defines both the HTML
code and the text that occurs between that element's opening and
closing tag. By changing an element's innerHTML after some user
interaction, you can make much more interactive pages.
JScript
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
HTML
<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
For instance:
document.getElementById("example").innerHTML = "my string";
This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":
HTML
Change
Javascript
function change(){
document.getElementById(“example”).innerHTML = “Hello, World!”
}
After you clicked the button, Hello, World! will appear because the innerHTML insert the value (in this case, Hello, World!) into between the opening tag and closing tag with an id “example”.
So, if you inspect the element after clicking the button, you will see the following code :
<div id=”example”>Hello, World!</div>
That’s all
innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.
Example.
HTML
Change
Javascript
function FunctionName(){
document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}
On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.
So, on inspecting the element after clicking the button, you will notice the following code :
<div id=”example”>Hello, Kennedy!</div>
Use
document.querySelector('input').defaultValue = "sometext"
Using innerHTML does not work on input elements and also textContent
var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types
I have a web application which replaces content. This content has jquery ui check buttons. When I replace the content if a button already exists then don't add it again:
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
If I push the button (its state is checked) and if I replace the content, the button starts locked until the same content is replaced again.
I use Backbone.js to replace the content
jsfiddle
How can I unlock the check button?
You are duplicating id attributes and that leads to bad HTML, bad HTML leads to frustration, frustration leads to anger, etc.
You have this in your template that you have hidden inside a <div>:
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
Then you insert that same HTML into your .content-central. Now you have two elements in your page with the same id attribute and two <label> elements pointing to them. When you add the jQuery-UI button wrapper, you end up with a slightly modified version of your <label> as the visible element for your checkbox; but, that <label> will be associated with two DOM elements through the for attribute and everything falls apart.
The solution is to stop using a <div> to store your templates. If you use a <script> instead, the browser won't parse the content as HTML and you won't have duplicate id attributes. Something like this:
<script id="template-central-home" type="text/x-template">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</script>
and then this to access the HTML:
content.view = new ContentView({
model: content,
template: $('#template-' + template_name).html()
});
Demo: http://jsfiddle.net/ambiguous/qffsm/
There are two quick lessons here:
Having valid HTML is quite important.
Don't store templates in hidden <div>s, store them in <script>s with a type attribute other than text/html so that browser won't try to interpret them as HTML.
I took a detailed look at your fiddle after you mentioned this problem. The solution I suggested here was more like a quick fix.
If you want to follow the right thing to avoid long term problems and side effects you should consider what is mentioned here. This way your problem is solved and there are no other bugs.
Have a look at this link.
The menu to the left is not clickable in chrome (When you open in new tab, it works fine), but works fine in Mozilla.
Please let me know if you have any thoughts on how to correct this.
Your menu not using Javascript to detect click events it is anchor tag. You will notice that in a webkit browser hovering over the link does not provide a pointer cursor.
Eg:
<a style="background-color:red;" href="/stores/unwrapindia/products/1/Artisan/2/Happily-Unmarried/65/New-Year/78/Promotions-">
<div class="fillDIV">
<input type="checkbox" name="attribute_value_44" value="44" class="CheckBoxClass" id="CheckBox1">
<label class="LabelSelected" for="CheckBox1" id="Label1">Chandigarh</label>
</div>
</a>
The problem could that the input is conflicting with the anchor tag in regards to the click event, because webkit is a bit confused about the div inside the anchor or you need to clean up your ID's. I do not see the reason for your using of the input and label, so at least test it with just the anchor.
The label elements within your links have a for attribute (which refer to hidden checkboxes). Something like:
<input type="checkbox" id="cb1" />
<label for="cb1">mooooo</label>
The link does not work once you set that attribute.
To fix your problem, simply remove the attribute - it does not benefit you anyway (having the checkbox checked is not helpful as you are navigating away from the page).
Here is an example.
My solution is add inline javascript code to tag A
onclick="document.location.href=this.getAttribute('href');"
Note
In html specification, an A element is not allowed to contain a DIV element, you can refer to
http://www.w3.org/TR/html4/sgml/dtd.html
for more information