When I gave an input(text) in the textfield and the text that i input is appearing in TD and then its always gone.
first_name is the userinput
f1 is the td
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = $("#f1");
table.text(fn);
}
my submit button
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
i'm using <form> </form>
i'm wondering that my script is kinda wrong
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = document.getElementById("f1");
table.innerText = fn;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form onsubmit="return false;">
<input type="text" id="first_name" />
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
</form>
<table>
<tr>
<td id="f1"></td>
</tr>
</table>
</body>
</html>
Related
I want to display error message in label on click if the textbox is empty or undefined using AngularJS.
I am very beginner into AngularJS.
Please help to solve this issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
<div ng-controller="formController">
<label>Name: <input type="text" ng-model="user.name" /></label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</div>
<script>
angular.module('form', []).controller('formController', ['$scope', function ($scope) {
$scope.master = {};
$scope.update = function (user) {
debugger;
$scope.master = angular.copy(user);
if (user == undefined) {
debugger;
alert("Please enter text");
}
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate ng-submit="Validate()">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>
<p>
<input type="submit" ng-click="Validate()">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
$scope.user = '';
$scope.email = '';
$scope.Validate = function(){
if(!$scope.user)
$scope.ShowUserNameError = true;
else
$scope.ShowUserNameError = false;
}
});
</script>
</body>
</html>
Enclose the input in a named form, name the input, and use ng-show:
<div ng-controller="formController">
<form name="form1">
<label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
<input name="item1" type="text" required ng-model="user.name" />
</label><br />
<input type="submit" ng-click="update(user)" value="Save" />
<pre>{{master | json}}</pre>
</form>
</div>
For more information, see
AngularJS <form> Directive API Reference - Example
AngularJS Developer Guide - Forms
Is there a way to set text in a TextArea? I have four Buttons and when I click on a Button I want the text in the Button to appear in the TextArea.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="practice.css">
<script>
var elem = document.getElementById('ta1');
function displayText(e){
elem.setText(elem.getText());
}
</script>
</head>
<body>
<div>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</div>
<textarea id = "ta1" disabled rows="3" cols="50"></textarea>
</body>
</html>
I thought of creating a method displayText(e) that collects the Button text and sets it in the TextArea. But I am not sure how to access the Button text. And once I get the text, how do I save it in the TextArea? Any ideas?
So do you mean like this?
<!DOCTYPE html>
<head>
<script>
document.addEventListener('DOMContentLoaded', start, false);
function start(){
document.getElementById("button0").addEventListener("click", function(){addText(this);} );
document.getElementById("button1").addEventListener("click", function(){addText(this);} );
document.getElementById("button2").addEventListener("click", function(){addText(this);} );
document.getElementById("button3").addEventListener("click", function(){addText(this);} );
function addText(elem) {
document.getElementById("ta1").innerHTML += elem.value;
}
};
</script>
</head>
<body>
<textarea id = "ta1" disabled rows="3" cols="50">
</textarea>
<br>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</body>
</html><html>
Use the .value property to display preset text into a text area.
<!DOCTYPE html>
<html>
<body>
<textarea id="demo" cols="10" rows="20">
</textarea>
<script>
var cars = ["Saab", "Volvo", "BMW"];
for(var i = 0; i < cars.length;i++){
document.getElementById("demo").value += " " + cars[i];
}
</script>
</body>
</html>
for each button, give an onclick to a separate function and have each function look something like this:
function button1 () {
var node = document.createTextNode(x); /*var x, or whatever you want the variable
to be called will be the text you want it to display. You will have to define this in
an earlier variable already defined*/
var container = document.getElementById("ta1");
container.appendChild(node); //Appends text node to inside the TA
}
You could do it by adding "onclick" to the input statement as follows:
// add **onclick="function()"** to the button
<div>
<input class="button" type="button" id="button0" value="testing1" onclick="addText1"/>
<input class="button" type="button" id="button1" value="testing2" onclick="addText2"/>
<input class="button" type="button" id="button2" value="testing3" onclick="addText3"/>
<input class="button" type="button" id="button3" value="testing4" onclick="addText4"/>
</div>
// use stylesheet for positioning, etc.
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
//now when you click the button, it will call the respective function in the script
<script>
var text1 = "Enter text 1";
var text2 = "Enter text 2";
var text3 = "Enter text 3";
var text4 = "Enter text 4";
function addText1(){document.getElementById("text1").innerHTML += text1;}
function addText2(){document.getElementById("text1").innerHTML += text2;}
function addText3(){document.getElementById("text1").innerHTML += text3;}
function addText4(){document.getElementById("text1").innerHTML += text4;}
</script>
I have created two frames with two different forms as shown in link below:
http://demo.4page.info/framedemo/main.html (Please view in IE)
Now, when I click on Get Text button, a predefined value should display in the text box above it, and then when I click on the Copy Here button the same value from textbox1 should display in the text box above it.
So my question is how to access that value in second frames form by clicking copy here button?
Below is my code:
<!--main.html-->
<html>
<head>
<frameset cols="50%, 50%">
<frame name="f1" src="left.html" />
<frame name="f2" src="right.html" />
</frameset>
</head>
</html>
This successfully divides page into two frames.
<!--left.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
dim msg
msg="Hello"
function func()
document.form1.text1.value=msg
end function
</script>
</head>
<body>
<form name="form1">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text1" /></td></tr>
<tr><td><input type="button" value="Get Text" onClick="func()" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
left.html is working properly and accessing value on button click.
<!--right.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
</script>
</head>
<body>
<form name="form2">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text2" /></td></tr>
<tr><td><input type="button" value="Copy Here!" onClick="??????" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
What do I have to put in right.html?
You can access content of other frames via the frames property of the parent object, so something like this should work:
<script type="text/vbscript">
Sub CopyHere
document.form2.text2.value = parent.frames("f1").document.form1.text1.value
End Sub
</script>
...
<form name="form2">
<input type="text" name="text2" /></td></tr>
<input type="button" value="Copy Here!" onClick="CopyHere()" />
</form>
Note that you may need to adjust your browser's security settings for the code to work.
On a more general note I'd recommend using id attributes instead of name attributes, because the latter is deprecated.
I was wondering if there is a way to submit/write html form data to a txt file with the use of scripts but with out using a webserver, webhost, wamp, xamp etc.
I have been trying with php scripts but they just open the php document on submitting.
Any help is appreciated :D
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">Please type in this box. When you
click the Download button, the contents of this box will be downloaded to
your machine at the location you specify. Pretty nifty. </textarea>
<input type="submit" value="Download">
</form>
</body>
</html>
You can use JavaScript:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.writeline(document.passForm.input3.value);
s.Close();
}
</script>
If this does not work, an alternative is the ActiveX object:
<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>
Unfortunately, the ActiveX object, to my knowledge, is only supported in IE.
i made a little change to this code to save entry of a radio button but unable to save the text which appears in text box after selecting the radio button.
the code is below:-
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
<input type="submit" value="SAVE">
</form>
</body>
</html>
I know this is old, but it's the first example of saving form data to a txt file I found in a quick search. So I've made a couple edits to the above code that makes it work more smoothly. It's now easier to add more fields, including the radio button as #user6573234 requested.
https://jsfiddle.net/cgeiser/m0j7Lwyt/1/
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download() {
var filename = window.document.myform.docname.value;
var name = window.document.myform.name.value;
var text = window.document.myform.text.value;
var problem = window.document.myform.problem.value;
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
"Your Name: " + encodeURIComponent(name) + "\n\n" +
"Problem: " + encodeURIComponent(problem) + "\n\n" +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
<input type="text" id="docname" value="test.txt" />
<input type="text" id="name" placeholder="Your Name" />
<div style="display:unblock">
Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
<input type="text" id="problem" />
</div>
<textarea rows=3 cols=50 id="text" />Please type in this box.
When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
<input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
</form>
</body>
</html>
This is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<body background="hmm.png">
</td></tr></td></br>
<center><table id='mytable' cellspacing='0' border=3 align=center>
<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>
<tr> <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>
<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result"> </td></tr>
</form></br>
</table></center>
<script>
$("#id").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
</body>
</html>
In this form user will enter 10 numbers or characters then he clicks on submit to get the result,
But i want to make user to get result when he enter the 10th character or number with out clicking on submit
Please help me
AFTER EDITING
This is my Entire code... if i remove table it is working but with this code it is not working please help me
Sounds like a job for jQuery. With it is as simple as this:
$(document).ready(function() {
$("#id").keyup(function() {
if ($(this).val().length >= 10) {
$("#form").submit();
}
});
};
Of course you might want to fire an ajax request instead of submitting,
but that's up to you ...
I think that the use of JavaScript (with jQuery) will solve this one. If you attach a Javascript key press event handler to the tag and use this to count the number of characters entered. When the count reaches 10 then you can submit the form again using JavaScript.
Good luck with this.
write a callback on keyup on input, check if value has length 10, submit the form..
<form id="form" action="#" method="post" name="result" style="align:center;">
<td>
<p align="center">Hall Ticket No :</p>
<input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
</td>
<td>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
</td>
</form>
<script>
$("#input_field").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
Working Example