The problem I'm having is, if the user leaves the userdata input blank, I want it to target that input and display text, notifying them that it's a required field.
I'm using innerHTML to send the message to a div or directly to the input field but nothing is displayed. I have also tried to use <p>, <span> and that did not work either. Any help is appreciated.
<!doctype html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="user1">
<div id="error"></div>
<button onClick="test()">Work</button>
</form>
<script type="text/javascript">
function test(){
var userdata = document.getElementById("user1").value;
if(userdata == ""){
document.getElementById("error").innerHTML="Please fill in Blanks";
}
}
</script>
</body>
</html>
Just change your button line in this way:
<button onClick="test();return false;">Work</button>
InnerHTML was working fine, but the default behaviour of the button was making a 'POST' request, making the page to refresh erasing the innerHtml changes. The return false statement disable this default behaviour making your code to work as it's supposed to do.
It's tested and working.
Hope It helps.
Here is the JSBIN
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
<input type="text" id="user1">
<div id="error"></div>
<button onClick="test();return false;">Work</button>
</form>
</body>
</html>
And in JavaScript add else condition also
if(userdata === ""){
document.getElementById("error").innerHTML="Please fill in Blanks";
} else{
document.getElementById("error").innerHTML="";
}
Related
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('').
I am learning javascript and we have been given the task of changing image / colour of paragraph from the click of the button. My code works but I had to add an alert() to stop it to show this as it reverts to default image/colour as soon as it runs.
function changeImage() {
var myTag=document.getElementById("imageColour");
myTag.src = "images/white.jpg";
var x = document.getElementById("demo");
x.style.color = "red";
// Had to add this to see change
alert("Has reached changeImage()");
}
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script.js"></script>
<title>Exercise 3</title>
</head>
<body>
<h3>Exercise 3</h3>
<img src="images/black.jpg" id="imageColour"/>
<form>
<button type="submit" id="mySubmitButton">Change Colour</button>
</form>
<p id="demo">Click the button to change the colour of this paragraph.</p>
</body>
</html>
<!--javascript-->
<script type="text/javascript">
document.getElementById("mySubmitButton").addEventListener("click", changeImage);
</script>
Any help appreciated.
You are submitting a form. That causes the page to be reloaded and reset.
Use type="button" (and you might as well remove the form entirely while you are at it) or call preventDefault on the event object (the first argument to changeImage).
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
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/
I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works