<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
</body>
now its working but output shows as id:name:address no entered values are displayed
You spelled alert wrong in your script
I'm not JS expert, but maybe You need <form> tags around submit form. You could also just use getelementbyid.
your alret should be alert. now it works :)
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
Related
I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(
Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});
You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/
I want to make an html where you enter a keyword.
<html>
<head>
<title>Options</title>
</head>
<body>
<input name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit">
</body>
</html>
I want to use that keyword in a javascript between these quotations
var shoeName = "";
This is for a chrome extension so on the options page I want to enter a keyword, submit it and have it automatically put it into the javascript
You can do it by setting an ID for the element and accessing the element using the ID.
HTML:
<html>
<head>
<title>Options</title>
</head>
<body>
<input id="keyText" name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit">
</body>
</html>
JS:
<script>
var shoeName = document.getElementById("keyText").value;
</script>
Happy coding.
You can get the input value using
shoeName = $("input[name='Keyword']").val(); // if you can not add id
if id can be added just do
$('#inputid").val()
or if you want data on form submit do
<form name="myForm" id="testForm" method="POST" action="send.php">
<input name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit"
</form>
var shoeName = "";
$("form[name='myForm']").submit(function(){
shoeName = $("input[name='Keyword']").val()
// other processing
});
Try this:
var shoeName;
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('keyword').addEventListener('keyup', function() {
shoeName = this.value;
});
});
Every time text is added to the textbox, shoeName is being updated.
i'm studying javascript but i can't find some clear reference about how getting and treat data out of the HTML forms.
Here an example:
THE FORM:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script></HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" > </FORM>
</BODY>
<HTML>
//HERE JAVASCRIPT Javascript BASIC.js:
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
}
I would like to know what i'm doing wrong, because nothing happen when i click submit. And which is the better solution for handling forms with javascript?? Using "action"? or which of other attributes?
The value of form elements are contained in their value attribute. Try the modified code snippet below.
Note: ("idsearched") should be without quote because it is a variable and not a string.
var idsearched=document.getElementById("id").value;
document.write(idsearched);
You must add an id attribute to the form element.
<INPUT TYPE="TEXT" NAME="id" id="id">
Use this line to manually submit your form
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
do not use document.write use document.getElementById("myID").innerHTML
a full working example like you wanted is that:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script>
</HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" id="id" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" >
</FORM>
<script type="text/javascript">
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
return false;
}
</script>
</BODY>
<HTML>
Please correct the below code it is not working as expected i.e, i need a error message to be shown just beside the textfield in the form when user enters an invalid name
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
Try this code
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn"> </div>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
I m agree with #ReNjITh.R answer but If you want to display error message just beside textbox. Just like below
<html>
<head>
<script type="text/javascript">
function validate()
{
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"/><br>
<input type=button value=check />
</form>
</body>
web masters or web programmers, please insert
<!DOCTYPE html>
at the start of your page. Second you should enclose your attributes with quotes like
type="text" id="fname"
input element should not contain end element, just close it like:
/>
input element dont have innerHTML, it has value sor your javascript line should be:
document.getElementById("fname").value = "this is invalid name";
Please write in organized way and make sure it is convenient to standards.
you can try it like this
<html>
<head>
<script type="text/javascript">
function validate()
{
var fnameval=document.getElementById("fname").value;
var fnamelen=Number(fnameval.length);
if(fnamelen==0)
{
document.getElementById("fname_msg").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<span id=fname_msg></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
You can also try this
<tr>
<th>Name :</th>
<td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td>
</tr>
function register_validate()
{
var name = document.getElementById('name').value;
submit = true;
if(name == '')
{
document.getElementById('name_error').innerHTML = "Name Is Required";
return false;
}
return submit;
}
document.getElementById('name').onkeyup = removewarning;
function removewarning()
{
document.getElementById(this.id +'_error').innerHTML = "";
}
First you are trying to write to the innerHTML of the input field. This will not work. You need to have a div or span to write to. Try something like:
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<div id="fname_error"></div>
Then change your validate function to read
if(myform.fname.value.length==0)
{
document.getElementById("fname_error").innerHTML="this is invalid name ";
}
Second, I'm always hesitant about using onBlur for this kind of thing. It is possible to submit a form without exiting the field (e.g. return key) in which case your validation code will not be executed. I prefer to run the validation from the button that submits the form and then call the submit() from within the function only if the document has passed validation.
Try like this:
function validate(el, status){
var targetVal = document.getElementById(el).value;
var statusEl = document.getElementById(status);
if(targetVal.length > 0){
statusEl.innerHTML = '';
}
else{
statusEL.innerHTML = "Invalid Name";
}
}
Now HTML:
<!doctype html>
<html lang='en'>
<head>
<title>Derp...</title>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate('fname','fnameStatus')">
<br />
<span id="fnameStatus"></span>
<br />
Last_Name
<input type="text" id="lname" name="lname" onblur="validate('lname','lnameStatus')">
<br />
<span id="lnameStatus"></span>
<br />
<input type=button value=check>
</form>
</body>
</html>
You should use .value and not .innerHTML as it is a input type form element
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").value="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
Setting innerHtml of input value wont do anything good here, try with other element like span, or just display previously made and hidden error message.
You can set value of name field tho.
<head>
<script type="text/javascript">
function validate() {
if (myform.fname.value.length == 0) {
document.getElementById("fname").value = "this is invalid name ";
document.getElementById("errorMessage").style.display = "block";
}
}
</script>
</head>
<body>
<form name="myform">First_Name
<input type="text" id="fname" name="fname" onblur="validate()"></input> <span id="errorMessage" style="display:none;">name field must not be empty</span>
<br>
<br>Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"></input>
<br>
<input type="button" value="check" />
</form>
</body>
FIDDLE
try this
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("error").innerHTML="this is invalid name ";
document.myform.fname.value="";
document.myform.fname.focus();
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate()"> </input>
<span style="color:red;" id="error" > </span>
<br> <br>
Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
You should place your script code after your HTML code and within your body tags. That way it doesn't run before the html code.