How to retrieve data when post using AJAX my function is that
jQuery("#wp_pass_reset").submit(function() {
var url = document.getElementById('imgurl').innerHTML;
var url2 = document.getElementById('adminurl').innerHTML;
jQuery('#result').html('<span class="loading"><img src="' + url + '/img/load.gif" /></span>').fadeIn();
var input_data = jQuery('#wp_pass_reset').serialize();
jQuery.ajax({
type: "POST",
url: url2 + 'admin-ajax.php',
data: {
action: 'resetpass_process',
value: input_data,
},
success: function(msg){
jQuery('.loading').remove();
jQuery('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
This is the form:
<form class="user_form" id="wp_pass_reset" action="" method="post" name="wp_pass_reset">
<h1>
Enter Your Email or Username
</h1>
<input type="text" class="text" name="user_input" value=""><br>
<input type="hidden" name="action" value="tg_pwd_reset">
<a class="close">X</a>
<input type="hidden" name="tg_pwd_nonce" value="'.wp_create_nonce(">
<input type="submit" id="submitbtn" class="reset_password btn" name="submit" value="Reset Password">
</form>
When I retrieve data using $_POST['value'] all of my data show but when I use $_POST['user_input'] an error happens.
What can I do?
Here, you are submitting form by ajax then you have to pass it in data like,
data: {
action: 'resetpass_process',
value: input_data,
user_input : $('input[name="user_input"]').val(),
// add more parmeters which you need
},
Add user_input from your form field name to data object:
...
data: {
action: 'resetpass_process',
value: input_data,
user_input: $('input[name="user_input"]').val()
},
...
Related
I am not able to get the response to ajax success call back function. The response form the server is being directly printed on the browser
<body>
<script>
$(document).ready(function() {
$.ajax({
url: $("#form").attr("action"),
type: "POST",
data: $("#form").serialize(),
success: function(data) {
alert(data);
}
});
});
</script>
<form action="a.php" method="post" id="form">
<input type="text" name="name" id="name" placeholder="name" />
<input type="submit" value="submit" />
</form>
</body>
my php code
<?php
echo 'hii';
?>
Can you Replace AJAX script below mentioned.
<form method="post" id="form">
<input type="text" name="name" id="name" placeholder="name" />
<input type="submit" value="submit" />
</form>
$("#form").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: 'a.php',
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
I have a php function:
<?php
function send_message($userid, $projectid, $message) {
//some code
}
$userid = '1';
$projectid = '2';
$message = 'hello';
?>
<form id="myform" method="post" action="">
<textarea name="message" id="project-message"></textarea>
<input type="submit" name="send" value="send message">
</form>
I want the submit button to do jQuery Ajax so my page won't refresh:
js:
$('#myform').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: //my valid url,
type: 'post',
dataType : 'json',
data: {
action: 'send_message', //this is the PHP function
projectid: projectid //how do I write this?,
userid: userid //how do I write this?,
message: message//how do I write this?'
},
})
.done(function(data) { console.dir(data);; })
.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); });
});
On my error.log, I get NULL for the 3 parameters because I'm not sure how to access them from my PHP. How do you access the PHP variables from jQuery?
Put your PHP variables into hidden inputs so they'll be automatically sent when it is submitted.
For example : <input type="hidden" name="userid" value="1">
Serialize the form data : var formData = $(form).serialize();
On submit attach your form data :
$.ajax({
url: admin_ajax.ajax_url,
type: 'POST',
data: formData
})
Access it from PHP with a classic way : $_POST['userid']
<form id="insert_form">
<textarea name="message" id="project-message"></textarea>
<input type="submit" name="send" id="send" value="send message">
<input type="hidden" name="userid" id="userid" value="<?php echo $userid= '1'; ?>">
<input type="hidden" name="projectid" id="projectid" value="<?php echo $projectid='2'; ?>">
<input type="hidden" name="message" id="message" value="<?php echo $message=
'hello'; ?>">
</form>
var project-message=document.getElementById('project-message').value;
var send=document.getElementById('send').value;
var userid=document.getElementById('userid').value;
var projectid=document.getElementById('projectid').value;
var message=document.getElementById('message').value;
$.ajax({
url:"your_url.php",
type:"POST",
data:$('#insert_form').serialize(),
success:function(data)
{
}
})
You can get all the values of the form, and submit it.
Also you can set other the values in the form as hidden.
<form id="myform" method="post" action="" id='form1'>
<textarea name="projectMessage" id="project-message"></textarea>
<input type="submit" name="send" value="send message">
<?php print "<input type='hidden' value='$userid' > "; name='userid' ?>
<?php print "<input type='hidden' value='$projectid' > "; name='projectid' ?>
<?php print "<input type='hidden' value='$message' > "; name='message' ?>
</form>
$('#myform').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: admin_ajax.ajax_url,
type: 'post',
dataType:'json',
data: $("#form1").serialize(),
})
.done(function(data) { console.dir(data);; })
.fail(function(jqXHR) { alert('You are fail. ' + jqXHR); });
});
I like this approach because I can reuse the ajax multiple times or even create a generic function to submit the form on the background with ajax. Also I can fill the form using a for each loop in php, having all the values in an array (like a database result)
ex.
<?php
foreach($values as $k=>$v}{
print "<input name='$key' value='$v'>\n";
}
?>
Please I am new to jQuery so i just copied the code:
<div id="container">
<input type="text" id="name" placeholder="Type here and press Enter">
</div>
<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#name').keypress(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {
var info = $('#name').val();
$.ajax({
method: "POST",
url: "action.php",
data: {name: info},
success: function(status) {
$('#result').append(status);
$('#name').val('');
}
});
};
});
});
</script>
And here is the php code:
<?php
if (isset($_POST['name'])) {
echo '<h1>'.$_POST['name'];
}
?>
Its Working perfectly but now i want to have more than one input field like this:
<input type="text" id="name" >
<input type="text" id="job">
but i don't know how to run the jQuery code for the 2 input fields so that it can transfer them to the php page. Please i need help
You can pass multiple values using data param of ajax request like this.
$.ajax({
method: "POST",
url: "action.php",
data: {
name: $('#name').val(),
job: $('#job').val()
},
success: function(status) {
$('#result').append(status);
$('#name, #job').val(''); // Reset value of both fields
}
});
You need to change your code with some addition in html and JS.
Wrap your inputs in form tag. and add a preventDefault on submit.
Use jQuery .serialize() method
and event.preventDefault()
event.preventDefault() : If this method is called, the default
action of the event will not be triggered. (it will prevent page
reload / redirection) to any page.
.serialize() : Encode a set of form elements as a string for
submission.
serialized string output will be like key=value pair with & separated. :
name=john&job=developer.....
HTML
<form id="myform">
<input type="text" id="name" placeholder="Type here and press submit">
<input type="text" id="job" placeholder="Type here and press submit">
<input type="submit" name="submit" value="Submit Form">
</form>
JS
$(document).ready(function() {
$('#myform').submit(function(event) {
event.preventDefault();
var serialized = $('#myform').serialize();
$.ajax({
method: "POST",
url: "action.php",
data: serialized,
success: function(status) {
$('#result').append(status);
$('#myform').reset();
}
});
});
});
I want a code for get textbox value when submit button is clicked. It must be Ajax.Here is the code I tried so far.But I culdent get to work....
<form action="" method="post">
<p>Route No :
<input type="text" name="route_no" required="required" />
<input type="submit" value="Search" name="search" />
</form>
Ajax Code
<script type="text/javascript">
$(document).ready(function() {
$("#sub").click(function() {
var textboxvalue = $('name or id of textfield').val();
$.ajax({
type: "POST",
url: 'ajaxPage.php',
data: {txt1: textboxvalue},
success: function(result) {
$("div").html(result);
}
});
});
});
</script>
PHP code
$txt = null;
if((isset($_POST)) && (isset($_POST['txt1'])))
{
echo $txt = $_POST['txt1'];
}
HTML:
<label for="route_no">Route No:</label><input type="text" id="route_no" name="route_no" required="required" />
<input type="button" value="Search" id="search" />
<div id="result"></div>
JavaScript:
$(document).ready(function()
{
$("#search").click(function()
{
var textboxvalue = $('input[name="route_no"]').val();
$.ajax(
{
type: "POST",
url: 'ajaxPage.php',
data: {txt1: textboxvalue},
success: function(result)
{
$("#result").html(result);
}
});
});
});
ajaxPage.php:
if(isset($_POST) && isset($_POST['txt1']))
{
echo $_POST['txt1'];
}
You have problem here
$("#sub").click(function() {
you are using id ="sub" for submit button but you are not assigning id to that button so give id to submit button as id="sub".
To get the value of the textbox you can use:
$('#elementid').val()
Changed the code to this now. Form is located in subscribe.php which in included into the index page.
<form class="subscribe" id="email" method="get">
<input class="email" id="emailaddress" name="email" type="text" placeholder="EXAMPLE#EMAIL.COM" required>
<input class="button" type="submit" id="emailSub" value="Subscribe">
</form>
<div id="subResult"></div>
Jquery is at bottom of the index page
$(document).ready(function() {
$('#emailSub').click(function() {
var email = $('#emailaddress').val();
alert(email);
$.ajax({
type: "GET",
dataType: 'script', //<-Data Type for AJAX Requests(xml | html | script | json)
url: 'checksub.php',
data: {
'e': email
},
success: function(result) {
$("#subResult").html(result);
}
});
})
});
Checksub page is this now for testing.
<?php include 'admin/includes/db_connection.php'; ?>
<?php
$email = mysqli_real_escape_string($db, $_GET['e']);
echo "test string:";
echo $email;
?>
Are you preventing the default click event from firing submit?
$('#emailSub').click(function(e){
e.preventDefault();
var email = $('#emailaddress').val();
$.ajax({url:"checkemail.php?e="+email,success:function(result){
$("#subResult").html(result);
}});
})
maybe you should to change dataType? try it:
$.ajax({
type: "GET",
dataType: 'html', //<-Data Type for AJAX Requests(xml | html | script | json)
url: 'checkemail.php',
data: {
'e': email
},
success: function(data) {
$("#subResult").html(result);
}
});
and
<input class="button" type="submit" id="emailSub" value="Subscribe">
^ HERE
should be :
<input class="button" type="button" id="emailSub" value="Subscribe">
because of submit is submiting form and refreshing the page.. so jquery not work..
Specifying the Data Type for AJAX Requests