There is a form with 2 inputs and a button that resets the inputs. When the button is clicked, how can I make first input unchanged (i.e it should not reset the value). How can I achieve it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add-More example - fileuploader - Innostudio.de</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></script>
</head>
<body>
<div class="file-loading" style="margin: 50px;">
<form>
<input id="no_reset" type="text">
<input id="input-fa" type="text">
<button type="reset" onclick="removeReset()">
<i class="fas fa-sync"></i>submit
</button>
</form>
</div>
<script>
function removeReset() {
//it doesn't work
document.getElementById("no_reset").value = "dont reset";
}
</script>
</body>
</html>
If you have a lot of input, you can reset all fields except ones with a custom attribute.
Take a look at a sample vanilla js implementation :
function customReset()
{
var fieldsToReset = document.querySelectorAll("input:not([data-noreset='true'])")
for(var i=0;i<fieldsToReset.length;i++){
fieldsToReset[i].value = null;
}
}
<form id="myForm">
<input id="txt1" name="txt1" /> : should reset<br/>
<input id="txt2" name="txt2" /> : should reset<br/>
<input id="txt3" name="txt3" /> : should reset<br/>
<input id="txt4" name="txt4" data-noreset="true" /> : <strong>won't reset</strong><br/>
<button type="button" onclick="customReset()">
Reset
</button>
</form>
Pay attention to the type="button" attribute. This is required to neither reset the form nor submit it.
Related
This question already has answers here:
reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
(2 answers)
Closed 1 year ago.
I am creating a project and want to print data that I put in input field on to hard copy ...
How can I do that?
for example:
If I have a table with input fields and I will input data into the field using browser, now, as soon as I am done with input, I want to print that information. (CODE UNDER), I took this code from W3schools: When I press print button, it prints the webpage.. but it does not print the information that is given to it...
How can I do that>
Here my code:
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname">
<br> Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.print();
newwin.close();
}
</script>
</body>
</html>
'''
You are copying over the HTML, but not the field values, the code below will do the trick.
See that the input fields now have Id's and we copy them over right before newwin.print()
<!DOCTYPE html>
<html>
<title>Print form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form method="post" action="" id="myfrm">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" id="first">
<br> Last name:<br>
<input type="text" name="lastname" id="last">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
function myPrint(myfrm) {
var printdata = document.getElementById(myfrm);
newwin = window.open("");
newwin.document.write(printdata.outerHTML);
newwin.document.getElementById("first").value = document.getElementById("first").value;
newwin.document.getElementById("last").value = document.getElementById("last").value;
newwin.print();
newwin.close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title> Calculator </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Bria's Calculator</h1>
</header>
<div id="container">
<form name="calculate">
<input id="input" type="text" name="output" placeholder="0"><br/>
<input id="button1" type="button" value="1"/>
<input id="button2" type="button" value="2"/>
<input id="button3" type="button" value="3"/>
<input id="button/" type="button" value="/"/> <br/>
<input id="button4" type="button" value="4"/>
<input id="button5" type="button" value="5"/>
<input id="button6" type="button" value="6"/>
<input id="button*" type="button" value="*"/><br/>
<input id="button7" type="button" value="7"/>
<input id="button8" type="button" value="8"/>
<input id="button9" type="button" value="9"/>
<input id="button-" type="button" value="-"/><br/>
<input id="button(" type="button" value="("/>
<input id="button)" type="button" value=")"/>
<input id="button0" type="button" value="0"/>
<input id="button+" type="button" value="+"/><br/>
<input id="buttonc" type="button" value="c" style="background:red;"/>
<input id="button." type="button" value="."/>
<input id="button=" type="button" value="="/>
<input id="button%" type="button" value="%"/><br/>
</form>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
const input=document.getElementById("input");
const container=document.getElementById("container");
const calc =document.getElementById("button=");
container.addEventListener("click", function(e){
buttonClick(e.target.id);
});
//use event parameter of target to identify what's inside the id which are the buttons
calc.addEventListener("click", operate);
function buttonClick(buttonId){
if ((buttonId !="buttonc") && (buttonId !="button=")){
let button=document.getElementById(buttonId);
let tmp=buttonId;
tmp=tmp.replace("button", "");
entries(tmp);
}
};
//use 'replace' so when buttons are clicked it removes preface(button) and the id is just a number in the string format
function entries(tmp){
input.value += tmp;
}
//concatenating values entered by pressing buttons within container
function operate (){
if(input.value=="."){
alert("Please enter a math equation");
}
}
So far I've been able to get the numbers to concatenate in a string but now I need to actually operate on them. TOP discourages the use of eval so I just wanted to know how I could set up a function to add, divide, multiply and subtract the numbers I'm calling in the input form without eval(). I've provided my HTML code for context.
You have a few options to convert your concatenated string to a number depending on the inputs you expect. I would recommend one of these 2:
parseFloat() - will convert a string with decimal points to a floating point number.
parseInt(x,10) - will convert a string's integer value to an integer (will not process any decimal points). Notice the second argument (10).
Here is My code:
HTML Portion
<form id="myform" action="whatever.php">
<lable name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
jquery Code:
(function($){
$('#myform').on('click', '#submit', function(e) {
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
e.preventDefault();
});
})(jQuery);
Output:
1.undefined.
2.undefined.
3.undefined.
On your code this inside the callback function points to the button with id #submit not the form itself.
You could just use the submit event, and your code will work fine
(function($){
$('#myform').on('submit', function(e) {
e.preventDefault();
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
});
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<ol class="list"></ol>
<form id="myform" action="whatever.php">
<label name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Then element with id in is child element of form element not the submit button.
You need to do the following by getting to parent form element and then find inside that your element as your input element is not in the submit button :
var val = $(this).closest("form").find('#in').val();
$(this).closest("form") will select the form and then find('#in') will select the element with id in and then val() will get the value of it.
See the working DEMO fiddle
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.