<!DOCTYPE HTML PUBLIC "-//WC3/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<label>A label
<input type="button" value="First" onClick="alert('First');" />
<input type="button" value="Second" onClick="alert('Second');" />
</label>
</body>
</html>
Tried this code in Firefox 3.6.8. When I click "first" it displays "first". When I click "second", it displays "second, and then "first"? Is this a weird onClick behavior due to block level tags (input) in inline tag (label)?
Yup, it happens in alot of browsers (well all the ones i have installed anyway), and it happens with span tags (which are also inline).
If this is a form, it should read:
<label for="First">First</label>
<input type="button" value="First" id="First" onclick="alert('First');" />
<label for="Second">Second</label>
<input type="button" value="Second" id="Second" onclick="alert('First');" />
If not, try span tags instead?
Your buttons are nested into the single label element. When you click on the second button, Firefox activates the label and then the first button. You should divide your label, as suggested by #jamie-wilson.
Related
I want to make a text to show and hide inside an input box I made.
I know that it's supposed to be like this:
onmouseover=this.style.display="block";
onmouseout=this.style.display="none";
I just don't know where to put it. Should I put it in the <input>?
Here is my HTML code:
<html>
<head>
<link rel="stylesheet" href="CSS.css"/>
<script src="JavaScript.js"></script>
</head>
<body onload= "load();">
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input /><br></br>
</body>
</html>
When I wrote it after the <input> the text was showing all the time, and it was not even in the textbox.
Like this:
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input onmouseover=this.style.display="block"; my text here />
How can I make a text to appear and disappear inside my textbox with those functions?
I hope I'm clear, thanks for the help.
Try this:
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Is this what you are trying to do?
Fiddle: http://jsfiddle.net/AtheistP3ace/8nL9gr1h/
HTML:
<input onmouseover="this.value='my text here';" onmouseout="this.value='';" />
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Works, sort of, the problem is that when you mouse out, anything you typed is blanked and when you mouse over again, it just displays text. Another answer (which may not work if you want everything to be contained in the one HTML Document is to add a Class to you inputs and give it a :hover in a CSS file and link that file in the Head of your HTML, putting any changes to the styling in your CSS.
The problem I'm having is with Safari and Chrome. It appears there is a bug that causes the mouseup event to fire twice when you click on a text or input box. I want the text in the input box to be completely selected when the box gets the focus (regardless if it's tabbed into, clicked on, or given the focus through code). If you tab to the box or give it the focus through code it works perfectly. However, if you click on the box, the text is selected until you let go of the mouse button. Then the text is immediately deselected. Here is the code I am using:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
</form>
Is there any way around this for Chrome and Safari?
This should do it:
<input type="text" id="myText" value="Mickey" onclick="myFunction()">
<script>
function myFunction() {
document.getElementById("myText").select();
}
</script>
Here's a working demo using your code. Notice there needs to be 2 different functions and two different getElementByID parameters: http://codepen.io/anon/pen/pJXLro
HTML:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5" onclick="myFunction()">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5" onclick="myFunction2()">
</form>
Javascript:
<script>
function myFunction() {
document.getElementById("x1").select();
}
function myFunction2() {
document.getElementById("y1").select();
}
</script>
As you may already know, it's a good idea to try to keep your HTML and JS as separated out from each other as possible (but that wasn't causing you the problem in your example).
I found a solution. I created event listeners for the input boxes:
document.getElementById("x1").addEventListener("click", function() {document.getElementById("x1").select();});
document.getElementById("y1").addEventListener("click", function() {document.getElementById("y1").select();});
Now, when the input box is clicked, it is automatically selected. When the input box is tabbed into it is also automatically selected. Now I don't have to use the onFocus event to select the input box text. The onFocus event and onClick event were conflicting with each other in Safari and Chrome but not on Firefox, IE or Opera.
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()
I am trying to retrive html of a dom element "abc".
<div id=abc>
<input id=xyz type=text value="2" />
</div>
<input type=button value="2" onclick="show()"/>
<script>
document.getElementById("xyz").value=5;
function show(){
alert(document.getElementById("abc").innerHTML);
}
</script>
Lets say I modified the value of text box
by entering some value OR
by Javascript code
document.getElementById("xyz").value=5;
but
alert(document.getElementById("abc").innerHTML);
always show me
<input id=xyz type=text value="2" />
Why?
Can anyone tell me how I can get the latest html of the dom element "abc".?
.value will not change the HTML. If you want to do that, use .setAttrubute instead. See this JSFiddle: http://jsfiddle.net/5EFXN/
document.getElementById("xyz").setAttribute('value','5');
I have looked at this: Radio Button change event not working in chrome or safari and it didn't give me the solution I was looking for. I have a simple form with radio buttons and an onClick="jarod();" and jarod() is a function called above. See Code:
<script type="text/javascript">
function jarod()
{
alert('yes');
}
</script>
The HTML form is:
<form id="form_601799" class="appnitro" method="post" action="/formbuilder/view.php">
<div class="form_description">
<h2>Input Information to Prepare Answer</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Number of paragraphs: </label>
<div>
<input id="element_1" name="element_1" class="element text small" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_2" >
<label class="description" for="element_2">Paragraph 1: </label>
<span>
<input id="element_2_1" name="element_2" class="element radio" type="radio" value="1" />
<label class="choice" for="element_2_1" >Admit</label>
<input onClick="jarod();" id="element_2_2" name="element_2" class="element radio" type="radio" value="2" />
<label class="choice" for="element_2_2">Qualified Admission</label>
<input id="element_2_3" name="element_2" class="element radio" type="radio" value="3" />
<label class="choice" for="element_2_3">Deny</label>
<input id="element_2_4" name="element_2" class="element radio" type="radio" value="4" />
<label class="choice" for="element_2_4">Qualified Denial</label>
<input id="element_2_5" name="element_2" class="element radio" type="radio" value="5" />
<label class="choice" for="element_2_5">Legal Conclusion</label>
</span>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="601799" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
As you can see there is onclick="jarod();" attempting to call the javascript function. This does nothing when the onclick="jarod();" is in the input tag section but if I move it to the label section like:
<label class="choice" for="element_2_1" onClick="jarod();">Admit</lable>
This "label" works just fine in Chrome. I'm going to use this to reveal a text area if the Qualified Admission or Qualified Denial is selected.
Thanks for any help.
PS - I also tried putting the onclick="jarod();" in the text field and it works just fine in Chrome. What is the deal with radio buttons and Chrome?
EDIT: This is frustrating. I used phpform.org to create the form to save me time. It uses this DOCTYPE at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
When I use this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
It works just fine. Someone commented about it being a form of XHTML / XML and sure enough it is. At least I was able to spend the last few hours sleeping instead of sitting at the computer trying to figure out the solution!
Bad thing is now, my CSS doesn't look right. I think I'd rather have a formatting issue than a programming issue.
jarod
Is your document written as any XML-based form of HTML? Because if so, then onClick will be ignored, as names are case-sensitive. If you put your whole document up, then someone can test everything within the context of the original document, and someone can definitely give you a definitive answer (I'm going to bed pretty soon).
For now, my answer is try to change onClick to onclick in the attribute of the radio button.
Also, you need to put onclick inside of every single radio button, not just one of them. The other radio buttons are separate HTML elements, and so the onclick event from one of them does not apply to any of the others.
As you havent provided your DOCTYPE issue here might be onclick or onClick
you should check this.
onclick or onClick?
Also try
onclick="javascript:jarod();"
as of onclick for radio its working on chrome for OSX
here's a fiddle on that
http://jsfiddle.net/9efbR/
I had a similar issue with radio inputs (couldn't get onclick="" to work), and the solution has been changing onclick to onchange.