I'm trying to load data from the output of a PHP called test2.php file and put it into a graph
HTML:
<html>
<body>
<div class="ct-chart ct-perfect-fourth"></div>
<div id="data"></div>
</body>
</html>
jquery:
$(document).ready(function(){
$("#data").load("test2.php #numbers ", function(result){
console.log(result);
var data = result.split(",").slice(1);
var last_element = data[data.length - 1];
new Chartist.Line('.ct-chart', {
labels: data,
series: [data]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
});
The graph shows 0 for the last number and console.log(result); returns:
<div id='number'>,-0.05,-0.07,-0.07,-0.07,0.14,0.14,0.09,0.07,0.07,0.07,0.07,0.65,0.63,0.63,0.63,0.63,0.63,0.58,0.56,0.56,0.56,0.56,0.84,0.79,0.77,0.77</div>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pokerHand[]" id="pokerHand" multiple="multiple" />
<input type="submit" id="submit" value="submit" name="submit">
<input type="hidden" name="test" value="abc" id="test" />
</form>
</body>
</html>
Wich is the output of my php file however <div id="data"></div> contans <div id='number'>[the numbers]</div> how do i get .load to return the same content that it loads to the page
1) Change id name to numbers in test2.php because you use test2.php #numbers in ajax url.
2) Use $(this).text() instead of result inside .load() callback function. It gives the text loaded in id=data, in our case it is numbers.
Related
Having trouble debugging this simple file, for testing whether my upload page is working correctly. The code looks correct from my eyes, but it's not running right.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button_a").click(function(){
var formData = new FormData($(this)[0]);
$.post("./../pages/upload_image.php", formData, function(data) {
$("#content").html(data);
});
return false;
});
});
</script>
</head>
<body>
<h2>Test upload_image.php</h2>
<form onsubmit="return false" method="POST" enctype="multipart/form-data">
<input id="file" name="file" type="file" placeholder="File...">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<br />
<button id="button_a">Upload</button>
</br>
</br>
<h3>Output:</h3>
<div id="content" style="padding: 50px; background-color: #CCC;">
</div>
</body>
</html>
Quick look shows you using
var formData = new FormData($(this)[0]);
try changing it to :
var formData = new FormData($('form')[0]);
I think your context of $(this) is the Anchor tag, not the form.
Below is my part in my html page which is to get a threshold value and to call a function with the value
<form id="distance_input" onSubmit="return false;" >
<p>Enter a threshold</p>
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr" class="search" onkeydown="search(this)"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
function search(ele) {
if(event.keyCode == 13) {
console.log(ele.value+" from enter button");
set_tothreshold(ele.value);
}
}
</script>
But when I do this I get the graphs do not get refreshed( set_tothreshold function gets new data for graph when the value is passes in the function) and shows that
Uncaught ReferenceError: search is not defined
at HTMLInputElement.onkeydown
when I tried with
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
</script>
also when I press submit button no changes happened(even does not prints value in console).But why does the value does not get printed.Any help is appreciated.
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value);
set_to_threshold(value);
});
function set_to_threshold(val){
console.log('do something here with val ', val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="text" value="input something"/>
<button id="myButton">click</button>
</body>
</html>
this is what you want . yourfunction call when form submit
<form id="distance_input" onSubmit="yourFunction(); return false;" >
Kindly include jquery in your file. It works fine.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
Include this at the head section of the html page. And also there u referred function set_to_threshold() which is undefined. So only you are getting the error. Kindly write a function for it. it'll work!
basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!
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.
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;