I have a small question, which I guess in my opinion will sound stupid. I have actually this code
<script type="text/javascript">
$(document).ready(function(){
var email_value = prompt('Please enter your email address');
if(email_value !== null){
//post the field with ajax
$.ajax({
url: '="/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
//do anything with the response
console.log(response);
}
});
}
});
</script>
I would like to link it to my button which does this
<form action="/new/cfolder.php" method="post">
</font><input type="submit" value="Create Vdisk" class="myButton6" onClick="function()">
<br></form>
Is it actually possible to do this? thank you for any answer.
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '.myButton6', function(){
var email_value = prompt('Please enter your email address');
//post the field with ajax
if(email_value.length > 0){
$.ajax({
url: '/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
alert(response);
}
});
}
)};
});
</script>
try that way
// this is the id of the form
$("#idForm").submit(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: '="/new/cfolder.php',
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
give your form an id
<form id="idForm" action="/Same/path/as/your/ajax/" method="post">
</font><input type="submit" value="Create Vdisk" class="myButton6" onClick="function()">
<br></form>
Yes of course you can do this . Like this code and you will have to include jquery1.9.0.js or above.
<script type="text/javascript">
$(document).ready(function(){
$("#myButton6").click(fuction(){
var email_value = prompt('Please enter your email address');
if(email_value !== null){
//post the field with ajax
$.ajax({
url: '/new/cfolder.php',
type: 'POST',
dataType: 'text',
data: {data : email_value},
success: function(response){
//do anything with the response
console.log(response);
}
});
}
});
});
</script>
I would like to link it to my button which does this
</font><input type="submit" value="Create Vdisk" class="myButton6" id="myButton6">
<br>
Related
The code works on until I reach the action.php where I post my input. The issue is that the Post never reaches the action.php and all I get is a blank variable.
using: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
<script type="text/javascript">
function submitdata()
{
var name=document.getElementById('name');
$.ajax({
type: 'post',
url: 'action.php',
data: {
'name':name
},
cache:false,
success: function (data) {
$('#msg').html(data);
}
});
return false;
}
</script>
<form onsubmit="return submitdata();">
<input type="text" name="name">
<input type="submit" value="Check">
</form>
<p id="msg"></p>
action.php:
<?php
$name=$_POST['name'];
echo "Response: ".$name;
?>
EDIT:
Fixed it by adding:
var name=document.getElementById('name').value;
and
input type="text" id="name" instead of name="name"
Your "name" is DOM object. To get value use:
var name=document.getElementById('name').value;
You now submit not a string, but Object and this may be the reason why it fails.
Try to add the dataType on your ajax request
make it 'text'
$.ajax({
type: 'post',
url: 'action.php',
dataType: 'text',
data: {
'name':name
},
cache:false,
success: function (data) {
$('#msg').html(data);
}
});
i am new to JQuery AJAX and i need help with my code. What i want is when i click the add button it will change to delete button. but what happens in my code is that it changes to delete button but when i click delete button, it does not change back to add button. i want it to look like some sort of toggle. here's my html code with javascript:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#add_button').click(function(){
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
}
});
});
$('#delete_button').click(function(){
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
}
});
});
});
</script>
</head>
<body>
<div>
<button id="add_button" name="add" value="testing">Add</button>
</div>
</body>
and here's my php code:
<?php
if(isset($_POST["add_button"])){
echo "<button id='delete_button' name='delete' value='testing'>Delete</button>";
}
if(isset($_POST["delete_button"])){
echo "<button id='add_button' name='add' value='testing'>Add</button>";
}
?>
please help. thanks
You can try hiding the button clicked and show other button something like
$('#add_button').click(function(){
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
$('#add_button').hide();
$('#delete_button').show();
}
});
});
$('#delete_button').click(function(){
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
$('#delete_button').hide();
$('#add_button').show();
}
});
});
Or you can use jquery toggle
$( "#add_button").toggle()
http://api.jquery.com/toggle/
Your solution wasn't working, because delete button event handler was being attached to DOM before the DOM element(delete button) was initialised.
So, one event for both buttons would be enough:
$('button').click(function(){
var button = $(this);
if(button.data('type') == 'add') {
var postData = {add_button: button.val()};
} else {
var postData = {delete_button: button.val()};
}
$.ajax({
url: "ajax_test.php",
type: "POST",
data: postData,
success: function(data){
$('div').html(data);
}
});
});
HTML:
<div>
<button data-type="add" name="add" value="testing">Add</button>
</div>
PHP:
<?php
if(isset($_POST["add_button"])){
echo "<button data-type='delete' name='delete' value='testing'>Delete</button>";
}
if(isset($_POST["delete_button"])){
echo "<button data-type='add' name='add' value='testing'>Add</button>";
}
?>
<script>
$(document).ready(function () {
$('div').on('click', '#add_button', function(){
var temp = $(this).val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
}
});
});
$('div').on('click', '#delete_button', function(){
var temp = $(this).val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
}
});
});
});
</script>
Your code won't work on dynamically added elements, while above code works.
Read http://api.jquery.com/on/ for more informations.
Try the below code:
Give a class name to button:
<button id="add_button" class="btnOp" name="add" value="testing">Add</button>
Then you can add a js click event to that classname and change its data accordingly:
$('.btnOp').on('click',function()
{
var text=$(this).text();
if(text==="Add")
{
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
$('.btnOp').val('testing');
}
});
}
else
{
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
$('.btnOp').val('testing');
}
});
}
});
This will help you to change button values and functionality on success of ajax and acts like kind of toggle
I'm not sure why I'm not able to post the content of email field,
here is my code.
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<input type="text" id="email" name="email">
<input type="button" id="submit" name="submit" value="submit">
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (event) {
var email = $('#email').val();
console.log(email),
$.ajax({
url: 'db.php',
type: 'POST',
data: 'email=' + 'email',
success: function (data) {
console.log(data);
}
})
});
});
</script>
</html>
backend file "db.php"
<?php
$email = $_POST['email'];
echo "$email";
I'm able to console.log email, and displays correctly, before it gets submitted to db.php.
console log returns "email" only.
Not sure whats wrong, your help is highly appreciated.
Thanks
You are sending string "email", while you want to send a variable value:
$.ajax({
url: 'db.php',
type: 'POST',
data: 'email=' + email, // or data: {email: email}
success: function (data) {
console.log(data);
}
});
Use this it will help
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (event) {
var email = $('#email').val();
console.log(email),
$.ajax({
url: 'db.php',
type: 'POST',
data: {email: email},
success: function (data) {
console.log(data);
}
})
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#message").hide();
$("#please_wait_box").hide();
$("#addnotification").submit(function(e){
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString=$("#addnotification").serialize();
$.ajax({
type: "POST",
url: "menu.php?addnotification=yes",
cache: false,
data: dataString,
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
$('.overlay').fadeOut();
if(res.indexOf("success")!=-1)
{
window.location.href = res.substr(8);
}
}
});
});
});
</script>
i am trying to run this ajax code to POST data to menu.php page from a submitted form
on menu.php i have
if($_GET["addnotification"] == 'yes') {
//do stuff here
echo 'form submitted';
}
but i cannot see the text form submitted
UPDATE
i have changed to this code:
<script type="text/javascript">
$(document).ready(function(){
$("#message").hide();
$("#please_wait_box").hide();
$("#addnotification").submit(function(e){
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString=$("#addnotification").serialize();
$.ajax({
type: "POST",
url: "addnotification.php",
cache: false,
data: dataString,
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if(res.indexOf("success")!=-1)
{
window.location.href = res.substr(8);
}
}
});
});
});
</script>
and put the SQL queries on a different page, but now the please_wait_box shows and does not hide, the queries are not running at all
In your url you've got no blank, but in your php document there is a blank.
menu.php?addnotification=yes
vs
$_GET["add notification"]
You are sending a POST request and then reading the $_GET response, try changing the
type: "POST",
for
type: "GET",
in your ajax call.
and also read addnotification and not add notification (probably a typo)
Check your this part of code:
if(res.indexOf("success")!=-1)
{
window.location.href = res.substr(8);
}
You are searching for success in res whereas i think your res will be a string "form submitted". You can try calling alert(res); or console.log(res) to see what is being returned in your response.
Additional debugging process:
change your code for ajax to below:
var request = $.ajax({
type: "POST",
url: "addnotification.php",
cache: false,
data: dataString
});
request.done(function( msg ) {
$("#please_wait_box").hide();
$("#message").html(msg);
$('#message').fadeIn('slow');
if(msg.indexOf("success")!=-1)
{
window.location.href = msg.substr(8);
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
I have a simple form like
<form id="invite_form">
<input type="text" name="invite_email" id="invite_email" />
<textarea name="invite_message">Hello!</textarea>
<div id="send_div">
<span id="send_btn">Send</span>
</div>
</form>
My JS is as follows to submit the form via Ajax:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
});
This works fine.
Now I would like to wrap a jQuery Validate function around this code to make sure [1] the email field is filled and [2] is valid email.
I am using Jorn's bassistance.de jQuery validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/.
Can anyone give a roadmap of how to tie the validation call to this ajax?
Thanks for helping, much appreciated.
Try this:
$('#send_btn').live('click', function(event){
event.preventDefault();
var form = $('#invite_form');
if(form.valid()) {
$.ajax({
url: '/invite',
type: "POST",
data: form.serialize(),
dataType: "html",
success: function(html) {
$('#send_div').html('Success!');
}
});
else {
; //do whatever if the form is not valid
}
});