All I'm trying to do is get the val() of an Text Input. Here is an example.
I don't know if external links are allowed so I will also paste it here :
<div class="input-group">
<input type="text" id="#test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
Does anyone know why I cannot get the value of this element?
You have to remove the # sign from the id attribute :
<input type="text" id="#test" class="form-control" aria-label="..." ..
//_____________________^
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Why can't I get the input value of the #test?</title>
</head>
<body style='padding:64px;'>
<div class="input-group">
<input type="text" value="test value" id="test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
</body>
</html>
Related
When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
</form>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.
Just remove form tag, if you don't want to submit data.
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
If you want to use form submit with jQuery, you can use like this:
Html
<form>
<input type="text" id="namesInputter" value="">
<button type="submit">Add Player</button>
</form>
JavaScript
var subject = [];
function addSubjects(e) {
}
$("form").submit(function(e){
e.preventDefault();
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
});
I've includede an external javascript file "check.js" to my home.html page but it seems that it is not working.
Here's the code for check.js:
function required()
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
alert("City name is required");
return false;
}
return true;
}
And code for home.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
What's wrong??
Use an inline script in the HTML file:
<script>
your code here
</script>
Because the return value from the handler determines if the event is canceled you need to change this section:
onsubmit="required()"
with:
onsubmit="return required()"
function required(e)
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
console.log("City name is required");
return false;
}
return true;
}
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
There are a few problems here. Firstly, you can't have a <form> element inside a <p> element, so your HTML should look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<form name="form1" action="/weather" method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</body>
</html>
Secondly, you need to stop the form from submitting so it can be checked, but if it's fine, you need the form to submit to where the data is. To solve this, make required() fire with the onclick event of the submit button instead of the onsubmit event of the form. Also add an e argument for use later:
<form name="form1" action="/weather" method="post" autocomplete="off">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit" onclick="required(e)">
</form>
You also need placeholder text for your input instead of a value, so it isn't actually filled in if people don't touch it:
<input class="input1" type="text" name="city_name" onfocus="this.value=''" placeholder="enter city name here....">
And then make your function look like this:
function required(event) {
event.preventDefault();
var empt=document.forms["form1"]["city_name"].value;
if(!empt) {
alert("City name is required");
return;
}
document["form1"].submit();
}
And that should now work!
Your code as you've written it is working. The alert will never be shown because the value is never empty. To solve this use a placeholder attribute instead of a value in your input element:
placeholder="enter city name here...."
Fixed:
1 - use getElementByID
2 - you have a value set, test for that as well
3 - add return to your onsubmit
function required()
{ let empt=document.getElementById("city_name").value;
if(empt=="" || empt.includes("enter"))
{
//alert("City name is required");
return false
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" id="city_name" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
What I'm trying to do is when I update input text ID called foo it should be updated real time on input text id called goo. I already close to this solution I think but somehow it is not working. please check.
$('#foo').keyup(updatetxt);
$('#foo').keydown(updatetxt);
var foo = $('#foo');
function updatetxt() {
$('#goo').val(foo);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
You are assigning the element to val() whereas you need to update the value and that should happen into the function.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
<script type='text/javascript'>
$('#foo').keyup(updatetxt);
//$('#foo').keydown(updatetxt);
//var foo = $('#foo').val();
function updatetxt() {
$('#goo').val($('#foo').val());
}
</script>
</body>
</html>
You were very close. You were just updating with the HTML element, instead of the HTML element value. Your updatetxt function should look like this:
var value = $(this).val();
$('#goo').val(value);
Here you go with a solution https://jsfiddle.net/pyvnkdc2/
$('#foo').keyup(function(){
$('#goo').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="foo" value="something">
<input type="text" id="goo" disabled="disabled" value="something">
On keyup just assign the value to another input textbox.
I can't seem to find a way to get the javascript to take the inputted name I put in the box to make it appear where the paragraph is as output when the onblur event happens.
<!DOCTYPE html>
<!--
INFX1606 - Starter kit for Assignment 5.
-->
<head>
<meta charset="utf-8">
<meta name="author" content="Joey Fultz">
<meta name="description" content="Assignment 5">
<title>First Swing at Javascript</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="all">
<div class="title">
<h2>Javascript</h2>
</div>
<div>
<h3>Name and Banner</h3>
</div>
<span>
<label for="namebanner">Name:</label>
<input type="text" id="namebanner" name="namefield" onblur="showname() value">
</span>
<p id="p1"></p>
</div>
</body>
</html>
function showname() {
var x = document.getElementById("namebanner");
x.value = x.value.to("p1");
}
I want to know why my javascript is wrong and why it won't show my name when the onblur event happens.
This is quite easily done with JQuery
<input type="text" id="namebanner" name="namefield" />
<script>
$(function(){
$('#namebanner').blur(function(){
$('#p1').text( $(this).val() );
});
});
</script>
or in plain javascript
<script>
function showname(){
var x = document.getElementById("namebanner");
document.getElementById("p1").innerHTML = x.value;
}
</script>