I am currently writing a function that writes a bit of code for me based on an input. I am currently working on creating the input and the code that pastes the input, but whenever it writes, it shows up as undefined. This is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
var appname = document.getElementsByName("appname").value
function writeAppName() {
document.write(appname)
}
</script>
</body>
</html>
NOTE: This is not my final version of the code, at the moment I just want a system for writing an input value that I can duplicate. Final version will be using document.getElementbyID.
document.getElementsByName returns colection. Use document.getElementsByName("appname")[0].value.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
var appname = document.getElementsByName("appname")[0].value
function writeAppName() {
document.write(appname)
}
</script>
</body>
</html>
You need to refer to the first element with name "appname", because it could be a collection. Also I but the assignment for appanme variable inside of the function, this will make it so appname isn't being assigned to "Name" right away and is instead assigned to whatever is in the text box when you click the botton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript YAML Generator</title>
</head>
<body>
<form class="yamlform" action="index.html" method="post">
<input type="text" name="appname" value="Name">
<button type="submit" onclick="writeAppName()">Submit</button>
</form>
<script type="text/javascript">
function writeAppName() {
var appname = document.getElementsByName("appname")[0].value
document.write(appname)
}
</script>
</body>
</html>
The problem is with your document.getElementsByName
It is possible that multiple elements would have same name.
While using document.getElementsByName, there might be multiple elements instead of a single element present in DOM with similar name, so document.getElementsByName returns an array (a list of elements) and not a single element
To use different elements of the Array, use
document.getElementsByName("appname")[0] // For first element with name
document.getElementsByName("appname")[1] // For second element with name
// and so on
So in your code, you would use
var appname = document.getElementsByName("appname")[0].value;
Related
Iam appending a form from desktop view and adding it to mobile view (including scripts) using append() . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using document.getElementsByClassName('txtbox').value.
As per my requirement., I need to give index to identify each form while appending. like document.getElementsByClassName('txtbox')[0].value. I have done an approach for same. But not getting how to increment index value on appneding. I have created plunker for same. Please let me know what I have missed.
Here is the sample code
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You may use $(this).find() to select .txtbox inside the form.
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
Also, please note that id should be unique in the documnt.
I have passed form object inside function call and used that param to identify current form.
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
});
function submitForm(form){
var txtValue = $(form).find('.txtbox').val();
console.log(txtValue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You can iterate through you class list like so:
var txtboxes = document.getElementsByClassName("txtbox");
for(var i = 0; i < txtboxes.length; i++){
// ... process each element here
$(txtboxes[i]).append(data);
}
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I have two HTML pages: firstpage.html and secondpage.html. In firstpage.html, there is a form-
firstpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Form Filling</title>
</head>
<body>
<form action="secondpage.html" method="GET">
Enter Serial Number: <input type="number" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The firstpage data is sent to secondpage.html. I want to display and use the form data serialNumber in secondpage.html-
secondpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>
<form name="selva" action="thirdpage.html">
<input type="hidden" name="kumar">
</form>
<script type="text/javascript">
var locate=window.location;
document.selva.kumar.value=locate;
var text=document.selva.kumar.value;
function pass(str)
{
point=str.lastIndexOf('=');
return(str.substring(point+1,str.length));
}
document.write("Serial Number" + pass(text));
</script>
</body>
</html>
So now I can pass the serialNumber variable from firstpage.html to secondpage.html so that the above code in secondpage.html will show the serial nuimber, and I want same serial number in at thirdpage-
thirdpage.html:
<!DOCTYPE html>
<html>
<head>
<title>Repeating</title>
</head>
<body>
<form method="link">
Enter Serial Number2: <input type="number" name="burns" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
please tell how to print a data in all those pages?
The simplest method I could find for this is, write all the three pages in a single html file and display them based on conditions. This way you dont need to use localstorage.
Other method will be to use query parameters. You can simply learn how to use them. Here's the link to simple javascript-handled query params plugin:
http://jillix.github.io/url.js/
You can pass the serial no as a query parameter to another html. If you are confused on how to use this method, let me know and I'll tell you in detail.
i have problem on sending textbox value from one html page to another html page.
In first page i am sending first name and last name values.and i want to catch this value in textbox on the second page( i.e home.html).but some erroe occurs.
error is :Uncaught TypeError: Cannot set property 'value' of null
how to solve? please tell me.
i know this stupid question.but please tell me guys.i don't know javascript.
this is my html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
</head>
<body>
<form method="get" action="home.html" name="ff">
Firstname: <input id="f" type="text" name="firstname1">
Lastname: <input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>
this is my home.html code:
<!DOCTYPE html">
<html>
<head>
<script src="ttt.js"></script>
<script Language="JavaScript">
var tttt=val();
document.getElementById('text').value=tttt;
</script>
</head>
<body>
<form name="ff">
<input id="text" class="text" type="text" name="MyValue" value="helloS"/>
</form>
</div>
</body>
</html>
this is my javascript code(ttt.js)
function val(){
var link=location.href;
var str=link.split('?');
var str1=str[1].split('&');
var str11=str1[0].split('=');
var str12=str1[1].split('=');
var temp=str11[1]+" "+str12[1];
return(temp);
}
Put your javascript at the end of your html and change document.getElementById('tr') to document.getElementById('text'). You have no element with id tr.
please look at this question and its answers, it is demonstating how to pass value from one html page to another
link
You have to do getElementById('tr') when the dom is ready and ensuring that an element with the ID exists.
So if I have a form called myForm and a field called myField, I know I can access that field by using:
document.myForm.myField.value
Is there a way to assign the form itself to a variable like:
var f = document.myForm
so that I can access the fields by just using:
f.myField.value in order to save myself some typing?
I tried it and it didn't work so I don't know if it's not possible or if I'm just doing something wrong.
Yes.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form id="example">
<input name="field" value="default value">
</form>
<script>
var frm = document.forms.example;
alert(frm.elements.field.value);
</script>
</body>
</html>
Yeah of course you can do it! Just add a variable like var act_form = document.forms["myform"]; //make use of it
var action =act_form.action, method = act_form.method;
alert(method);
and in the form contains
<form name="myform" method="post" action="example.com"></form>