I'm trying to see where the data's being called from. I'm not sure what 'Saved' is being referred to in the line below.
I have this line:
<input type="submit" id="submit" value="Submit" data-theme="a" onclick="showAndroidData('Saved');" />
Here is the main.js file:
$('#submit').bind('click', function(){
var getfname = $('#fname').val();
var getlname = $('#lname').val();
if(getfname == ""){
$('#fname').css('border', '3px solid yellow');
return false;
}
if(getlname == ""){
$('#lname').css('border', '3px solid yellow');
return false;
}
});
function showAndroidData(data) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var array = [fname, lname];
Android.showData(array);
};
and the .HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mobile Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="content">
<form action="#" method="post" name="justaform" id="justaform">
<div id="pinfo" data-role="fieldcontain">
<fieldset>
<legend><h3 id="formtitle">Enter Player Information</h3></legend>
<div data-role="fieldcontain">
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" placeholder="John" class="required" />
<label for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Smith" class="required" />
</div>
</fieldset>
</div>
<br />
<div data-role="fieldcontain">
<div id="submit-reset-buttons">
<input type="submit" id="submit" value="Submit" data-theme="c" onclick="showAndroidData('Saved');" />
</div>
</div>
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-1.1.15.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
But not exactly sure what 'Saved' is referring to? How is it obtaining these values inputted into the text fields?
You can remove it since it is not referenced anywhere. Don't pass that string to the function so you can improve code clarity...
<input type="submit" id="submit" value="Submit" data-theme="a" onclick="showAndroidData();" />
then remove the data parameter...
function showAndroidData() {
var fname = $('#fname').val();
var lname = $('#lname').val();
var array = [fname, lname];
Android.showData(array);
};
Related
My html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form method="">
<div class="input-1 input-box">
<label for="name">First Name :-</label>
<input type="text" id="name" name="Fname" required>
</div>
<div class="input-3 input-box">
<label for="Password">Password :-</label>
<input type="password" name="password" id="Password" required>
</div>
<div class="input-2 input-box">
<label for="father">Company :-</label>
<input type="text" name="Mname" id="Company" required>
</div>
<div class="input-4 input-box">
<label for="CTC">CTC :-</label>
<input type="Text" id="CTC" name="CTC" min="0" required>
</div>
<div class="input-4 input-box">
<label for="age">Age :-</label>
<input type="Text" id="Age" name="age" min="1" required>
</div>
<div class="input-4 input-box">
<label for="Clg">College :-</label>
<input type="Text" id="Clg" name="Clg" min="1" required>
</div>
<div class="input-5 input-box">
<label for="Gender">Gender :-</label>
<input type="text" id="Gender" name="Gender">
</div>
<div class="input-6">
<input type="submit" value="Submit" class="btn-1 btn" onclick='checkUser();'>
<input type="reset" value="Reset" class="btn-2 btn">
</div>
<script src="validation.js"></script>
</form>
</div>
<script src="validation.js"></script>
</body>
</html>
and my JavaScript , the first six condition are giving me correct result but the 7th condition not redirecting the given page
function checkUser() {
var FirstName = document.getElementById("name").value;
var UserPass = document.getElementById("Password").value;
var compName = document.getElementById("Company").value;
var UserCtc = document.getElementById("CTC").value;
var ClgName = document.getElementById("Clg").value;
var User_Gender = document.getElementById("Gender").value;
let Age_User = document.getElementById("Age").value;
// ------------------user-database----------------------------
var n = "Rahul";
var pass = "Rahul123";
var cmp = "TCS";
var ctc = "12LPA";
var date = "25years";
var clgn = "IIT";
var gen = "M";
if (
FirstName === n &&
UserPass === pass &&
compName === cmp &&
UserCtc === ctc &&
ClgName === clgn &&
User_Gender === gen &&
Age_User === date
) {
alert("Welcome back");
} else {
alert("wrong info");
}
}
I'm trying to give some form validation but not getting expected results , I'm trying to get error alert if user put wrong information and if not , then redirect some other page if user put right information .
I have this table with some dependent information that uses Javascript and there is an Add and check button to insert elements dynamically in the table and a delete button for each row to delete. When I click the "add and check" button, a set of rows gets added to the table.
Here is what I have:
Javascript and HTML Code...
<!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" xml:lang="en" lang="en">
<head>
<title>Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="contanier">
<div class="row">
<div class="col-sm-6" style="padding:20px; border-right:1px solid #000;">
<div class="form-group">
<label for="email">First Number</label>
<input type="number" name="number1" class="form-control" id="number1" min="1">
</div>
<div class="form-group">
<label for="pwd">Second Number</label>
<input type="number" name="number2" class="form-control" id="number2" min="1" >
</div>
<div class="form-group">
<label for="pwd">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" min="1" >
</div>
<button type="button" id="addbtn" class="btn btn-primary">Add and Check</button>
</div>
<div class="col-sm-6">
<h4 class="text-center">Result</h4>
<div id="main_box">
<div>
<input type="checkbox" name="style" value="classical" onchange="add()">
<label>Remove Doublets</label></div>
<table id="result" class="table table-striped">
<tbody class="tbody">
<tr>
<th>Number</th><th>Amount</th><th>Action</th>
</tr>
</tbody>
</table>
<h3>Total Amount:<span id="totl">0</span></h3>
<form action="" method="post" >
<div id="inputs">
</div>
<input type="hidden" name="user_id" value="22">
<input type="hidden" name="game_id" value="111">
<input type="submit" name="save_data" class=" btn btn-danger" value="SAVE" >
</form>
</div>
</div>
</div>
</div>
<script>
var indx=1;
var total_amount = 0;
$("#addbtn").click(function(){
var number = jQuery('#number1').val();
var number2 = jQuery('#number2').val();;
var amount = parseInt(jQuery('#amount').val());
if(number!="" && number2!="" && amount!="")
{
const arr_num_first = Array.from(String(number));
const arr_num_second = Array.from(String(number2));
for (let numOf_f_array of arr_num_first)
{
for (let numOf_s_array of arr_num_second)
{
total_amount = total_amount+amount;
var new_number = numOf_f_array+""+numOf_s_array;
$('.tbody').append("<tr class='input"+indx+"' ><td>"+new_number+"</td><td>"+amount+"</td><td><button class='dlt' data-am='"+amount+"' data-c='input"+indx+"'>X</button></td><tr>");
$('#inputs').append("<input type='hidden' name='num[]' value='"+new_number+"' class='input"+indx+"' >");
$('#inputs').append("<input type='hidden' name='amount[]' value='"+amount+"' class='input"+indx+"' >");
indx++;
}
}
$('#totl').html(total_amount);
}else{ alert('Fill all fields')}
});
$( "#main_box" ).on( "click",".dlt", function() {
var classname = $(this).attr('data-c');
var dlt_amount = parseInt($(this).attr('data-am'));
var new_total = total_amount-dlt_amount;
total_amount = new_total;
$('#totl').html(new_total);
$('.'+classname).remove();
});
</script>
</body>
</html>
I want to create a form in HTML that can take the inserted Name by the user and then after pressing submit shows the corresponded value (Age) to that user. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
The problem is that after pressing submit the Name will be shown in the myshow span section(Age:) just
for a fraction of second and then it disappeares and url changes to localhost:5000/?Name=Jack rather than localhost:5000/the current path/?Name=Jack
You should use onSubmit on the form element to call the function and then return false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
return false;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="" onSubmit="return myFunction();">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" value="Submit"><br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Ps: you did not close the submit tag properly
I think that you don't need submit.
If you don't need to submit, You have to change this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
How would one display an incorrect or correct words beside a form in any colour beside the field box when typing? I'm trying to make it so it gives me a real time correct and incorrect when I type in values that match the JS rule.
It should give a real time correct or incorrect beside the box and if it matches the rule then it displays correct
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box" >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
<!-- user id -->
<h2> Enter Info </h2>
<p> <span class="fieldName">UserID: </span>
<input type="text" id="userid" name="userid" class="input">
<span class="message"></span></p>
<!-- -->
<p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
<p> <span class="fieldName"> Codes </span>
<input type="text" id="code" name="code" class="input">
<span class="message"></span></p>
<!-- Number -->
<p> <span class="fieldName"> Course Num (XXXX): </span>
<input style="width: 4em;" id="number" type="text" name="number" class="input">
<span class="message"></span></p>
<hr>
<p style="text-align:center;"> <button id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
<p style="text-align:center;" id="formError"> <p>
</form>
</div>
</body>
</html>
JS:
window.onload = function() {
$("userid").observe("keyup", enforceID);
$("code").observe("keyup", enforcecode);
$("number").observe("keyup", enforcenumbers);
$("submitButton").observe("click", submitbtn);
}
function enforceID() {
// fucntion must start with a letter and can be any number or letter after
var re = /^[A-Z][A-Z][0-9]+/i;
}
function enforcecode() {
// Only can use these Codes
var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
var codeType = $("codeType").value;
codeType = codeType.toUpperCase();
}
function enforcenumbers() {
//Only 4 numbers allowed
var re = /^[0 -9][0 -9][0 -9][0 -9]$/
}
You can trigger the form validation on keydown event.
const form = document.getElementById('form');
document.getElementById('userid').addEventListener('keydown', event => {
form.reportValidity();
}, false);
document.getElementById('code').addEventListener('keydown', event => {
form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label>
<input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
<br />
<label for="code">Code:</label>
<input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
</form>
</body>
</html>
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>