i'm Sanjeev
My webpage has a button (not submit button of form) inside form. On click of that button i have to run a SQL query and then set other form field on the basis of query result.
My problem is how to run SQL query from javascript
you have to use ajax script to achieve this process. on button click ajax script is executed and the result is fetched in ajax response then you have to append the results to other form fields.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function getResult(){
var x=document.getElementById('inp').value;
dat='param=' + x;
$.ajax({
type: "POST",
url: "server.jsp",
data: dat,
cache: false,
success: function(html) {
$('#textdiv').val(html.trim());
}
});
}
</script>
</head>
<body>
<input type="text" name="inp" id="inp">
<button onclick="getResult();">
<input type="text" name="result" id="textdiv">
</body>
<!-- You need server page to execute query and in php the result is echoed.it came back to ajax response inside success function. -->
Related
i have form in which i want three functionality among two is working. First one is when form gets submit fetch data from db and display on form_process.php file and second is store form data in db on submit, this two is working fine in form_process.php. Now i want to send all form data via email so i want to do process in email_process.php. So how should i call email_process.php ?
i am already using form action for form_process.php
<form class="cost_calculation" action="form_process.php" name="cost_estimation" id="cost_estimation" method="post">
submit button:
<div class="get_quote_btn">
<input class="get_quote" name="submit" id="getquote" type="submit" value="Get Quote" />
</div>
I tried using ajax but it's not working
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").click(function(){
$.ajax({url: "email_process.php", success: function(result){
$("#cost_estimation").html(result);
}});
});
});
</script>
Thanks in advance.
I have a Flask application which has a page where the user can input a sentence. I want to take this user input and feed that into a Flask method which will perform some calculations on that sentence and then return the result (which is a string).
I would ideally like it to return on the same page, just underneath the form's submit button.
At the moment, I am trying to do this by using javascript. Here's what I have at the moment:
result.html
<head>
<script type=text/javascript>
$(function() {
$('a#test').bind('click', function() {
$.getJSON('/result_sentence',{
sentence: $('textarea[name="sentence"]').val()}, function(data) {
// do nothing
document.getElementById('display').innerHTML = data.result;
});
return false;
});
</script>
</head><body>
<!-- The form where the user inputs -->
<div id="interactive" style="margin-top:50px">
<textarea style="width:100%;" rows="3" name="sentence" placeholder="Enter your sentence"></textarea>
Predict
<label> I predict.. </label>
<p><span id='display'></span></p>
</div>
app.py
#app.route('/result_sentence')
def result_sentence():
sentence = flask.request.args.get('sentence')
pred = getPrediction(sentence)
return jsonify(result=pred)
Also, it should be noted that on the results.html, I have already called another Flask function which has redirected my Flask app to results.html and has displayed some charts.
So the main problem I am facing is that I am not sure why nothing happens when I click the button. To me it seems that when the button is clicked it should pass the sentence into the Flask function and perform the calculations.
I've looked at a bunch of questions that were already posted here on StackOverflow such as this one: Flask - Calling python function on button OnClick event
but they didnt really help me in this regard.
I don't really see where it is going wrong so I would appreciate any insight or help with this.
Thanks!
EDIT:
So it seems that the first problem is that the JS function doesnt get called at all when the button is clicked...
You need to use $.ajax with jquery. First, simply create an input box and button which, when clicked, will trigger the script to call the Ajax. In the HTML, the javascript will retrieve the user's input when the button is clicked, and the input will be sent to the flask route:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type='text' id='word'>
<button type='button' id ='retrieve'>Submit</button>
<div id='wordResult'></div>
</body>
<script>
$(document).ready(function() {
$('#retrieve').click(function(){
var word = $('#word').val();
$.ajax({
url: "/get_word",
type: "get",
data: {word: word},
success: function(response) {
$("#wordResult").html(response.html);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
</html>
Then, create the route in app.py:
#app.route('/get_word')
def get_prediction():
word = flask.request.args.get('word')
return flask.jsonify({'html':getPrediction(word)})
How can I pass my javascript variables to my PHP scripts, without reloading webpage or using separated PHP script through AJAX or javascript itself?
Without reloading your browser you can use javascript
put this before the <body> tag
<script>
$(document).ready(function(){
$("#varbtn").click(function(){
var var1 = $("#var").val();
$.ajax({
method: "POST",
url: "post.php",
data: {
var:var1
},
success: function(data){
//#success will be the id of the div you want to put the response of the php file
$("#success").html(data);
}
});
});
});
</script>
in the form, you dont need to create <form> tag
<input type="text id="var" />
<button id="varbtn"> Submit</button>
<!--this div will be the result of the post.php file-->
<div id="success"></div>
in the post.php
//will check if the person will direct visit that post.php, this is not secured enough but hes doing his job actually
<?php
if(isset($_SERVER['HTTP_REFERER'])){
if(!isset($_POST['var'])){
//your codes here
}
}
?>
What I am trying to do
I have a HTML form which looks like this:
[input text field]
[submit button].
I want the output results to display in only a small part of the page (don't want to refresh the entire page after the button is clicked).
What I have done so far
I am using jquery load() as follows:
<script type="text/javascript">
function searchresults(id) {
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
</script>
Results will appear in a div which is exactly what I want:
<div id='myStyle'></div>
The problem
The script above works just fine (I used a variation of it elsewhere). But I have 2 problems:
1-How to call the load() script from the form. I tried this but it doesn't work:
<form id="form" name="form" method="post" action="searchresults('1')">
2-If I am not able to call the load() script from the form, how do I pass what is into the input text field to the load() script so in the end it can be proceessed by the displaysearchresults.php file???
Thanks
Currently its not working since you have a typo:
function searchresult(id) {
/^ no s
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
Here:
action="searchresults('1')"> // this should be on the onsubmit
^
Since you're intention is to submit the form without reloading, you could do something like:
$('#form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'displaysearchresults.php',
data: {id: 1},
type: 'POST',
success: function(response) {
$('#myStyle').html(response); // assuming the markup html is already done in PHP
}
});
});
Of course in the PHP side, just call it like a normal POST variable:
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$id = $_POST['id'];
// other stuff you have to do
// echo markup stuff
exit;
}
Ok I have been able to do what I wanted to do, i.e., displaying search results in part of the page without reloading.
Actually it is not necessary to use the ajax load() function. You can do it with the script below:
<form id="form" method="POST">
<input type="text" id="textbox" name="textbox" />
<input type="submit" name="test" />
</form>
<div id="myStyle"></div>
<p>
<script src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault(); // prevent the form from reloading
$.ajax({
url: 'displaysearchresults.php',
type: 'POST',
dataType: 'html',
data: {text:$('#textbox').val()},
success: function(response) {
$('#myStyle').html(response);
}
});
});
});
</script>
So what is this doing:
It will "read" what the user entered in the textbox,
When the user click the "submit" button, it will put that into a POST variable and send it to "displaysearchresults.php" without reloading the page,
The search results will be displayed between the "mystyle" div.
Pretty nice.
Note for beginers: do not forget to copy the jquery file to your root folder otherwise ajax just won't work.
I am trying to execute a public function with an ajax script with the following
In the front end, root folder from where I am trying to call the public function I have within the contents of the file
details-page.php
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#formaddtofav").on("submit", function (e) {
$.ajax({
type: "post",
url: "lib/execute-ajax.php",
data: $("#formaddtofav").serialize(),
success: function(){
alert("form was submitted");
}
});
e.preventDefault();
});
});
</script>
and HTML
<form id="#formaddtofav">
<input type="submit" name="addtofav" onclick="displaymessage()" id="addtofavs" class="addtofav" value="">
</form>
the public function is located in lib/details-page.inc and looks like this http://pastebin.com/U5tCxwVc
and in the file lib/execute-ajax.php I am echoing the function like I would if i would have not used ajax
<?php
include_once('detail-page.inc');
echo $objWebUser->addtofavorites();
?>
The problem is that I get a success message just that the data is not inserted in the database, what am I missing here.
Function addtofavorites() works 100%, tested with the old method of inserting data (<form action="" method="post"> and if isset).
EXPECTED OUTPUT
When i click the input submit, function should be run and do all the things I have written:
Add data into dbs, check if data is already there and print the coresponding messages.
Please help me on this. It's my first attempt on integrating ajax. It's much appreciated any help.