We Keep Coding

Value is generated by onClick event, but it is not inserted into inner HTML. Why?

When I return the value from the javascript function on the onClick event, it is getting inserted but the form refreshes again and I lose the selection and the values that I have inserted.
Why does this happen and how can i avoid it?
Below is a sample of my code:
<form id="lengthConvert">
<p><b>Enter a value : </b></p><input type="number" name="inputValue" />
<p><b>Convert from : </b></p>
<select name="fromUnit">
<option value="Centimeter">Centimeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Miles">Miles</option>
</select>
<p><b>Convert to : </b></p>
<select name="toUnit">
<option value="Centimeter">Centimeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Miles">Miles</option>
</select>
<br/><p id="Output"></p>
<button type="submit" form="lengthConvert" value="Submit" onclick="getElementById('Output').innerHTML=convert()">Convert</button>
</button>
</div>
</body>
</html>
<script>
function convert(){
var value = document.getElementsByName('inputValue')[0].value;
var fromUnit= document.getElementsByName('fromUnit')[0].value;
var toUnit= document.getElementsByName('toUnit')[0].value;
if(fromUnit==toUnit){
return value;
}
}
</script>
when I am returning the value from the javascript method on onclick event, it is getting inserrted but the form refreshes again and I am loosing all the selection and values which i have inserted.
Why? and how can i avoid that?

When you click the button you're submitting your form because you're not doing anything to stop the default behavior. Change
<button type="submit"...
to
<button type="button"...
As a side note, your HTML needs to be fixed as you have an extra </button>, no closing </form>, and an unopened </div>. Also, your function doesn't appear to do any actual conversion.

You need to do two things:
Pass event object from onclick() function
Prevent form submission inside convert function by using preventDefault();
function convert(e) {
e.preventDefault();
var value = document.getElementsByName('inputValue')[0].value;
var fromUnit = document.getElementsByName('fromUnit')[0].value;
var toUnit = document.getElementsByName('toUnit')[0].value;
if (fromUnit == toUnit) {
return value;
}
}
<form id="lengthConvert">
<p><b>Enter a value : </b></p><input type="number" name="inputValue" />
<p><b>Convert from : </b></p>
<select name="fromUnit">
<option value="Centimeter">Centimeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Miles">Miles</option>
</select>
<p><b>Convert to : </b></p>
<select name="toUnit">
<option value="Centimeter">Centimeter</option>
<option value="Meter">Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Miles">Miles</option>
</select>
<br/>
<button type="submit" form="lengthConvert" value="Submit" onclick="getElementById('Output').innerHTML=convert(event)">Convert</button>
<div id='Output'></div>
</form>

