How to make a button lose focus when page is loaded - javascript

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()

Related

Cannot set javascript innerhtml in IE 11 without compatibility view

I am trying to correct an HTML form that works in IE11 compatibility view but behaves differently if not in compatibility.
The user can change the values in the form input elements and then click Save.
The Save button grabs the innerhtml of the entire page and stores it into a hidden input element, then proceeds to submit the form. In CV mode, the innerhtml contains the edits the user made. When NOT in CV mode, the innerhtml is the original rendering.
How can I collect the new values in the fields?
<html>
<head>
<script type="text/javascript">
function saveit() {
var markup = document.documentElement.innerHTML;
document.getElementById("html1").setAttribute("value", markup);
document.htmlform.submit();
}
</script>
</head>
<body>
<form name="htmlform" id="htmlform" method="post">
<input type="hidden" name="html1" id="html1"><br>
<input type="text" name="batch_num" id="batch_num" value="100"><br>
<input type="text" name="batch_name" id="batch_name" value="Start"><br>
</form>
<input type="button" name="savebutton" value="Save" onclick="saveit();">
</body>
</html>

Javascript file is re-loaded when pressing enter button inside an <form> element. Why?

I have this html sample code
<html>
<head>
<title>Form Test</title>
<script src="./testScript.js"></script>
</head>
<body>
<form>
<input id="textField" type="text" placeholder="Type in your name">
</form>
</body>
</html>
The testScript.js file contains only one line: alert("hello");
When I write something inside the input element and I press on enter button, the javascript file is reloaded and the alert is triggered. I noticed that when I remove the form, the reloading will not be triggered.
Why this happens? and How to prevent the reloading of javascript files when pressing enter button inside a form?
Without specific attributes, the method of the form will be get, so pressing enter in an input field will submit the form through the GET method. The page will thus reload and the javascript file loaded, and the alert triggered.
I think your code exists an error.
You didn't close the input element. Just modify the html like this:
<input id="textField" type="text" placeholder="Type in your name"/>

Javascript/ Facebox getElementById not returning anything

I am opening up a small modal dialog using facebox with a form and then trying to access the value inside a text field on that form with javascript. This is the HTML code -
<div id="dialog-form95" style="display:none">
<div class="block">
<form action="" method="post" name="form95">
<h3>Setting URL</h3>
<p></p>
<p><label>URL : </label></p><input type="text" class="text" id="du95" name="url"/>
<p><input type="submit" class="submit small" value="save" onclick="updateUrl(95,109); return false;"/></p>
</form>
</div>
</div>
This is the javascript onclick -
function updateUrl(bid, cid){
alert(document.getElementById('du'+bid).value);
}
I even tried hardcoding "du95". Whenever i update anything in the textbox and submit, it shows a blank alert dialog. Nothing shows up in the js console as well.
That's because it has no value. Try and see what happens:
<input type="text" class="text" id="du95" name="url" value="testing" />
For some reason you have display: none in you container div.
After removing that it seems to work fine in jsfiddle: http://jsfiddle.net/8bSdK/

Onclick Submit form Javascript with image buttons

hey, well I have this form
<form method="POST" action=''>
<input type="hidden" name="op" value="download1">
<input type="hidden" name="usr_login" value="<TMPL_VAR usr_login>">
<input type="hidden" name="id" value="<TMPL_VAR file_code>">
<input type="hidden" name="fname" value="<TMPL_VAR file_name>">
<input type="hidden" name="referer" value="<TMPL_VAR referer>">
<div class="premium-download"><input name="method_premium" value="<TMPL_VAR lang_premium_download>" type="image" src="images/premium-download.png" alt="<TMPL_VAR lang_premium_download>" border="0" /></div>
<div class="free-download"><input name="method_free" value="<TMPL_VAR lang_free_download>" type="image" src="images/free-download.png" alt="<TMPL_VAR lang_free_download>" /></div>
</form>
How can I submit the form from the image inputs (see the last two fields)? Right now they are set as image type and I understand that those will not submit the form by default. Could anyone help? I was told to do it with javascript :D
I initially misread your question. As already noted, <input type="image"> elements do submit forms. However, if you're looking for more versatility than image inputs, my answer still applies.
I was told to do it with javascript
Don't, use <button> elements instead. <button> elements work like <input type="button">, except that they can be styled to have no border, be transparent, and they can contain other HTML. For example:
<button type="submit" name="method_premium" value="<TMPL_VAR lang_premium_download>">
<img src="images/premium-download.png" alt=alt="<TMPL_VAR lang_premium_download>" />
</button>
Style the button with CSS (border:none; background-color:transparent;) and you're good to go.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
The BUTTON Element - W3C
Input elements with "type" set to "image" do indeed act (almost) exactly like "submit" inputs. It's "almost" exactly because you also get the coordinates of the mouse click, and you don't get the "value" of the input element.
If you wanted the clicks on the "image" inputs to submit the values, the simplest thing to do would be to have a couple more hidden inputs.
I don't know what you are trying to achieve, but you could submit the form using JavaScript. It might be best to use the BUTTON as suggested by #Andy E:
<form method="POST" name='myForm'>
...
...
<script lang="javascript">
function SubmitForm()
{
document.forms['myForm'].submit() ;
}
</script>

How to change form element values in HTML

I have this piece of simple code.
<html>
<head>
<script type="text/javascript">
function changeText()
{
var form = document.forms['detail'];
form.desc.value="success";
}
</script>
</head>
<body>
<form name="detail">
<input type="text" name="desc" id="desc" >
<input type="submit" value="changetext" onClick=changeText()>
</form>
</body>
</html>
When i run this in Mozilla browser the value of the textbox named "desc" changes but disappears immediately...i.e it is not shown forever and becomes empty.
How can I fix it.
Regards,
Vijay
Try using:
<input type="submit" value="changetext" onClick="changeText(); return false;">
It looks like your page is refreshing, and that is probably why your field text disappears. If your onClick listener returns false, it will prevent this default behaviour.
you can give that textbox an id
and then run document.getElementById("textboxid").value ="success";
that will work in all browsers
<input type="text" name="txt" id="txt" value="Name" onblur="if(this.value.length == 0) this.value='Name';" onclick="if(this.value == 'Name') this.value='';" />
guy schaller
document.getElementById("textboxid").value ="success";
is good idea!
vijayakumar-n
try to save var form = document.forms['detail']; in a hidden input! then you will always be able to reach the form data..
The form gets submitted upon clicking the button that is typed as "submit" - the page gets reloaded.
Return false from the changeText() method and change onClick=changeText() to onClick="return changeText();" to prevent the form from getting submitted.
Alternatively, you can change the type of the button from "submit"to "button" to prevent submission. Then you'd have to add another submit button (even returning false will need you to find another way to submit the form).

Categories

Resources