In the following html and javascript code(codepen - https://codepen.io/manuchadha/pen/OJVXdzb), I wan to print the value of the input control but I am getting the value as undefined - filename is undefined. Why?
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="add-more-answer-div">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename" />
<button
type="button"
id="more-answer-button"
onclick="createNewAnswerSection()"
>
Add More Sections
</button>
</div>
</div>
</body>
</html>
function createNewAnswerSection() {
console.log("will create new answer section");
var answerNameControl = $("#answer-filename");
console.log("answer name control is ", answerNameControl);
if (answerNameControl.value === "") {
alert("give a filename to the answer");
} else {
console.log("filename is ", answerNameControl.value);
}
}
Please use answerNameControl.val() instead of answerNameControl.value
You should use val() at all !
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add-more-answer-div">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename">
<button type="button" id="more-answer-button" onclick="createNewAnswerSection()">Add More Sections</button>
</div>
</div>
<script>
function createNewAnswerSection() {
console.log("will create new answer section");
var answerNameControl = $("#answer-filename").val();
console.log("answer name control is ", answerNameControl);
if (answerNameControl === '') {
alert("give a filename to the answer");
} else {
console.log("filename is ", answerNameControl);
}
}
</script>
You are missing the syntax of jQuery , You are using answerNameControl.value which is not the valid synatx instead you can use $(answerNameControl).val() to get the value
Your updated code is as below
<html>
<head>
<title>some title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="add-more-answer-div">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename">
<button type="button" id="more-answer-button" onclick="createNewAnswerSection()">Add More Sections</button>
</div>
</div>
</body>
</html>
<script>
function createNewAnswerSection(){
console.log("will create new answer section");
var answerNameControl = $("#answer-filename");
console.log("answer name control is ",answerNameControl);
if($(answerNameControl).val() === ''){
alert("give a filename to the answer");
} else {
console.log("filename is ",$(answerNameControl).val());
}
}
Related
I'm creating a webpage which checks whether the data given by the user matches the data in the webpage's script.
My code:
var a = document.getElementById("a");
var b = document.getElementById("p");
function checking() {
if (b.innerHTML == a.value){
alert("All is perfect");
} else {
alert("Please check again");
}
}
<!DOCTYPE html>
<html>
<head>
<title>Terms and Conditions Checker</title>
</head>
<body>
<input id="a" autocomplete="off" />
<button onclick="checking()">Check</button>
<div id="p" style="display:none;">
a
b
</div>
</body>
</html>
So, I want to replace the empty spaces at the end of the lines with a space inside the <div>. So, if the code is
<div id="p" style="display:none;">
a
b
</div>
it should match:
<div id="p" style="display:none;"> a b </div>
Remove all tab , enter and using regex /(\r\n\t|\n|\r\t)/gm
See below snippet :
var a = document.getElementById("a");
var b = document.getElementById("p");
function checking() {
var val = b.innerHTML.replace(/(\r\n\t|\n|\r\t)/gm, "");
console.log(a.value,val);
if (val == a.value){
alert("All is perfect");
} else {
alert("Please check again");
}
}
<!DOCTYPE html>
<html>
<head>
<title>Terms and Conditions Checker</title>
</head>
<body>
<input id="a" autocomplete="off" />
<button onclick="checking()">Check</button>
<div id="p" style="display:none;">
a
b
</div>
</body>
</html>
I would like to validate names.
Ex: if I enter vinod98 r vinod_ it should give me an error message.
I want to move to start.js page after enter the name and clicked on participate. Can someone help me to do this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
var reg = /^[a-zA-Z]*$/;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
}
else if (!reg.match(nam))
{
alert("Name contains only letters");
document.forms[0].name.focus();
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br>
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
I rectified the error. Just remove reg in the if statement and then use test method. It works fine
I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var input = document.getElementById("search");
function sendToPage(){
if (input.value == "happy"){
location.href="suggestion_happy.html";
}
else if (input.value == "sad"){
location.href="suggestion_sad.html";
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<form onsubmit="sendToPage()">
<input type="text" method="put" id="search" placeholder="Search" value="">
</form>
</div>
</body>
</html>
Please help I'm still kind of new to javascript :)
you don't need to create a form to do this
check out this code
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
location.href = "suggestion_happy.html";
return false;
}
else if (input == "sad"){
location.href = "suggestion_sad.html";
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<input type="text" method="put" id="search" placeholder="Search" value="">
<input type='submit' onclick="sendToPage();" />
</div>
</body>
</html>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
//location.href="suggestion_happy.html";
location.replace("suggestion_happy.html");
return false;
}
else if (input == "sad"){
location.replace("suggestion_sad.html");
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
<div>
<form action="" onsubmit="return sendToPage()" method="post">
<input type="text" id="search" placeholder="Search" value="">
</form>
</div>
I have edited my asnwer plz try this
there are two problems here:
submitting a form will always refresh the page. So onsubmit is
killing your app
by putting the js in the <head> your
document.getElementById call fails because that element doesn't
exist yet. Javascript belongs at the end of the page, just before
the closing </body> tag
I am having my webpage get the value of a textbox and check it to a value of "bypass". If the stuff in the textbox equals the value of "bypass", then the website will redirect to google. But it doesn't work, even if you put in the correct values.
My Code is this:
<!DOCTYPE html>
<head>
<title>ACA2</title>
</head>
<body>
<center>
<form>
<p><input type="password" name="pass"><br></p>
<p><button onclick="bypassCheck()">...</button></p>
</form>
<p>Back</p>
</center>
<script type="text/javascript">
function bypassCheck() {
var aaa = document.getElementByName('pass')[0].value
var bbb = "bypass";
if(aaa == bbb) {
window.location.assign("www.google.com")
}
}
</script>
</body>
</html>
The issue is that it's not getElementByName, but getElementsByName, as in plural. So it would be:
var aaa = document.getElementsByName('pass')[0].value
use document.getElementsByName and window.open("https://www.google.co.in/") with proper https URL. If you provide only www.google.co.in then you won't be redirected to google.
Below is the working code:
<!DOCTYPE html>
<head>
<title>ACA2</title>
</head>
<body>
<center>
<form>
<p><input type="password" name="pass"><br></p>
<p><button onclick="bypassCheck()">...</button></p>
</form>
<p>Back</p>
</center>
<script type="text/javascript">
function bypassCheck() {
var aaa = document.getElementsByName('pass')[0].value
var bbb = "bypass";
if(aaa == bbb) {
window.open("https://www.google.co.in/")
}
}
</script>
</body>
</html>
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>