This is really strange. I am trying to get the value of a text field by id but what I am seeing in console is an empty string. Below is my complete code. All scripts are included correctly.
<html>
<head>
<meta charset="UTF-8">
<title>Awok- Scrapper</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="form">
<form>
<input type="text" name="query" id="test"/>
<input type="button" id="send" value="Submit" />
</form>
</div>
<div id="result">
</div>
<script>
$(function () {
var query = document.getElementById('test').value;
$('#send').click(function () {
console.info(query);
});
});
</script>
</body>
Since you use jQuery you can use it like this:
$('#send').click(function () {
var query = $('#test').val();
console.log(query);
});
$('#send').click(function () {
var query = $('#test').val();
console.info(query);
});
You tried to get value of query which has modified at the time of page load.
Related
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
I want the value of the input but it always alert 0, how can I get the value of input
below, I cant get the value - the value of input is just numbers
$(document).ready(function() {
var text = Number($("#text").val())
$("#btn").click(function() {
$("#p").text(text)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text" placeholder="Enter a number" class="txt"><br>
<button id="btn">RUN</button>
<p id="p"></p>
The problem is that you get the variable value when the page loads and you never get it later. You need to get it whenever you click the button. I have edited it for you and now it works.
$(document).ready(function(){
$("#btn").click(function(){
var text = Number($("#text").val())
$("#p").text(text)
})
})
Did you added a js library on your page?
<!DOCTYPE html>
<html>
<body>
<head>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
</head>
<input type="text" id="text" placeholder="Enter a number" class="txt"><br>
<button id="btn">RUN</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
alert($("#text").val());
})
});
</script>
</body>
</html>
I am making this program where the value in the text-box will be alerted. I know this is hardly anything, but already something isn't working. I checked the developer tools console panel and it didn't show any errors.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submit = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit()">Submit</button>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var submit1 = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit1()">Submit</button>
</form>
</body>
</html>
That is because there's already be a function named submit(). Change it to submit1() or any other name . It'll work
submit() is a predefined method in JavaScript that is used to submit the form.
So you can't use it like that. You need to change the function name to something else.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submitForm = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submitForm()">Submit</button>
</form>
</body>
</html>
var test= function() {
var name = document.getElementById('name').value;
alert(name);
}
<input type="text" id='name'>
<button type="button" onclick="test()">Submit</button>
I have a textbox having id=add, a div having id=get and a button named Add. Now I'm trying to enter values in textbox, save them in to an array and then save that array elements in the div tag (using javascript). But I'm unable to do so. Please help.
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new array();
data= document.getElementById('add').value;
function copy()
{
document.getElementById('get').innerHTML=data;
// document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" name="add" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>
Update your code as,
<html>
<head>
<title>Content</title>
<script language="javascript">
function copy() {
var data = document.getElementById('add').value;
document.getElementById('get').innerHTML += data + "<br/>";
}
</script>
</head>
<body>
<input type="text" name="add" id="add" />
<input type="button" name="but1" onclick="copy()" value="Add" />
<div id="get" class="keyword">
</div>
</body>
</html>
PS:Array (not array) is not required here,
This is because data doesn't have any value, you are trying to read the value of the text box before setting a value and also it should be Array()
Try this instead
function copy()
{
var data = new Array();
data= document.getElementById('add').value;
document.getElementById('get').innerHTML=data;
}
JsBin
Three issues in your code:
array() is not recognized in javascript, it's Array().
You are trying to read the value of the text box before a value can be set to it here:
data= document.getElementById('add').value;
function copy(){
It should be:
function copy()
{
data[0]= document.getElementById('add').value;
data is an array. If you want to store a value, it should be used with an index.
JSFiddle
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new Array();
function copy()
{
data = document.getElementById('add').value;
document.getElementById('get').innerHTML = data; document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>
I'm new to Javascript. Can I show direct data from an HTML form on the same page. My code is here:
<html>
<head>
<title></title>
</head>
<script>
document.getElementById("btn").onclick = avc;
function avc(){
var a = document.getElementsByName("firstname").value;
document.getElementsByName("abc").innerHTML = a;
}
</script>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname"><br>
<input id="btn" type="submit">
</form>
<div name="abc"></div>
</body>
</html>
Using the ID for the element would also work when getting the value.
var a = document.getElementById('fname').value;
Yes you can with
<script>
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
</script>
at the end
if you want that every time you write something in text box changes the value in div abc try this:
<html>
<head></head>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname" onKeyUp="f()"><br>
<input id="btn" type="submit">
</form>
<div id="abc"></div>
<script>
function f() {
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
}
f(document.getElementById('fname').value);
</script>
</body>
</html>
Yes, but you need to subscript the correct element like so...
var a = document.getElementsByName("firstname")[0].value;