I have this html page:
<head>
<h1>Prueba TFG</h1>
</head>
<body>
<form method="POST" action="">
Introduce KeyWord <input type="text" name="key">
<input type="submit" name="submit" value="Submit">
</form>
</body>
I would like get the value of "name", the input of the page, using JavaScript and pass this value to python. How can i do that?
Thank you so much!
You can use flask, a Python webframework, and utilize its builtin capability to access data from a request:
First, create your HTML and store in a file named user_input.html:
<html>
<head>
<h1>Prueba TFG</h1>
</head>
<body>
<form method="POST" action="/">
Introduce KeyWord <input type="text" name="key">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Then, create the routes with flask:
import flask
app = flask.Flask(__name__)
#app.route('/', methods=['GET', 'POST']):
def home():
if flask.request.method == 'POST':
keyword = flask.request.form['key']
#do something with keyword
return "<p>You entered {}</p>".format(keyword)
return flask.render_template('user_input.html')
However, to include javascript, you can use ajax with jquery to pass the variable to the script:
<html>
<head>
<h1>Prueba TFG</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
Introduce KeyWord <input type="text" name="key" id='key'>
<button type='button' class='enter'>Submit</button>
<div id='result'></div>
</body>
<script>
$('document').ready(function(){
$('.enter').click(function(){
var value = $('#key').val();
$.ajax({
url: "/get_keyword",
type: "get",
data: {keyword:value},
success: function(response) {
$("#result").html(response);
$('#result').html(response);
},
error: function(xhr) {
}
});
});
});
</script>
</html>
In the app:
#app.route('/', methods=['GET', 'POST'])
def home():
return flask.render_template('user_input.html')
#app.route('/get_keyword')
value = flask.request.args.get('query')
return 'received value'
Related
I am trying to get a form to submit. I am using HTML, JS, PHP, and AJAX here. Since it will not submit, I assume something is wrong with my insert function, however I cannot figure out what the problem is. Whenever I click "submit" nothing changes. Nothing moves. The information doesnt get added.
<!doctype html>
<html>
<head>
<script src="./js/jquery-3.6.0.min.js">.
</head>
<body>
<form onsubmit="return(insertPeople())">
First name: <input type=text id=firstname><br>
Last name: <input type=text id=lastname><br>
Phone number: <input type=text id=telephonenumber><br>
<input type=submit value=submit>
</form>
<div id=showpeople></div>
<script>
function insertPeople(){
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
return(false);
}
function showpeople(){
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
return(false);
}
showpeople();
</script>
</body>
</html>
Give this a shot. I fixed some missing quotations, indented a few lines, and removed some unnecessary code.
<form onsubmit="insertPeople(); return false;">
First name: <input type="text" id="firstname"><br>
Last name: <input type="text" id="lastname"><br>
Phone number: <input type="text" id="telephonenumber"><br>
<input type="submit" value="submit">
</form>
<div id="showpeople"></div>
<script>
function insertPeople() {
val = $("#showpeople").val();
$.get("./week7ajax.php",{"cmd":"create", "firstname,lastname,telephonenumber" : val}, function(data){
$("#showpeople").html(data);
});
}
function showpeople() {
$.get("./week7ajax.php",{"cmd":""}, function(data){
$("#showpeople").html(data);
});
}
showpeople();
</script>
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.
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.
I have overridden the .submit function of a form on this web-page, because the webpage is loaded inside the #mainContent in an "index.php", and I want the Submit button to replace only this #mainContent.
I am trying to get the data from this form to a .php file in order to make queries to a database (or simply echo populated variables, to indicate that data was passed).
I am very new to AJAX. Can someone explain to me how to pass the data to the .php file, or point me to a resource that will give me some clarification?
Right now I'm simply trying to pass a string to a variable and echo it back.
Could someone clarify what the first element in the "data: {thisElement: notThisOne}," refers to? Is it the "name" of an attribute in the form? The name of the variable it will be passing to the php script in the 'url:' ?
Thanks for clarify this.
Here is my 'search.html' file (which is embedded in another 'index.php' file):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main" data-role="content" id="main">
<div id="holder">
<h1>Search</h1>
<div class="left">
<form name="searchForm" id="searchForm" onsubmit="return false;">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h3>Course</h3></legend>
<select name="courseSelect" id="courseSelect" name="courseSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
</select>
</fieldset>
<p>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="lecLab" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="lecLab" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="lecLab" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p>
</fieldset>
<input type="submit" value="Go">
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
The 'searchGo.js':
$(document).ready(function() {
$("#searchForm").submit(function(e)
{
//e.preventDefault();
$.ajax({
type: "POST",
url: "./scripts/php_test.php",
data: {courseSelect: "Lecture, or Lab?"},
success: function(){
alert($lecOrLab);
$("#holder").load("./scripts/php_test.php");
}
}) ;
});
});
Finally, the 'php_test.php':
<html>
<head>
</head>
<body>
<?php
$courseSelect = $_POST['courseSelect'];
echo ($courseSelect);
?>
</body>
</html>
Am I collecting the data in the php_test.php incorrectly? Or assigning it in the 'data: {},' (of searchGo.js) incorrectly?
Thanks for clarification.
First you shouldn't perform a search with POST, you are not modifying states(Deleting or updating records). Use a GET request instead.
The data in the ajax request is what you want to pass to the request. Use jQuery serialize that encodes a set of form elements as a string for submission.
$.ajax({
type: "GET",
url: "./scripts/php_test.php",
data: $("#searchForm").serialize(),
success: function(data){
$("#holder").html(data);
}
});
Now, in your php file you should be looking at the $_GET. Something like this:
$courseSelect = $_GET['courseSelect'];
//now query your db and return your results based on your form fields.
PHP try:
echo json_encode($courseSelect);
Javascript: I'm not seeing where $lecOrLab is defined? Also for the success method, you're not getting the response correctly. Try this:
success: function(response){
var resp = $.parseJSON(response);
console.log(resp);
// do stuff with resp
}
I am trying to use jQuery to post and process a form.
<form action="/postcomment/" method="post" id="commentform">
<input type="text" name="author" id="author" />
<input type="text" name="email" id="email" />
<textarea name="comment" id="comment" ></textarea>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
and the jQuery code:
$("#submit").click(function() {
$.ajax({
dataType: 'json',
beforeSend: function() {
},
timeout: 60000,
error: function(request,error) {
},
success: function(data) {
var obj = jQuery.parseJSON(data);
//blah blah...
} // End success
}); // End ajax method
return false;
});
It works as expected. However, If I add the <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=xxxx" > </script> into the form, it no longer works.
The browser will ask: There is a json file, do you want to open it?
Obviously the recaptcha script invoke the "post" action. How can I Stop Recaptcha from executing "action" in a form?
Related Question: Handling json Form with jQuery on Google App Engine
This is what I mean by changing the action, hopefully I am understanding your question:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script>
function changeAction() {
$("#myForm").attr("action", "anotherAction");
return false;
}
</script>
<title></title>
</head>
<body>
<form action="myFirstAction.html" id="myForm">
<input type="text" />
<button type="submit" onclick="return changeAction()">
</button>
</form>
</body>
</html>
After clicking the button the form's action is "anotherAction".