remove focus from an HTML element on load - javascript

I am using this theme for my website and I have customised its contents. I have added one more slide (fragment), on for login form. However, due to the username input field in this form, whenever the page loads, the focus shifts from home fragment to this username field and the page looks skewed. I tried adding a hidden field hiddenfield in the first home fragment and writing
<body onload="setfocus()">
where setfocus() is
function setfocus() {
document.getElementById("hiddenfield").focus();
}
but it didn't work.
In short, I need to remove the default focus from an inputbox on page and give it to a fragment. How to do this? Please help as I need to fix this issue immediately.

I haven't been able to reproduce the default focus to the input field, but if you add an id attr to the element you want to be at the top of the page, you should be able to navigate to it after the page loads.
<html>
<head>
<script type="text/javascript">
window.onload = function(){
window.location.hash = '#divToFocus';
}
</script>
</head>
<body>
<div id="divToFocus">fasdfsdfsd</div>
<form action="action">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>

JsFiddle
Try this in either <script> tags or seperate .js file.
(function() {
document.getElementById("hiddenfield").focus();
})();
or:
<!DOCTYPE html>
<html>
<head>
<script>
function setFocus()
{
document.getElementById("hiddenfield").focus();
}
</script>
</head>
<body onload="setFocus()">
<!-- stuff here -->
</body>
</html>

Try window.focus() instead of the hidden element

Related

Val(" ") Not Removing Text From Text Box

In my HTML file, I have code which takes input in a text box and then displays it on the page without re-loading the page. I am using JQuery to do this. However, the line in the code which is supposed to remove the text from the text box is not working. Please see below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("input.submit").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
Text from "" is taken to the placetextfromboxes function and put in the variable "textFrombox". However, the line "$("input.submit").val("");" is supposed to erase the text from the box but it is not being erased. Is there anything that I am missing?
As per azro's suggestion in the comments, changing $("input.submit") to $("#yg") produces the effect you're looking for.
For convenience, the correction is offered in the snippet below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("#yg").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
It appeared to me as though $("input.submit") had been intended to select the submit button.
Changing the value to $("input") or $("input[type=submit]") successfully selected it but, as you may guess, it simply erased the text in the button when clicked.
Changing to $("#yg").val(""), successfully erases the text in the textarea and does not affect the value stored in the textFrombox variable.
input.submit would target an input element with class submit. What you have instead is attribute type of value submit. Therefore, to select this you'd need to do input[type=submit].
But it looks like you just want $('#yg').val('').

JavaScript redirect just before submitting form and opening new tab

I have a situation where I need to open a new tab to an external site when the user clicks "submit" on a form, and at the same time I need to redirect the original tab to a different page to prevent the user making multiple duplicate requests to the external site.
NOTE: I have protected against this behaviour in the back-end, I just want to use JavaScript to improve the UX where possible, removing the rendering of the option in the first place.
NOTE2: This works in Firefox, but not in Chrome or Safari.
Some example code which illustrates my issue is shown below:
<script type="text/javascript">
function testFunction(){
alert("Executing testFunction()!");
window.location.replace("http://www.google.com");
}
// uncomment this line to show that testFunction() does work when called directly
//testFunction();
</script>
<html>
<head>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction()">
</form>
</body>
</html>
When I click submit, I observe the alert popping up, but the redirect does not execute.
If I uncomment the line which calls testFunction() directly, it works as expected.
How can I get the behaviour I'm looking for?
This is what I managed to come up with after a bit of tinkering around. You can pass the click event from onclick into your handler function. If you let the event happen, it will just submit the form and prevent all following execution, that is why I stopped the original click event with preventDefault and triggered form.submit() programmatically.
Also notice how I wrapped the redirect inside a setTimeout to give time to the submit() to actually happen before the redirect.
<html>
<head>
<script type="text/javascript">
function testFunction(e) {
e.preventDefault();
e.target.parentNode.submit();
alert("Executing testFunction()!");
setTimeout(function() {
document.location.href = "http://www.google.com";
}, 0);
}
// uncomment this line to show that testFunction() does work when called directly
// testFunction();
</script>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction(event)">
</form>
</body>
</html>

Display input title only "onclick" event

I'm having trouble in displaying my title input only "onclick" event.
When we mouseouver the input box, it will display the title, but i just want this to happen when I click on the input box.
My idea is displaying a title saying "value copied", cause I have a function on "onclick" event that copy the input (read only) value to the clipboard, and when it's done I want to let the user know that this happen displaying that information.
Is that even possible?
(this is for a windows gadget)
Thank you to everyone.
Try .focus()
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
http://api.jquery.com/focus/

Repopulating form fields with javascript

Hi Sorry I'm newbie in Javascript but I need to know how I can do to repopulate a form field when I have this kind of form :
I tried with this code(part) but it doesn't work,the file name is 'testjavascript.html'
<head>
<script language="javascript" type="text/javascript">
function updateUsername(){
var first = document.getElementById("first").value;
document.getElementById("first").value = first;
} </script>
</head>
<body>
<form action="action.php" method="post">
<input type="text" name="usename" value="" id="first" >
Link
<input type="submit" name="submit">
</form>
</body>
This behavior needs to be on the server side. When you change page, the browser will reload your javascript code and you will lose all references.

javascript/jquery - Hide element in parent tab controlled from pop up window part 2

Can somebody help me with this?
I have a parent window and a pop up window. I want them to communicate, but there is something wrong with the code. please advise me for javascript or jquery. I just want the popup to control the parent window too.
My index.html
<html>
<head>
<script>
function openwindow() { window.open("pop.html","mywindow","menubar=1,resizable=1,width=400,height=400"); }
</script>
</head>
<body>
Show pop up!
</body>
</html>
then after we click the anchor , pop will show. here is the pop up code with form:
popup code:
<html>
<head>
<script>
function clicked(){window.opener.document.getElementById('will-hide-in-pop').style.display="none"; }
</script>
</head>
<body>
<div>
<form action="process.php" method="GET">
<input type="text" name="text" />
<input type="checkbox" name="cbox" />
<input type="submit" name="" onclick="clicked()"/>
</form>
</div>
</body>
</html>
did I put a right code?
I just want it if the form is submitted, the anchor in the parent window will also vanish
please help me
Try invoking your function in jQuery submit:
$(document).ready(function () {
$('form').submit(function () {
clicked();
});
});
take care about selector: .getElementById('will-hide-in-pop') in popup, you use getElementById, but in index, there is class="will-hide-in-pop".

Categories