You are submitting your form, which causes the page to reload, thus wiping out whatever was updated on it prior to the submit. Instead, you'll want to use a regular button (<button type="button">).
But, beyond that, your code is very outdated and inefficient. .getElementsByName() is generally not recommended for performance reasons, but in your case it's even worse because you only want one element, so you're scanning the entire DOM, getting a set of matching elements and then throwing away all but one of them. Use the modern .querySelector() and .querySelectorAll() for most of your DOM searches.
Your HTML is also invalid because you have an extra closing button tag an no closing form tag.
Also, the use of inline event attributes (onclick) should not be used. This is a 25+ year old technique that just won't die because it's easy and people just copy/paste other code they've found that seems to work. There are a lot of reasons not to do this.
There are a number of other concerns in your code as well. Here's your solution, cleaned up and modernized (make sure to see the HTML, CSS, and JS comments):
/* We can style the rows any way we want: */
div.row { margin-top:1em; margin-bottom:1em; font-weight:bold; }
<form id="lengthConvert">
<!--
The us of <p> elements here is really not correct as they mean paragraph, which
itself means "thought or idea". You are just using them for vertical spacing, and
we should not be using HTML for presentation, that's for CSS. Along the same vein,
<b> isn't appropriate here either because you are just using it for presentation.
Instead, a semantically neutral tag like <div> should be used for rows.
CSS classes can be added to control the presentation
-->
<div class="row">Enter a value : </div>
<div class="row">
<!--
Don't use self-termination syntax <tag />.
That syntax is very old an only applies to XHTML, which is not used
very much these days. Adding that syntax buys you nothing.
-->
<input type="number" name="inputValue">
</div>
<div class="row">Convert from :</div>
<div class="row">
<!-- You don't need to set a value for an <option> when
you want the value of an <option> to be the same as
the text of the <option>. The text of the selected
<option> will become the value of the <select> by default.
-->
<select name="fromUnit">
<option>Centimeter</option>
<option>Meter</option>
<option>Kilometer</option>
<option>Miles</option>
</select>
</div>
<div class="row">Convert to :</div>
<div class="row">
<select name="toUnit">
<option>Centimeter</option>
<option>Meter</option>
<option>Kilometer</option>
<option>Miles</option>
</select>
</div>
<div class="row" id="Output"></div>
<!-- The form attribute is only used when a form element is placed outside of the
form it relates to.
Also, don't use inline HTML event attributes.
And, there is no need to add a value attribute unless you want the value
to be something different than the text of the element.
-->
<button type="button">Convert</button>
</form>
<script>
// Get all the element references you know you'll need
let btn = document.querySelector("button[type='button'");
let output = document.getElementById('Output');
// You only have one element with a name of "inputValue". Use
// .querySelector() with a valid CSS selector as an argument
// to find the first item that matches the selector.
// Also, don't assign variables to properties of an element because
// if you ever want to get a second property value, you'll have to
// scan the document all over again for the element. Just store a
// reference to the element itself, then you can access that as often
// as you like.
let input = document.querySelector("input[name='inputValue']");
let fromUnit = document.querySelector("select[name='fromUnit']");
let toUnit = document.querySelector("select[name='toUnit']");
// Set up your event handling in JavaScript, not HTML
btn.addEventListener("click", convert);
function convert(){
console.log(fromUnit.value, toUnit.value);
if(fromUnit.value == toUnit.value){
// Use .textContent when getting/setting text that
// does not contain any HTML. Its's quicker and
// safer.
output.textContent = input.value;
}
}
</script>

Text on button doesn't change after doing innerHTML

When using JQuery, some ui elements such as dropdownboxes or buttons will NOT UPDATE their ui automatically if you change their value with javascript. Although the value is correctly updated, on screen it looks like nothing changed. To fix this, Jquery requires the use of a "refresh" method after changing the value. On this page you can find the info and syntax: http://jquerymobile.com/test/docs/forms/docs-forms.html (scroll down to "refreshing form elements)
I have problems with the text not updating correctly on some html elements, especially buttons and list boxes (select/option). It's supposed to do so automatically, but sometimes the text just stick to its previous value. The value of the text or innerHTML is correct though, it's just not visible.
Here is the problem with the button.I use Javascript to get the innerHTML and change it.
HTML markup:
<button id="btn" onclick"simple_function">A</button>
Javascript:
function simple_function()
{
var anArray = aFunctionThatReturnAnArray();
document.getElementById("btn").innerHTML = anArray[0];
}
By using alert messages I can see the values before and after a change. These alert messages are correct: the value after clicking is indeed the value of anArray[0], but the text of the button in my browser does not change, it stays on "A".
What's frustrating about this button is that sometimes the text does change, but only the first time I change the html (this happens right before the button is displayed the first time to the user). Additional calls of the function afterwards don't change the text anymore. However, the innerHTML IS changed, as verified by an alert message. So everything keeps 'working' but the users will not know what they're actually clicking on because the text of the button isn't visible changed.
I fixed this by using a < span > as the innerHTML for the button, and changing the innerHTML of the span to the value in the array. This works: everytime the innerHTML is changed, it is visible on the screen. Although I have a solution, it's only a work around and I'm curious as to what could cause this?
I have a similar problem with a list box. The default value is "daily". (See full code below).
document.getElementById("interval_list").selectedIndex
and
document.getElementById("interval_list").selectedIndex = 3;
Again, inside the functions the values are always correct, but the text of dropdown stays on daily even if the function says the selectedIndex is 3 (should be "never"). I cannot fix this by adding < span > anywhere, so here I'm stuck.
Some remarks:
There are no duplicate id's in the html (used find to check)
I don't have this problem with buttons in the footer and also never with paragraphs, spans or headers.
I've tried copying similar code in fiddle and wc3's tryit editor: it works there. So it must be something outside of the simple functions that bugs it out?
Checking for browsercompatability: that's not an issue (I don't use
IE).
Full code of list box:
<div class="ui-grid-a">
<div class="ui-block-a">
<p style="padding-right: 1em; padding-top: 0.4em;" align="right">AUTO REMIND</p>
<p style="padding-right: 1em; padding-top: 1em;" align="right">INTERVAL</p>
</div>
<div class="ui-block-b">
<div id="auto_remind_radio_buttons" data-role="controlgroup" data-type="horizontal">
<input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 0;" name="auto_remind_button" id="auto_remind_on" value="male"/>
<label for="auto_remind_on"><img src="images/correct.png" alt="NO" width="26" height="21"></label>
<input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 3;" name="auto_remind_button" id="auto_remind_off" value="female"/>
<label for="auto_remind_off"><img src="images/wrong.png" alt="NO" width="26" height="21"></label>
</div>
<select id="interval_list" name="Single-line ListBox example">
<option id="1" value="1">daily</option>
<option id="2" value="2">weekly</option>
<option id="3" value="4">monthly</option>
<option id="4" value="5">never</option>
</select>
</div>
</div>

