I have this code inside my js file. Can you tell me how can I change text inside div with class "message".
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
So I want to change "Thank you for contacting us" that's inside .js file, to override it inline in html to "Thank you for sending us a message".
In your html, you need
<script type="text/javascript">
$(document).ready(function() {
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
});
</script>
Although I suspect that you want this to be tied to some button press. So you may want:
<script type="text/javascript">
$("#form_id").submit(function(ev) {
ev.preventDefault();
// .... setup form_serialized variable with form data
$.post(url, form_serialized, function(data) {
form.html('<div class="message">Thank you for contacting us!</div>');
});
});
</script>
Where the form tag looks like
<form id="form_id">
You have to change your codes little in your js file
var textToBePassed ="'<div class="message">Thank you for contacting us!</div>'";
$.post(url, form_serialized, function(data) {
form.html(textToBePassed );
});
now just add this code in HTML file as
textToBePassed ="Thank you for sending us a message"
Before calling it.
Related
I'm sorry I do not know english
Short'll try to explain short
I don't know Javascript at all, php is very little
I'm trying to use the "Responsive WYSIWYG Text Editor with jQuery and Bootstrap - LineControl Editor" editor
No problem getting data from database like this
$(document).ready(function() {
$("#txtEditor").Editor();
$("#txtEditor").Editor("setText", "<?php echo $my_database?>");
});
<textarea id="txtEditor" name="message"></textarea >
The problem is a: I can't submit, echo $_POST['message'];
Second problem:
Image code in editor does not send ajax
Sample code: <div>Hello World</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAR0AAABMCAYAAABQzSrQI...=">
No problem sending "Hello World" text, but does not send image code
var message = $("#txtEditor").Editor("getText");
$.ajax({
type: "POST",
url: url,
data: message,
success: function(dataResult){
}
});
Can you help with these two issues?
Thank you from now
Typically these WYSIWYG editors replace the <textarea> with divs and other markup which makes it not a form field anymore. You'll need to use javascript to get the editor content on submit and either submit it via ajax or add it to another form field:
<textarea id="txtEditor" name="txtEditor"></textarea>
<textarea id="txtEditorContent" name="txtEditorContent" style="display:none;"></textarea>
<input type="submit" value="Submit">
<script>
$("input:submit").click(function(){
$('#txtEditorContent').text($('#txtEditor').Editor("getText"));
});
</script>
Thanks for your reply
Yes, it worked
It is for PHP and writing to text database and rearranging
<textarea id="txtEditor"></textarea>
<textarea id="txtEditorContent" name="txtEditorContent" style="display:none;"></textarea>
<script language="javascript" type="text/javascript">
$(document).ready( function() {
$("#txtEditor").Editor();
$("#txtEditor").Editor("setText", "<?php echo addslashes($my_database); ?>"); // From the database into the editor
$("input:submit").click(function(){
$('#txtEditorContent').text($('#txtEditor').Editor("getText")); // PHP, echo $_POST['txtEditorContent']
});
});
</script>
Submitting with this ajax
$(document).ready(function() {
$("#txtEditor").Editor();
$("#txtEditor").Editor("setText", "Hello World");
});
var message = window.btoa($("#txtEditor").Editor("getText"));
// Javascript decode
$.post( "test.php", { message: message })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
<textarea id="txtEditor"></textarea>
test.php
php encode
$message = base64_decode($_POST['message']);
OR
Javascript encode
var message = window.atob(message);
For beginners like me, detail is needed
Thank you again to everyone
I have two php files. abc.php and def.php
I want to execute only abc.php in browser and only abc.php should be visible in the browser URL bar.
When submit button is clicked on my html page then abc.php should execute and pass the data of form to def.php in background using POST and def.php should not be visible in URL. is that possible?
abc.php
<script>
$.post( "def.php",{parameter: 'value'}, function( data ) {
if (data == 'success'){
alert( 'succeeded' );
}else{
alert( 'failed' );
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
def.php
<?php
// Do your functions here
function this(){
// do stuff
} or die('fail');
?>
success
Let me see if I understoond your issue. You have a form in abc.php.
When user submits the form PHP should send data to def.php and back to abc.php without use notices that?
If that's the case, you can do it using AJAX.
In your abc.php put an Id into your form and do the code below with jQuery:
<form method="post" action="" id="ajax_form"> ...
jQuery('#ajax_form').submit(function(){
var formData= jQuery(this).serialize();
jQuery.ajax({
type: "POST",
url: "def.php",
data: formData,
success: function(data) {
alert(data);
}
});
return false;
});
I am trying to pass a variable from js to a backoffice page.
So far I've tried using a form and submitting it from javascript (but that refreshes the page, which I don't want)
I ditched the form and when for an iframe (so the page doesn't reload everytime the data is submitted). The function is run every few seconds (so the form should be submitting):
<iframe style="visibility:hidden;display:none" action="location.php" method="post" name="location" id="location">
<script>
/*Some other stuff*/
var posSend = document.getElementById("location");
posSend.value = pos;
posSend.form.submit();
</script>
However my php page does not display the value posted (im not quite sure how to actually get the $_POST variable):
<?php
$postion = $_POST['location'];
echo $_POST['posSend'];
echo "this is the";
echo $position;
?>
I also tried $.post as suggested here Using $.post to send JS variables but that didn't work either.
How do I get the $_POST variable value? I cannot use $_SESSION - as the backoffice is a different session. What is the best method to do this?
EDIT I'd rather avoid ajax and jquery
And i think you no need to use form or iframe for this purpose . You just want to know the user onf without refreshing then use the following method with ajax.
index.html the code in this will
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
navigator.geolocation.getCurrentPosition(function(position)
{
pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
$.ajax(
{
url:'location.php',
type: 'POST',
datatype: 'json',
data: {'pos':pos}, // post to location.php
success: function(data) {
aler(data);
// success
},
error: function(data) {
alert("There may an error on uploading. Try again later");
},
});
});
</script>
location.php
echo "position :=".$_POST['pos'];
Instead of using iframe to submit your form with out reloading you submit form using ajax call.
$.ajax({
type: "POST",
url: url,
data: $("#formId").serialize(), // This will hold the form data
success: success, // Action to perform on success
dataType: "JSON" or "HTML" or "TEXT" // return type of function
});
There are various alternative to submit the form without reloading the page check here
Thanks
You can use plugin ajaxForm. On action and method you can form options
$(function() {
$('#form_f').ajaxForm({
beforeSubmit: ShowRequest, //show request
success:SubmitSuccesful, //success
error: AjaxError //error
});
});
Lakhan is right, you should try to use ajax instead of an iframe as they cause a lot of issues. If you absolutely need to use an iframe add a target attribute to your form (target the iframe not the main page) and only the iframe will reload.
<form action="action" method="post" target="target_frame">
<!-- input elements here -->
</form>
<iframe name="target_frame" src="" id="target_frame" width="XX" height="YY">
</iframe>
Here's a fully worked example that makes use of a <form>, the FormData object and AJAX to do the submission. It will update the page every 5 seconds. Do note that in PHP, the use of single quotes ( ' ) and double quotes ( " ) is not always interchangeable. If you use single quotes, the contents are printed literally. If you use double-quotes, the content is interpretted if the string contains a variable name. Since I wanted to print the variable name along with the preceding dollar sign ($) I've used single quotes in the php file.
First, the PHP
location.php
<?php
$location = $_POST['location'];
$posSend = $_POST['posSend'];
echo '$location: ' . $location . '<br>';
echo '$posSend: ' . $posSend;
?>
Next, the HTML
index.html
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function myAjaxPostForm(url, formElem, successCallback, errorCallback)
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function()
{
if (this.readyState==4 && this.status==200)
successCallback(this);
}
ajax.onerror = function()
{
console.log("AJAX request failed to: " + url);
errorCallback(this);
}
ajax.open("POST", url, true);
var formData = new FormData(formElem);
ajax.send( formData );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
var submitIntervalHandle = setInterval( doAjaxFormSubmit, 5000 ); // call the function to submit the form every 5 seconds
}
function doAjaxFormSubmit()
{
myAjaxPostForm('location.php', byId('myForm'), onSubmitSuccess, onSubmitError);
function onSubmitSuccess(ajax)
{
byId('ajaxResultTarget').innerHTML = ajax.responseText;
}
function onSubmitError(ajax)
{
byId('ajaxResultTarget').innerHTML = "Sorry, there was an error submitting your request";
}
}
</script>
<style>
</style>
</head>
<body>
<form id='myForm'>
<input name='location'/><br>
<input name='posSend'/><br>
</form>
<hr>
<div id='ajaxResultTarget'>
</div>
</body>
</html>
On my web page I have links for downloading mp3 files.
Upon user click, I make an ajax call and create an mp3 file on the server.
I return the path of the file to the script but now, how do I make it download the user system?
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
alert(return_data['url']);
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
I get the url of the mp3 file in alert but how to download it ?
Thank you.
Create an anchortag in your HTML which is hidden using CSS
Hidden
And in your javascript
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
var url= return_data['url'];
$('.hiddenUrl').attr('href',url) //adding value to the href attribute
$('.hiddenUrl').attr('download','any_filename.mp3');
$('.hiddenUrl')[0].click();
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
You can do window.location = return_data['url']; assuming that you have an url which starts with http... This approach is equivalent of the user clicking the link to the mp3. Another approach would be to create an iframe with src set to the newly created link. Using this method the user's browser will prompt to download the file without having to change the location (navigating away from the current page). I recommend the first approach.
This should work:
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
window.location.href = return_data['url'];
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
I think this will work
<SCRIPT TYPE="text/javascript">
function voice(id){
$.ajax({
url:'/download/',
type:"POST",
data:{'id':id,'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()},
success:function(return_data) {
var url= return_data['url'];
window.location.assign(url);
},
error: function(){
alert("Some Error");
}
});
}
</SCRIPT>
When I click on "Register Now" Button, I want to execute 'input.php' in which I have code to insert my data to the database and show a success message. I don't want to leave current page.
<input type="button" id="confirm" value="Register Now" class="button">
<script type="text/javascript">
$(document).ready(function() {
$("#confirm").click(function() {
<?php
include 'input.php';
?>
alert ("data Added successfully.");
});
});
</script>
My code is giving me "data Added successfully" message but PHP file hasn't executed and no data is added to the database. All necessary data is in session variables.
Suggest you try something like the below. You shouldn't be trying to execute PHP inside of a jQuery script. Do an AJAX call and pass the data through and process it in the PHP rather than relying on the session variables. For example:
<script type="text/javascript">
$(document).ready(function () {
$("#confirm").click(function () {
$.ajax({
type: "POST",
url: "index.php",
data: {
firstname: "Bob",
lastname: "Jones"
}
})
.done(function (msg) {
alert("Data Saved: " + msg);
});
});
});
</script>
Where firstname, lastname would be your normal session data.
You can learn more about the jQuery.ajax() function in the jQuery API Documentation.
To execute a Php script from javascript, you have to use Ajax.
the following code :
$("#confirm").click(function() {
<?php
include 'input.php';
?>
alert ("data Added successfully.");
});
will not work
http://api.jquery.com/jquery.ajax/
You need to use AJAX. Ajax is the concept of calling php files from javascript from inside the page. You then get the php page output in a variable and you can choose wether you will display it or not. An example of this technology is the show more posts of Facebook. This can be easily done with jQuery.
$.post( PHP_FILE, { field1: 'value', field2: 'value'}).done(function( data )
{alert("this function will be run when the request is over and the variable data
will have the output : " + data);});
you can do this by ajax post method..
$.ready(function(){
$("#confirm").click(function() {
$.ajax({
type: "POST",
url: "give url to the input.php file ",
data:,
success:function(data)
{
alert('data');// data is the return value from input.php
}
});
});
});
Try this:
<input type="button" id="confirm" value="Register Now" class="button">
<script type="text/javascript">
$(document).ready(function() {
$("#confirm").click(function() {
$.get('input.php').
success(function(){
alert ("data Added successfully.");
});
});
});
</script>
I'm not quite sure what you've tried to do there. Anyway here's a snippet of js that should do for you (I'm pretty sure in the new jQuery release there's a better way to do this though):
$.ajax({
url: "input.php",
success:
function(data)
{
// here, for example, you load the data received from input.php into
// an html element with id #content and show an alert message
$("#content").html(data);
alert("Success")
}
});