I have a textbox and save button. If anything changed on textbox then only save button should be enabled. I am able to take care this using javascript event, but when i select some text and right click and delete that selected text then, I do not get any event. Below is my sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var hiddenfield = document.getElementById("hide").value;
var textboxval = document.getElementById("me").value;
if (textboxval != hiddenfield) {
document.getElementById("xx").disabled = false;
} else {
document.getElementById("xx").disabled = true;
}
}
function load() {
document.getElementById("hide").value = document.getElementById("me").value;
}
</script>
</head>
<body onload="load();">
<input id="me" type="text" value="test test" onkeyup="myFunction()" onmouseup="myFunction()"
onmousedown="myFunction()">
<input type="button" id="xx" value="Save" disabled="disabled" />
<br>
<input id="hide" type="hidden" value="">
</body>
</html>
Is there way to detect if user delete the text via right button click?
Try onchange, since the context-menu control changes the contents.
Related
I need to validate the integrity of my email and I am doing it by pressing a "validate" button.
I wonder if there is a way to do the same without pressing a button? Say, just exiting the email field, clicking another field for example (field2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Text Input Field Value in JavaScript</title>
</head>
<body>
<p >Enter an email address:</p>
<input type="text" placeholder="Type your email here..." id="myInput">
<br>
<input type="text" placeholder="Field 2" id="field2">
<br>
<button type="button" onclick="getInputValue();">Validate</button>
<script>
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.getElementById("myInput").value;
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// return re.test(inputVal);
resultat = re.test(inputVal);
// document.write(resultat);
if (resultat) {
alert(inputVal+" is valid");
} else {
alert(inputVal+" is NOT valid");
}
return false;
}
</script>
</body>
</html>
You could use the built in functionality of html via
<input type="email" required>
If you then applied css through the pseudo-class :invalid, you would see a visual hint.
input:invalid {
background-color: #ffdddd;
}
Check these ressources:
https://developer.mozilla.org/de/docs/Web/CSS/:invalid
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
Look at onBlur event
const onBlur = () => {
const test = document.getElementById("test");
// here you have your value
test.value = test.value.toUpperCase();
}
<input type="text" id="test" onblur="onBlur()">
Hellma's answer is correct, HTML has this functionality and you'd be hard pressed to come up with an implementation better than the browsers. That said, if you need additional validation on top of what the browser provides you could use the blur event. Instead of the onclick attribute on your button, you could add an onblur attribute to your input to run the getInputValue function whenever the user's focus leaves that input element. This would look like
<input type="text" placeholder="Type your email here..." id="myInput" onBlur="getInputValue()">
You can use the keyUp event, try this:
function validate(e){
inputText = e.target.value;
console.log(inputText);
if(inputText == 'condition'){
console.log('condition passed!')
}
}
<input onkeyup="validate(event)">
I was wondering if i can call two functions at the onclick of a button? Basically what i have is a form which submit button calls a function which saves the field values into localstorage. What i want to do is when the user clicks the save button, the data will be INSERTED into a MSYQL database. How can i do that? As with that button i am calling save() function which saves them at the localstorage. Can more than one function be called on one button onclick? Below is my code -
<!DOCTYPE HTML>
<html>
<head>
<title>Localstorage Test</title>
<script type="text/javascript">
function save(){
var fieldvalue = document.getElementById('textfield1').value;
var fieldvalue1 = document.getElementById('textfield2').value;
var fieldvalue2 = document.getElementById('textfield3').value;
localStorage.setItem('text',fieldvalue);
localStorage.setItem('text1',fieldvalue1);
localStorage.setItem('text2',fieldvalue2);
}
function load(){
var storedValue = localStorage.getItem('text');
var storedValue1 = localStorage.getItem('text1');
var storedValue2 = localStorage.getItem('text2');
if(storedValue){
document.getElementById('textfield1').value = storedValue;
}
if(storedValue1){
document.getElementById('textfield2').value = storedValue1;
}
if(storedValue2){
document.getElementById('textfield3').value = storedValue2;
}
}
</script>
</head>
<body onload="load()">
<input type="text" id="textfield1" />
<input type="text" id="textfield2" />
<input type="text" id="textfield3" />
<input type="submit" value="Save" onclick="save()">
</body>
</html>
It is possible to call more than one function in onclick event:
<input type="submit" value="Save" onclick="save(); alert('hello!');">
I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>
But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?
The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work
<input type="button"name="button" id="button" onclick="myfunction()" />
The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.
Call event.preventDefault() to prevent the normal form submission.
function myfunction(e) {
e.preventDefault();
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>
I'm working on a web form with a textbox for pets and an "add pet" button. Each time the button is clicked, an additional textbox should be displayed below the original one.
I'm assuming this would be accomplished with an onclick event, but I can't figure out how to get it to work.
Here is the code I have so far:
<html>
<head>
<title>Project 4</title>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Pets: <input type="text" id="pets">
<input type="button" id="addPet" value="Add Pet">
<br>
</form>
<script type="text/javascript">
function makeCopy() {
var copy = <input type="text">;
return copy;
}
</script>
</body>
</html>
There are other pieces to this as well, but none of them affect this particular problem I am having so didn't see the need to include the full code as it's fairly long.
Any suggestions are greatly appreciated.
Update:
I realize after reading the answers that I should've included more of my code to give you guys a better idea of the actual layout of my page. I have several text fields in my form and need the additional textboxes to be displayed right below the original "pets" textbox. Here's a jfiddle I threw together to give you guys a better idea of the layout. http://jsfiddle.net/a5m8nqwk/
Something like this?
<form name="myForm" id="myForm" onsubmit="return validateForm()">
Pets: <br />
<input type="text" id="pets" />
<input type="button" id="addPet" value="Add Pet" />
<br/>
</form>
document.getElementById("addPet").onclick = function() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
input.type = "text";
var br = document.createElement("br");
form.appendChild(input);
form.appendChild(br);
}
Edit: I'd suggest using a table to style the input boxes, keep them in line. FIDDLE
You could easily add elements to the DOM:
function createPetField() {
var input = document.createElement('input');
input.type = 'text';
input.name = 'pet[]';
return input;
}
var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
form.appendChild(createPetField());
});
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
var text = document.getElementById("textId");
//Append the element in page (in span).
text.appendChild(element);
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Adding textbox on button click with javascript</b>
<br><br>
<form>
<input placeholder="text" name="element" hidden> </input>
<input type="button" value="Click Me" onclick="add(document.forms[0].element.value)"/>
<span id="textId"> </span>
</form>
I have three forms on a page with submit buttons in each, there is a code which is suppose to changes the value of a button in a particular form when clicked but when i click on that submit button all the values in the various forms buttons changes, but i want to change the value based on the form i click
<script language="javascript">
/**
* Disable submit button
*/
$(function(){
$('input:submit').click(function(){
$(this).val('Request Placed...');
$(this).attr('disabled', 'disabled');
$(this).parents('form').submit();
});
});
$(window).load(function(){
$('input:submit').removeAttr('disabled');
});
</script>
Use jQuery selector to select only form that you need, only input from form with id="form_2" will be supported
$(function(){
$('input:submit', '#form_2').click(function(){
$(this).val('Request Placed...');
$(this).attr('disabled', 'disabled');
});
});
jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/sP2Zv/2/
I am not sure about your requirements. However, this demo might give you some ideas to resolve your issues.
HTML:
<form id="form1" action="action1">
<input type="text" id="txt1" />
<input type="submit" value="Submit" />
</form>
<form id="form2" action="action2">
<input type="text" id="txt2" />
<input type="submit" value="Submit" />
</form>
<form id="form3" action="action3">
<input type="text" id="txt3" />
<input type="submit" value="Submit" />
</form>
JavaScript:
(function () {
var $submitBtn,
$form,
submitBtnHandler = function (event) {
event.preventDefault();
var $self = $(this);
$self.val('Request Placed...');
$self.prop('disabled', true);
$self.parents('form').submit();
},
formSubmitHandler = function (event) {
event.preventDefault(); // Added this to stay in the same page when submit form. If you want to redirect to the action URL(action1, action2, action3 etc), please remove it.
alert("Hi, I am " + this.id);
},
resetSubmitBtnState = function () {
$submitBtn.removeAttr('disabled');
},
init = function () {
$submitBtn = $('input:submit');
$form = $('form');
$submitBtn.on('click', submitBtnHandler);
$form.on('submit', formSubmitHandler);
};
$(document).ready(init);
$(window).load(resetSubmitBtnState);
}());
JSFiddle Demo: http://jsfiddle.net/w3devjs/3Byb2/
In JavaScript you could do this,
document.getElementById("BUTTON'S ID").value = "TEXT HERE";
Just make that line an onclick one.
So, when the user clicks the button, an onclick event happens, that will change the button's vaule. Be sure that in the input tag, there is an id for the button as well as a value for it.
So, here's a little example I whipped up,
In HTML,
<form>
<input type="text" id="Input" />
<input type="button" id="BUTTON'S ID" value="TEXT HERE" onclick="Changetxt()" />
</form>
In JavaScript,
<script>
function Changetxt()
{
document.getElementById("BUTTON'S ID").value = "SOME OTHER TEXT";
}
</script>
So, when the user clicks the button, the button's text changes from TEXT HERE to SOME OTHER TEXT.