document.getElementById("btn").innerHTML=
Watch your case- HTML should be in caps.

More comment than answer. Using the following code:
<button id="b0">b0</button>
<button id="b1" onclick="
document.getElementById('b0').innerHTML = 'foo';
">click me</button>
the innerHTML of the button changes in FF and IE 8, what browser are you using?
Same for your issue with the select, the following works in IE 8 and FF:
<select id="sel0">
<option>Sunday
<option>Monday
<option>Tuesday
<option>Wednesday
</select>
<button onclick="
document.getElementById('sel0').selectedIndex = 1;
">Select Monday</button>
<button onclick="
document.getElementById('sel0').selectedIndex = 3;
">Select Wednesday</button>

How to select the content inside a textbox when loading the page?

I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!

3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.

You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.

you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.

Combining input and select into one visible input field

I am new to styling html elements (e.g. input & select in this case), and I am looking to implement a visually combined input / select element. In essence the input and select would still be completely separate as form elements, but based on class and css I would like to inset the contents of the select menu into the right hand side of the input field. Sorry I am no photoshoper, so here is a representation of what it might look like:
------------------------------------------------
| Select text [v] |
------------------------------------------------
As you can see the left hand portion of the input is where you would type the string for the input element, and the select drop down is inset into the border of the input element (the [v] is supposed to be a down arrow button to drop the list). Any links to how to get stared styling something like this or suggestions are welcome.

The following example is very simple. It shows the main thing you would want to do: Since form elements are able to be styled with CSS just as everything else, it is pretty straightforward. This example still has some styling issues with non-firefox browsers, I will improve it a little.
<html>
<head>
<style>
select#selectoption {
border-left:none;
padding:none;
}
input#datahere {
position:relative;
border-right:none;
padding:none;
}
</style>
</head>
<body>
The form below is a simple example.
<form name ="explanation"action="test" method="post">
<input type="text" id="datahere" />
<select id="selectoption" /><option>test</option><option>test2</option></select>
</form>
</body>
</html>
EDIT: An online example of what you want can be seen here: http://jsfiddle.net/xFQMf/3/

The datalist element might help
(Safari doesn't support this, yet).

<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Blida">
<option value="OuledSlama">
</datalist>

use ng-select
with the [addTag] set to true.
Hope it helps someone :)

How to highlight input text field upon clicking it in Safari?

I would like the value of the input text box to be highlighted when it gains focus, either by clicking it or tabbing to it.
<html>
<body>
<script>
function focusTest(el)
{
el.select();
}
</script>
<input type="text" value="one" OnFocus="focusTest(this); return false;" />
<br/>
<input type="text" value="two" OnFocus="focusTest(this); return false;" />
</body>
</html>
When either input field is clicked in Firefox or IE, that field is highlighted. However, this doesn't work in Safari. (NOTE: it works when tabbing between fields.)

I noticed Safari is actually selecting the text then removing the selection quickly.
So I tried this quick workaround that works in all browsers:
function focusTest(el)
{
setTimeout (function () {el.select();} , 50 );
}
Edit :
Upon further testing it turns out the OnMouseUp event is clearing the selection so it is enough to add
onMouseUp="return false;"
to the input element for things to work as they should.

Not sure about a Safari-specific solution here, but an alternative would be to wrap the input element in a div and set the border properties of it via CSS. Then change border color, etc. when focused and unfocused.