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);
})
Related
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);
}
});
});
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
}
}
?>
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);
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.
Quite confused with the answers in the StackOverFlow and the whole Internet! I have some problems which seem easy but can't solve them since some days!
In my scenario (Online Booking System), I want to take the entered values in the FORM (Starting Time and Duration of the reservation) and send it to the SERVER (PHP); In the PHP function I will check if they are valid (some SQL queries and PHP functions); Then I'll retrieve the result back to the JQuery (as json encoded array);
The current snippets are as follow:
My HTML form:
<FORM ACTION="add.php" METHOD="post" ID="submitform">
<INPUT type="text" cols="50" id="starting_time" NAME="starting_time" PLACEHOLDER="Starting Time" /><br />
<INPUT type="text" id="duration" NAME="duration" PLACEHOLDER="Duration"/><br />
<P>Suggestions: <span id="txtHint"></SPAN></P>
<INPUT type="button" value='Add Reservation' id="button" />
<DIV ID="ajaxfield"></DIV>
</FORM>
My JQuery and AJAX codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(function(){
$('#button').click(function(){
$('#container').append('<img src= "ajax-loader.gif" alt="Currently loading" id="loading" />');
var str = $('#submitform').serializeArray();
$.ajax({
cache: false,
url: 'availability.php',
type: 'POST',
dataType:'JSON',
data: $str,
success: function(response){
resultObj = eval (response);
alert( resultObj );
}
});
});
});
</script>
My PHP:
<?php
header('Content-Type: application/json');
$starting_time = $_POST['starting_time'];
$duration = $_POST['duration'];
availability($starting_time, $duration);
function availability($starting_time, $duration) {
THE FUNCTION STUFF
}
echo json_encode( $arr );
}
?>
Now, the problem is first of all this is not working and the script is being stuck on the loader.gif!
And second how can I manipulate the json array from PHP to do some stuff, like enabling the submit button and/or suggesting a duration which works for the user.
PS: And of course, IN the final scenario I want to check these things instantly and before user presses the submission button.
Thanks!
EDIT
Some part of my problem is solved by the notes from answers, this is the modified code (till now):
var str = $('#submitform').serialize();
$.ajax({
cache: false,
url: 'availability.php',
type: 'POST',
dataType:'JSON',
data: str,
success: function(data){
alert(JSON.stringify(data, null, "\t"))
}
});
Now, obviously I could alert the JSON returned from the PHP function; I'll just need to modify it to manipulate for my purposes.
First of all... I'll try to teach you a bit of fishing instead of just giving you a fish...
You say that your code is just stuck on the loader.gif... you've been several days stuck so I supose you had time enough to detect where your code stops, to detect if there is any error on your javascript code or if your client code execution reachs your server code.
The only info you give us saying that it's stuck on the loader is that this line of code:
$('#container').append('<img src= "ajax-loader.gif" alt="Currently loading" id="loading" />');
Has been executed.
Well... and now?
Ok, you can check things like the following:
Check if str contains what you expect it to contains.
Check if execution reachs availability.php
Check what $str contains (is the data you're trying to pass to your server)
Surely during those checkings you'll see some light through your doubts and you'll be able to post here a more detailed question.