I'm using Xamp.
I have a form.
<form action=/cgi-bin/run.py>
<input type="text" name="ins" id="ins">
<input type="submit" id="sub" value="submit">
</form>
#Tag to display output from form input
</div>
<div class="output" name="output" id="output">
</div>
On Click of submit button. the text input is given input to my py script.
and the output is displayed in one div tag in browser.
To display output from python script back to browser. i use JS.
$(sub).click(function(){
$.ajax({
type:'GET',
url:'/cgi-bin/t1.py',
cache:false,
dataType: 'html',
success:function (z) {
$('#output').html(z);
}
});
});
My python Script:
#!"C:\Programs\Python\Python36-32\python.exe"
import cgi, cgitb
print("Content-Type: text/html \n\n")
form = cgi.FieldStorage()
count1=form.getvalue('ins')
print(count1)
If i give the form action=/cgi-bin/run.py
My js won't execute on button click.
if js won't execute, then my output won't be redirected on to same page.
It will display output of python script in seperate page.
Any approach to resolve this issue?
On button click i need to run py script ( taking input of html) and display output in div tag.
Attempting an answer even though I am not 100% sure of what you mean still. Try to change your Javascript to:
$(sub).click(function(ev){
ev.preventDefault(); // Stop the form from redirecting the page.
$.ajax({
type:'GET',
url:'/cgi-bin/t1.py', // Or /cgi-bin/run.py. I'm not sure where your python script is.
cache:false,
dataType: 'html',
data: $('form').serialize(), // Send the form data in the request.
success:function (z) {
$('#output').html(z);
}
});
});
Related
HTML Code
<form name='form' method='post'>
<textarea name='ckeditor'></textarea>
<input type='submit' name='submit' value='Save' />
<form>
javascript code
$(document).submit(function(event){
event.preventDefault();
$editor = CKEDITOR.instances['editor'].getData();
//alert($editor);
$.ajax({
method: "POST",
url : "someurl",
data : "full_text="+$editor,
success = function (response) {
alert(response);
}
});
});
PHP CODE
<?php
print_r($_POST["full_text"];
?>
when alert is used inside java script my full text is shown. But when used print_r function of php only two or three lines of text is shown.
If i have three paragraph text alert display all three paragraph but php shows only two lines. below is the image for more detail
First image shows alert inside javascript before submitting.
Second Image shows alert response from php page
$.post would be easier for a simple post request.
$.post("someurl", {full_text: $editor}, function(response){
alert(response);
})
I am trying to create the following scenario:
A form in my index file collects input from a user, which is used to do some computation. The results of this computation should be echoed to him in a nice interface on the same page without reloading.
Currently, the results.php page is receiving the inputs correctly. Now, I just want to show it back inside the results div on the main page without reloading the results.php. .load is the wrong command for that. I need something like ".show"... Any ideas?
html:
<form action="results.php" method="post" class="ajaxform">
//all the inputs
<input type="submit" value="see your results" class="button"/>
</form>
<div id="results">
//here he should see the results.php output
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.ajaxform').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
alert('Form is successfully submitted');
setTimeout(function() {
$('#results').load('results.php');
}, 1000);
},
error : function(){
alert('Something wrong');
}
});
return false;
});});
change this
$('#results').load('results.php');
To
$('#results').html(data);
if the returned results in data variable.
If i understood your problem correctly, results.php recieves the output you would show in the div #result.
To use the return-data from ajax-request you have data as javascript variable. To show the result in the div you need the following statment in the success function from ajax-call.
$("#result").html(data);
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. -->
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 run an application that shortens urls for authenticated users. The form for this application is simply an input for the full url, which then spits out a shortened url.
I would like to build a button that can be added to generated pages (the urls are long and messy) and once clicked would automatically submit the url shortening form.
The url shortening application is run in php. I've read a little bit about using ajax to submit the form. Does this matter if it's on a different website? Does anyone have a good tutorial or starting point for this sort of thing?
Many thanks!
edit to include code:
<form action="" method="post">
<label for="form_url">Which URL do you want to shorten?</label>
<input type="url" id="form_url" name="form[url]" required="required" value="http://">
<input type="hidden" name="form[_token]">
<button type="submit" role="button">Shorten URL</button>
</form>
$(document).ready(function() {
$('a.btn').click(function() {
var pathname = window.location;
$.ajax({
type: "POST",
url: 'http://url',
data: $(pathname).serialize,
success: success,
dataType: text
});
});
});
There isn't much to go on, considering you didn't post any code, but what I think you're asking is:
<form id="myForm" method="post">
<input type="text" name="long_url"/>
<input type="submit" value="Send"/>
</form>
Now in the Javascript, you'd capture the submit event and call and ajax request:
$("#myForm").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "urlOfPhp",
data: $("#myForm").serialize(),
success: function(returned_data) {
// Handle Success Here.
}
}).error(function(){
// Handle an Error Here.
});
});
And that's the basics of Ajax. I'm also not clear on the Generated pages button thing, but this is a good starting point.