I am learning Javascript and trying to create something today. I have a text box, submit button and a hidden p tag called "demo". I want user to enter either number or text. If the user enter number it will then do one thing and if user text it will do another thing. Please see the code (any input will help...):
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Practice.aspx.cs" Inherits="Javascript.Javascript.Practice" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function takeAction(){
var x = document.getElementById("textId").value;
// var y = document.getElementById("demo").innerHTML=("You entered "+x + ".");
if (x == Number) {
function numberFunction() {
switch (x) {
case 1:
document.getElementById("demo").innerHTML = ("You entered " + x + " and your number is 1.");
break;
case 2:
document.getElementById("demo").innerHTML = ("You entered " + x + " and your number is 2.");
break;
default:
document.getElementById("demo").innerHTML = ("You entered " + x + " and your number is not between 1 & 2.");
break;
}
}
if (x == Text) {
function textFunction() {
switch (x) {
case "John":
document.getElementById("demo").innerHTML = ("You are " + x + " and you are number 1 position.");
break;
case "Chris":
document.getElementById("demo").innerHTML = ("You are " + x + " and you are number 2 position.");
break;
default:
document.getElementById("demo").innerHTML = ("You are " + x + " and you are number not a member.");
break;
}
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Please enter something: </label>
<input type="text" id="textId" />
<button id="btn" onclick="takeAction()">Submit</button><b />
<p id="demo"></p>
</div>
</form>
</body>
</html>
I guess you can use like this
HTML:
<form id="form1" >
<div>
<label>Please enter something: </label>
<input type="text" id="textId" />
<button id="btn" onclick="takeAction()">Submit</button><b />
<p id="demo"></p>
</div>
</form>
JS:
function takeAction() {
var x = document.getElementById('textId').value;
function numberFunction(number) {
var y = number;
switch (parseInt(y)) {
case 1:
document.getElementById('demo').innerHTML = ("You entered " + y + " and your number is 1.");
break;
case 2:
document.getElementById('demo').innerHTML = ("You entered " + y + " and your number is 2.");
break;
default:
document.getElementById('demo').innerHTML = ("You entered " + y + " and your number is not between 1 & 2.");
break;
}
}
function textFunction(text) {
var y = text;
switch (y) {
case "John":
document.getElementById('demo').innerHTML = ("You are " + y + " and you are number 1 position.");
break;
case "Chris":
document.getElementById('demo').innerHTML = ("You are " + y + " and you are number 2 position.");
break;
default:
document.getElementById('demo').innerHTML = ("You are " + y + " and you are number not a member.");
break;
}
}
if (isNaN(x)) {
textFunction(x);
} else {
numberFunction(x);
}
}
Another way I have done it in the past
var validNumbers = "0123456789";
var number = true
for(var i = 0;i<x.length;i++){
character = x.charAt(i);
if (validNumbers.indexOf(character) == -1){
number = false;
}
}
if(number) {
//It is a number
}
else {
//It isn't a number
}
Here is where I got the code from I was trying to do a similar thing to you. (sorry about the lack of indentation):
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
var number = true;
var validNumbers = "0123456789";
var character;
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
number = true
for(var i = 0;i<document.ExamEntry.examNumber.value.length;i++){
character = document.ExamEntry.examNumber.value.charAt(i);
if (validNumbers.indexOf(character) == -1){
number = false;
}
}
if (document.ExamEntry.examNumber.value.length != 4||number==false){
msg+="You must enter your examination number correctly \n";
document.ExamEntry.examNumber.focus();
document.getElementById('examNumber').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examNumber">Examination Number</td>
<td><input type="text" name="examNumber" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
Related
Whenever I try doing the code myself, nothing shows up after I run the function, I'm wanting to add all the numbers from 'fkWynik'.
function mat_WypiszLiczbyNaturalne() {
var T = "";
T = document.getElementById('fkEdit').value;
if ((T.trim() != "") && (Number(T) > 0)) {
var S = "";
for (var I = 1; I < Number(T) + 1; I++) {
S = S + ", " + I.toString();
}
document.getElementById('fkWynik').value = S.substr(2) + " = ";
} else {
document.getElementById('fkWynik').value = "Prosze wprowadzic liczbe!";
}
}
<html>
<body>
<FORM NAME="formularz1" ACTION="">
<TABLE BORDER="0">
<INPUT TYPE="number" ID="fkEdit" STYLE="height:24px; width:55px;">
<INPUT TYPE="button" ID="fkWykonaj" VALUE="Wykonaj" onClick="mat_WypiszLiczbyNaturalne();"> </TD>
</TR>
<TR><TD> <INPUT TYPE="text" ID="fkWynik" STYLE="width:545px; height:24px;" READONLY> </TD></TR>
</TABLE>
</FORM>
</body>
</html>
You need to add the numbers together and concat it to the string:
function mat_WypiszLiczbyNaturalne() {
var T = "";
T = document.getElementById('fkEdit').value;
if ((T.trim() != "") && (Number(T) > 0)) {
var S = "";
var total = 0
for (var I = 1; I < Number(T) + 1; I++) {
S = S + ", " + I.toString();
total += I;
}
document.getElementById('fkWynik').value = S.substr(2) + " = "+total.toString();
} else {
document.getElementById('fkWynik').value = "Prosze wprowadzic liczbe!";
}
}
<html>
<body>
<FORM NAME="formularz1" ACTION="">
<TABLE BORDER="0">
<INPUT TYPE="number" ID="fkEdit" STYLE="height:24px; width:55px;">
<INPUT TYPE="button" ID="fkWykonaj" VALUE="Wykonaj" onClick="mat_WypiszLiczbyNaturalne();"> </TD>
</TR>
<TR><TD> <INPUT TYPE="text" ID="fkWynik" STYLE="width:545px; height:24px;" READONLY> </TD></TR>
</TABLE>
</FORM>
</body>
</html>
The following should work if your HTML code contains an element with the property id="fkWynik"
function mat_WypiszLiczbyNaturalne() {
var elem = document.getElementById('fkEdit');
if(!elem) {
console.error("No element with id 'fkEdit' in the page.");
return;
}
var T = elem.value;
var value = "";
if (T && !isNaN(Number(T))) { // if T not null, not empty, not undefined, not 0 and is a number
var S = "";
for (var I = 1; I < Number(T) + 1; I++) {
S = S + ", " + I.toString();
}
value = S.substr(2) + " = ";
} else {
value = "Proszę wprowadzić liczbę!";
}
console.log("value: " + value);
document.getElementById('fkWynik').value = value;
}
mat_WypiszLiczbyNaturalne();
Good Morning,
Does anyone know how to correct the code below? First, I prompt the user for the variables first and second but am failing to have them display on the form. Second, when the user clicks on the Determine the larger number button it is supposed to run the if and else if statement located under the function determineLarge(){ but it fails to run. My apologies as I am learning at the university to code this language. Thank you for the help.
<script>
function determineLarge(){
let first = prompt ("Enter the first number.");
first= document.myForm.first.value;
let second = prompt("Enter the second number.");
second =document.myForm.first.value;
first = parseFloat(first);
second = parseFloat(second);
let message = "";
if (first <0 || second <0){
message = "You can't use negative numbers.";
}
else if (first > second){
message = "The second number" + "(" + second + ")" + " is smaller.";
}
else if (second > first) {
message = "The first number" + "(" + first + ")" + " is smaller.";
}
else if (first == second || second==first){
message = "The first number" + "(" + first + ")" + " is smaller.";
}
document.getElementById("results").innerHTML = message;
}
</script>
</head>
<body>
<h1>Gary's Smaller of Two Numbers</h1>
<form name="myForm">
<p> Enter the first number</p>
<input type="number" name="first" value="" onclick="javascript:determineLarge();">
<p>Enter the second number</p>
<input type="number" name="second" value="" onclick="javascript:determineLarge();">
<button type="button" onclick="determineLarge();">Determine the larger number</button>
</form>
<div id="results"> </div>
</body>
I separated the getting of the values and processing of them into two functions.
I put the prompts in a while loop so you are forced to enter in a real value greater than zero.
Also you overwrite the first and second variables by keeping the variable name first ie: first = .... instead of document.myform.value == first etc..
first = -1;
second = -1;
function getValues(){
while(isNaN(first) || first == "" || first < 0){
first = prompt ("Enter the first number.");
}
while(isNaN(second) || second == "" || second < 0){
second = prompt ("Enter the second number.");
}
document.myForm.first.value = first;
document.myForm.second.value = second;
}
function determineLarge(){
let message = "";
if (first > second){
message = "The second number" + "(" + second + ")" + " is smaller.";
}
else if (second > first) {
message = "The first number" + "(" + first + ")" + " is smaller.";
}
else if (first == second || second==first){
message = "The first number" + "(" + first + ")" + " is smaller.";
}
document.getElementById("results").innerHTML = message;
}
<h1>Gary's Smaller of Two Numbers</h1>
<form name="myForm">
<p> Enter the first number</p>
<input type="number" name="first" value="" onclick="javascript:getValues();">
<p>Enter the second number</p>
<input type="number" name="second" value="" onclick="javascript:getValues();">
<button type="button" onclick="determineLarge();">Determine the larger number</button>
</form>
<div id="results"> </div>
I removed the prompt so that the inputs can be used. No need to call onClick on the text input.
<script>
function determineLarge(myForm) {
var first = myForm.first.value;
var second = myForm.second.value;
console.log(first, second)
first = parseFloat(first);
second = parseFloat(second);
let message = "";
if (first < 0 || second < 0) {
message = "You can't use negative numbers.";
} else if (first > second) {
message = "The second number" + "(" + second + ")" + " is smaller.";
} else if (second > first) {
message = "The first number" + "(" + first + ")" + " is smaller.";
} else if (first == second || second == first) {
message = "The first number" + "(" + first + ")" + " is smaller.";
}
document.getElementById("results").innerHTML = message;
}
</script>
</head>
<body>
<h1>Gary's Smaller of Two Numbers</h1>
<form name="myForm">
<p> Enter the first number</p>
<input type="number" name="first" value="">
<p>Enter the second number</p>
<input type="number" name="second" value="">
<button type="button" onclick="determineLarge(this.form);">Determine the larger number</button>
</form>
<div id="results"> </div>
</body>
I am working on a student registration form such that when a student fills the necessary information using a multi step form and submits, the filled information will be submitted to the database.
However, anytime I submit the filled information, the values will be inserted into the database including another complete row of null values.
I have tried to fix this thing but don't know where the problem is.
This is StudentSignup.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%#page import="java.sql.*"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript">
var xmlHttp;
<%--JavaScript on Academic Information Dropdown Using XmlHttpRequest--%>
function showDepartment(str) {
if (typeof XMLHttpRequest !== "undefined") {
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp === null) {
alert("Browser does not support XMLHTTP Request");
return;
} else {
var url = "departmentDBConnection.jsp";
url += "?progOfStudy=" + str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
}
function stateChange() {
if (xmlHttp.readyState === 4 || xmlHttp.readyState === "complete") {
document.getElementById("department").innerHTML = xmlHttp.responseText
;
}
}
function showFaculty(str) {
if (typeof XMLHttpRequest !== "undefined") {
xmlHttp = new XMLHttpRequest();//create XMLHttpRequest object
}
else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp === null) {//If the browser doesn't support Ajax, exit now
alert("Browser does not support XMLHTTP Request");
return;
} else {
var url = "facultyDBConnection.jsp";
url += "?progOfStudy=" + str;
xmlHttp.onreadystatechange = stateChange1;
xmlHttp.open("GET", url, true);//Initiate the XMLHttpRequest object
xmlHttp.send(null);//Send the Ajax request to the server with the GET data
}
function stateChange1() {
if (xmlHttp.readyState === 4 || xmlHttp.readyState === "complete") {
document.getElementById("faculty").innerHTML = xmlHttp.responseText
;
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="StudentSignUp.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Student Login</title>
</head>
<body>
<div id="wrapper">
<div id="headwrap">
<header>
<h1>School Name</h1>
<h3>Knowledge for development and unity</h3>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<img src="images/kasulogo.jpg" />
</div>
</div>
<aside id="logsite">
<center>
<!--form name="form1" id="regForm" action="StudentCreateAccount.jsp"-->
<!--form id="regForm" method="post" onSubmit="submitForm(this);return false;"-->
<form id="regForm" >
<table cellspacing="5" border="0">
<thead>
<tr>
<th colspan="2" ><b><center id="CreateHead">Create a New Account</center></b></th>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<!-- One "tab" for each step in the form: -->
</table>
<div class="tab"><b><center>Personal Information:</center></b>
<table>
<tr>
<td colspan="2"><hr/></td>
</tr>
</table>
<table>
<tr>
<td>Matriculation*</td>
<td><input placeholder="" oninput="this.className = ''" name="MatricNo" required=""></td>
</tr>
<tr>
<td>First Name*</td>
<td><input placeholder="" oninput="this.className = ''" name="FName" required=""></td>
</tr>
<tr>
<td>Last Name*</td>
<td><input placeholder="" oninput="this.className = ''" name="LName" required=""></td>
</tr>
<tr>
<td>Other Names</td>
<td><input placeholder="" oninput="this.className = ''" name="OName"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input placeholder="" oninput="this.className = ''" name="Email"></td>
</tr>
<tr>
<td>Phone Number*</td>
<td><input placeholder="" oninput="this.className = ''" name="Phone"></td>
</tr>
</table>
</div>
<div class="tab"><b><center>Academic Information:</center></b>
<table>
<tr>
<td colspan="2"><hr/></td>
</tr>
</table>
<table>
<tr>
<td>Programme*</td>
<!-- <td><p><input placeholder="" oninput="this.className = ''" name="Department"></p></td> -->
<td><p>
<select name='ProgOfStudy' onchange="showDepartment(this.value)">
<option value="none">--Select Programme--</option>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/cmsdb", "root", "");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from programmeofstudy");
while (rs.next()) {
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>
<%
}
%>
</select>
<p></td>
</tr>
<tr>
<td>Department*</td>
<td><p>
<div id='department'>
<select name='Department' >
<option value='-1'>--Select Department--</option>
</select>
</div>
<p></td>
</tr>
<tr>
<td>Faculty*</td>
<td><p>
<div id='faculty'>
<select name='Faculty' >
<option value='-1'>--Select Faculty--</option>
</select>
</div>
<p></td>
</tr>
</table>
</div>
<div class="tab"><b><center>Login Info:</center></b>
<table>
<tr>
<td colspan="2"><hr/></td>
</tr>
</table>
<table>
<tr>
<td>Password*</td>
<td><input type="password" placeholder="" oninput="this.className = ''" name="Password"></td>
</tr>
<tr>
<td>Retype Password*</td>
<td><input type ="password" placeholder="" oninput="this.className = ''" name="rePassword" oninput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')"></td>
</tr>
</table>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script type="text/javascript">
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n === 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n === (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n === 1 && !validateForm())
return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
var frm = document.getElementById('regForm');
//var frm = new formData;alert(frm.MatricNo.value);
var MatNo = frm.MatricNo.value;//alert("MatNo is: "+MatNo);
var FName = frm.FName.value;
var LName = frm.LName.value;
var OName = frm.OName.value;
var eMail = frm.Email.value;
var phone = frm.Phone.value;
var pwd = frm.Password.value;
var storedTextProgOfStudy = frm.ProgOfStudy.options[frm.ProgOfStudy.selectedIndex].text;
var storedTextDepartment = frm.Department.options[frm.Department.selectedIndex].text;
var storedTextFaculty = frm.Faculty.options[frm.Faculty.selectedIndex].text;
//alert(storedTextProgOfStudy +" "+ " "+ storedTextDepartment +" "+storedTextFaculty +" "+MatNo);
var url = "StudentCreateAccount.jsp";
var parameters = "ProgOfStudy=" + storedTextProgOfStudy + '&Department=' + storedTextDepartment + '&Faculty=' + storedTextFaculty +
"&MatricNo=" + MatNo + "&FName=" + FName + "&LName=" + LName + "&OName=" + OName + "&Email=" + eMail + "&Phone=" + phone + "&Password=" + pwd;
var xhr = new XMLHttpRequest();
xhr.open("GET", url + "?" + parameters, true);
xhr.send(null);
window.location = url;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value === "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</center>
</aside>
<footer>
<br />
© 2018 . All right reserved.
</footer>
</div>
</body>
</html>
This is the StudentCreateAccount.jsp
<%# page import ="java.sql.*" %>
<%
Connection conn = null;
String matNo = request.getParameter("MatricNo");
String FName = request.getParameter("FName");
String LName = request.getParameter("LName");
String OName = request.getParameter("OName");
String email = request.getParameter("Email");
String phoneNo = request.getParameter("Phone");
String programmeOfStudy = request.getParameter("ProgOfStudy");
String department = request.getParameter("Department");
String faculty = request.getParameter("Faculty");
String pwd = request.getParameter("Password");
//String retypePwd = request.getParameter("rePassword");
String dbURL = "jdbc:mysql://localhost:3306/cmsdb";
String rootUser = "root";
String rootPwd = "";
String driver = "com.mysql.jdbc.Driver";
Class.forName(driver); //This loads the driver for the database
conn = DriverManager.getConnection(dbURL, rootUser, rootPwd);
Statement st = conn.createStatement();
ResultSet rs;
//This is the SQL String for retrieving data by name from the database.
rs = st.executeQuery("SELECT * FROM kasustudent WHERE MatricNo='" + matNo +"'");
if(rs.next()){
out.println("<script type=\"text/javascript\">");
out.println("alert('Matric Number already exist in the Database!');");
out.println("location='StudentLogin.jsp';");
out.println("</script>");
}else{
String query = "INSERT INTO kasustudent(MatricNo, FName, LName, ONames, Email, Phone, CourseOfStudy, Department, Faculty, Password) "
+ "VALUES ('" + matNo + "','" + FName + "','" + LName + "','" + OName + "','" + email + "','" + phoneNo + "','"
+ programmeOfStudy + "','" + department + "','" + faculty + "','" + pwd + "')";
st.executeUpdate(query);
out.println("<script type=\"text/javascript\">");
out.println("alert('Account Successfully Created!!\\nLogin to access your Dashboard!');");
out.println("location='StudentLogin.jsp';");
out.println("</script>");
st.close();
}
%>
Please assistance is highly appreciated.
Apologies to bore you with so much codes.
Even when the StudentCreateAccount.jsp (scriptlet) file is run, the null values will be inserted into the database.
Please, critically look into the codes and tell me the problem is?
Thank you so much in advance.
I'm trying to make node counter by id, node name, and attribute name&value!
Here I would like to check if every is empty then show "HERE IS NO VALUE OF YOU ENTERED".
here in the end of I try to use <&&> but it doesn't work!
also is that impossible to use just tag instead of in the end of the code? when i tried, it show eror :(
** I have no idea of how to count attribute name&value number..**
I'm realy begginer of javascript ! thank you in advance guys!!
this is my form html.
function javascript_click() {
/* 자바스크립트 id값 찾기 */
if (document.getElementById("value1").value) {
var val = document.getElementById("value1").value;
if (document.getElementById(val)) {
//var myNodelist = document.getElementById("val").value;
document.getElementById("cnt").innerHTML += "선택하신아이디는 " + val + " 이며 id갯수는 1개입니다.By javascript <br>";
} else {
document.getElementById("cnt").innerHTML += "wrong value of ID <br>";
}
}
/* 자바스크립트 노드명 찾기 */
else if (document.getElementById("value2").value) {
var val2 = document.getElementById("value2").value;
if (document.querySelector(val2)) {
// alert(val2);
var myNodelist = document.querySelectorAll(val2);
document.getElementById("cnt").innerHTML += "선택하신 노드는 " + val2 + " 이며 노드갯수는 " + myNodelist.length + "개 입니다. By javascript<br>";
} else {
document.getElementById("cnt").innerHTML += "wrong value of ID <br>";
}
}
/* 자바스크립트 attribute 찾기 */
/* 자바스크립트 속성명&값 찾기 */
else if (
document.getElementById("value3").value &&
document.getElementById("value4").value
) {
var val2 = document.getElementById("value2").value;
if (document.querySelector(val2)) {
// alert(val2);
var myNodelist = document.querySelectorAll(val2);
document.getElementById("cnt").innerHTML += "선택하신 노드는 " + val2 + " 이며 노드갯수는 " + myNodelist.length + "개 입니다. By javascript<br>";
} else {
document.getElementById("cnt").innerHTML += "wrong value of ID <br>";
}
} else if (
(document.getElementById("value1").value &&
document.getElementById("value2").value &&
document.getElementById("value3").value &&
document.getElementById("value4").value) == 0
) {
document.getElementById("cnt").innerHTML += "THERE IS NO VALUE OF YOU ENTERED<br>";
}
}
<form action="">
<table class="tg" id="tg">
<tr>
<td>id</td>
<td><input type="text" id="value1"></td>
</tr>
<tr>
<td>node name</td>
<td><input type="text" id="value2"></td>
</tr>
<tr>
<td>attribute</td>
<td><input type="text" id="value3"></td>
</tr>
<tr>
<td>attribute</td>
<td><input type="text" id="value3"></td>
</tr>
</table>
<div id="cnt"></div>
</form>
<div class="button">
<button id='btn_javascript' onclick="javascript_click();">자바스크립트</button>
</div>
You may do validation like this:
if (document.getElementById("value1").value!=='') {
let val1 = document.getElementById("value1").value;
document.getElementById("cnt").innerHTML += "선택하신아이디는 " + val1 + " 이며 id갯수는 1개입니다.By javascript <br>";
} else {
document.getElementById("cnt").innerHTML += "wrong value of ID <br>";
}
in the below code plz tell me how to load the text in textarea where the textarea path is parent.frame_name1.iframe_name1.form_name1.textarea_name1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Local File I/O</title>
<script type="text/javascript">
<!-- // Begin
var ForReading = 1,
ForWriting = 2,
ForAppending = 8;
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
function checkText(fld, btn) {
btn.disabled = false;
fld.onkeypress = null;
return true;
}
function checkFile(obj, div, btn, btn2, fld) {
div.innerHTML = '<p><b>File:</b><br><b>Size:</b> <b>Last Modified:</b></p>';
btn.disabled = true;
btn2.disabled = true;
fld.value = '';
fld.onkeypress = new Function("return checkText(" + "document." + fld.form.name + "." + fld.name + "," + "document." + btn2.form.name + "." + btn2.name + ")");
//
// if (obj.value.indexOf(":") != 1) {
// alert("Local file name must include a drive letter.");
// return false;
// }
var ary = obj.value.split("\\");
if (ary.length < 2) {
alert("Local file name must include a path.");
return false;
}
if (!/(\.txt)$/i.test(obj.value)) {
alert("Local file name must include the '.txt' extension.");
return false;
}
//
try {
objFile = objFSO.GetFile(obj.value);
} catch (e) {
if (e.message != "File not found") {
alert(e.message);
return false;
} else {
try {
if (confirm(obj.value + "\n" + "does not exist. Click 'Ok' to create it.")) {
objFile = objFSO.CreateTextFile(obj.value);
objFile.Close();
objFile = objFSO.GetFile(obj.value);
} else {
return false;
}
} catch (e) {
alert(e.message);
return false;
}
}
}
fileSpecs(div, btn);
objFile = null;
return true;
}
function fileSpecs(div, btn) {
if (objFile.Size > 0) {
btn.disabled = false;
} else {
btn.disabled = true;
}
var str = '<p>';
str += '<b>File:</b> ' + objFile.Path + '<br>';
str += '<b>Size:</b> ';
if (objFile.Size < 1024) {
str += objFile.Size + ' bytes';
} else {
str += (objFile.Size / 1024).toFixed(1) + ' Kbytes';
}
str += ' ';
str += '<b>Last Modified:</b> ' + objFile.DateLastModified;
str += '</p>';
div.innerHTML = str;
}
function loadFile(btn, obj, div, fld) {
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForReading);
fld.value = objStream.ReadAll();
objStream.Close();
objStream = null;
fileSpecs(div, btn);
objFile = null;
return true;
}
function saveFile(btn, obj, div, fld, btn2) {
btn.disabled = true;
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForWriting);
objStream.Write(fld.value);
objStream.Close();
objStream = null;
objFile = objFSO.GetFile(obj.value);
fileSpecs(div, btn2);
objFile = null;
fld.value = '';
fld.onkeypress = new Function("return checkText(" + "document." + fld.form.name + "." + fld.name + "," + "document." + btn.form.name + "." + btn.name + ")");
return true;
}
// End -->
</script>
</head>
<body>
<center>
<form name="myForm" onsubmit="return false;">
<table width="720">
<tr>
<td colspan="4">
<div id="fileSpec">
<p><b>File:</b><br><b>Size:</b> <b>Last Modified:</b></p>
</div>
</td>
</tr>
<tr>
<td colspan="3" width="580" align="center" valign="top">
<textarea rows="25" name="fileArea" cols="70"
onkeypress="return checkText(this, btnSave);"></textarea> </td>
<td rowspan="2" width="140" valign="top"><p>This is a simple demonstration of
a browser-based local text file editor. Begin by clicking the <b>Browse</b>
button to select an existing text file from your local hard drive.
(In the Browse dialog, you may type in a new file name if
desired.) The selected file information is then displayed at the
top of the page. For an existing file, click the <b>Load</b>
button next. After editing, click the <b>Save</b> button to
complete the demonstration.</p></td>
</tr>
<tr>
<td align="left">
<input type="file" name="fileName" size="50"
onchange="return checkFile(this, document.getElementById('fileSpec'), btnLoad, btnSave, fileArea);"> </td>
<td align="center">
<input type="button" name="btnLoad" value="Load" disabled
onclick="return loadFile(this, fileName, document.getElementById('fileSpec'), fileArea);"> </td>
<td align="center">
<input type="button" name="btnSave" value="Save" disabled
onclick="return saveFile(this, fileName, document.getElementById('fileSpec'), fileArea, btnLoad);"> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
Are you meaning that the filename what you want to load is contained in parent.frame_name1.iframe_name1.form_name1.textarea_name1 ? In this case you should change the <input type="file"/> value dynamically, which is not supported by browsers (it would be a security issue).