I have a form, and it has a field for entering a PIN code. Here I am using ajax for finding place when enter PIN code. It works when that field is not enclose in a form. If it is enclosed in a form, AJAX is not working.
HTML CODE:
<form id="form" class="blocks" action="#" method="post" enctype="multipart/form-data">
<div class="col_4 right">
<label for="fullname">FirstName:</label>
<input name="fname" type="text" class="text" />
</div>
<div class="col_4 right">
<label for="pincode">Pin-Code:</label>
<input name="pincode" type="text" class="text" id="pincode" />
<div id="section1"></div>
</div>
</form>
JS CODE:
<script>
$(document).ready(function() {
$('#pincode').keyup(function (e) {
if (e.keyCode == 13) {
//ajax request
$.ajax({
url: "pincode_check.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) { <!--console.log(data.success);-->
if(data.success){
//console.log(data.results[0].formatted_address.split(','))
var long_address=data.results[0].formatted_address.split(',');
console.log(long_address[0]);
$('#section1').append(long_address[0]);
}
}
});
}
});
});
</script>
PHP CODE(pincode_check.php):
<?php
$pincode=$_REQUEST['pincode'];
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$pincode.'&sensor=false');
$response= json_decode($geocode); //Store values in variable
$lat = $response->results[0]->geometry->location->lat; //Returns Latitude
$long = $response->results[0]->geometry->location->lng; // Returns Longitude
$geocode=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?latlng='.$lat.','.$long.'&sensor=false');
$data= json_decode($geocode);
if($data==true)
{ // Check if address is available or not
$data->results[0]->formatted_address ;
$data->success=true;
echo json_encode($data);
}
else {
$data->success= false;
echo json_encode($data);
}
?>
The default content type in $.ajax is application/x-www-form-urlencoded. But you've set your form content to multipart/form-data.
multipart/form-data is normally used for sending files with POST. I don't think you need that, so you don't need to specify enctype at all, just remove it and use the default form encoding, which is application/x-www-form-urlencoded.
(Additionally, the default request type in $.ajax is GET, so if you do want to send a file, you'll need to change that too..as well as add the attribute type="file" to your form I believe...)
Related
I have the following form and input box. However, when there is nothing in the input box, the javascript doesn't execute. I need to detect if someone clicked "submit" without filling in the form. I have tried many things I've found on SO and none have worked. When there is an input value, everything works perfectly to execute the js. However, when there is nothing, the console.log(bidz) doesn't produce anything and it appears as if the script quits. From what I've read, I understand that the input box doesn't exist without a value in it. But then I tried to say if it doesn't exist, then something, but that also didn't work.
Perhaps this has to do with the fact that I give it a placeholder value of "enter something?"
<form action="" method="post">
<div id="<?php echo $this->item['id']; ?>">
<div class="ab">
<label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
<span class="auction_bid_container">
<input id="ab_input" type="text" maxlength="12"
class="middle nmr event-clear-focus"
name="bidz" value="Enter something" />
<input id="updateBidButton" type="submit"
class="button grey-button num-items-button"
name="bidz"
value="<?php echo $this->translate('submit'); ?>"/>
</span>
</div>
</div>
</form>
<div class="clear mb20"></div>
and here is my js function. I have tried all kinds of things but it appears "this.value" results in an error if there is no value:
$('input[name="bid_amount"]').live('change', function () {
var bidz = this.value;
console.log(bidz);
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bid_amount + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bid_amount);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});
You are submitting the form either way, that's why! So, what you have to do is to stop the form from being submitted. How?
You can add onsubmit=" return false; " to your form
<form action="" method="post" onsubmit=" return false; ">
</form>
submit.addEventListener("submit", form, function(){
e.preventDefault(); /* This will prevent the form from being sent until you explicitly send it. */
});
If you are sending the form through ajax there is no need to submit the actual form (meaning form.submit() )
I want to upload an image without refreshing the page,But my page still refresh when i hit submit button to upload image. what is wrong with my ajax code. This works when am submitting form with plain text but not with image file.
test.php
<div class="preview_d_p" id="preview_d_p">
<div class="preview">
<div class="p_preview">
<div id="p_p_image"><div id="myimage"></div></div>
</div>
<div id="lab"> <label for="photo_upload">upload</label></div>
<form enctype="multipart/form-data">
<input type="file" id="photo_upload" name="image_upload">
<input type="submit" value="save" id="insert_img" onclick="return loadimage()">
</form>
</div></div>
<script>
function loadimage(){
var image = documentElement('photo_upload').value;
$.ajax({
type:'post',
url:'profile.php',
data:{
image:image
},
cache:false,
success: function(html){
}
});
return false;
}
</script>
my advice is changing the input to a button (type="button") - I prefer buttons to inputs as they're more easily stylable.
But you can do something like this to govern submitting data without page refresh:
HTML EXAMPLE (NOT A COPY OF YOUR HTML):
<div id="container">
<form action="" method="post" id="myForm">
<input type="text" value="hello world!" />
</form>
<!-- what's great about buttons, is that you don't have to place inside the form tags -->
<button type="button" id="submitBtn">
JS To match
$(document).ready(function()
{
$('#submitBtn').on('click', function()
{
//ajaxy stuff
//will show the success callback function though:
success: function(res)
{
$('#container').html(res);
}
})
});
if your post script returns html then this should work. Let me know if otherwise :)
I solved this problem using formdata to send my image file to server
$(document).on("submit","form",function(e){
e.preventDefault();
var file = $("#product-file-i").val();
var p = $("#product-upload-f").children("input[name=name]").val();
$.ajax({
type:"post",
url:"profile.php",
data:new FormData(this),
contentType:false,
processData:false,
cache:false,
success: function(feedback){
alert(feedback);
},
error: function(){
}
});
});
Form :
<form method="post" id="loginForm">
<div class="form-group">
<label for="email-signin">Email address:</label>
<input type="email" class="form-control" id="email-signin" name="email-signin">
</div>
<div class="form-group">
<label for="pwd-signin">Password:</label>
<input type="password" class="form-control" id="pwd-signin" name="pwd-signin">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default" id="signIn" name="signIn">Sign In</button>
<div id="error">
<!-- error will be shown here ! -->
</div>
</form>
jquery :
$("#signIn").on("click", function(e) {
e.preventDefault();
var values = $("#loginForm").serialize();
console.log( values );
$.ajax({
type: "POST",
url: "../php/BusinessLayer/User.php",
data: values,
beforeSend: function() { $("#error").fadeOut() },
success : function(response)
{
console.log("Success");
if(response=="ok"){
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
});
}
}
});
php:
<?php
session_start();
include ("../DataLayer/VO/UserVO.php");
include ("../DataLayer/DAO/UserDAO.php");
// Database Execution for User Related Request
$userDAO = new UserDAO();
print_r($_POST);
if(isset($_POST['signIn']))
{
echo 'test2';
$user = new UserVO();
$user->setEmail(trim($_POST['email-signin']));
$user->setPassword(trim($_POST['pwd-signin']));
// Request signin
$userDAO->signIn($user);
}
Using this code, my if(isset($_REQUEST['signIn'])) in my php file never returns true. I have tried multiple things, and nothing seems to work.
PS : I am using Jquery 1.12.4
Also, my print_r($_POST); returns an empty Array.
jQuery's serialize function does not encode the values of buttons. Taken from here
NOTE: This answer was originally posted by slashingweapon
jQuery's serialize() is pretty explicit about NOT encoding buttons or submit inputs, because they aren't considered to be "successful controls". This is because the serialize() method has no way of knowing what button (if any!) was clicked.
I managed to get around the problem by catching the button click, serializing the form, and then tacking on the encoded name and value of the clicked button to the result.
$("button.positive").click(function (evt) {
evt.preventDefault();
var button = $(evt.target);
var result = button.parents('form').serialize()
+ '&'
+ encodeURIComponent(button.attr('name'))
+ '='
+ encodeURIComponent(button.attr('value'))
;
console.log(result);
});
As far as the var dump being empty on the PHP side, try using jQuery's .click instead of the .on event.
$('#signIn').click(function(){});
Also, remove the method from your form. It looks like the form may be submitting as soon as you click the button. Also, remove
e.preventDefault();
and place
return false;
at the VERY END of the on click function. return false does 3 things
e.preventDefault()
e.stopPropigation();
return immdediatly
I am an AJAX noob. I was writing code to understand it, but no matter what I couldn't make it work. Textarea in the code should update comment_area of comment of id=218 when user pressed "save" button. There is probably a mistake in my AJAX code which I couldn't find.
My AJAX script:
<script type="text/javascript">
$(document).ready(function() {
$("#save").submit(function() {
var text = $('#breaking_news_text').val();
var id = 218,
$.ajax({
type: "POST",
url: "update.php",
data: {comment_area:text , id:id}
success: function() {
alert("sucess");
}
});
});
});
</script>
<div id="b_news">
<form method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes"/>
</div>
</form>
</div>
My update.php file
<?php
include("./inc/connect.inc.php");
if(isset($_POST['comment_area']))
{
$update = mysqli_real_escape_string($mysqli, $_POST['comment_area']);
$sql = "update comments set comment_area='$update' Where id='".$_POST['id']."'";
$result = mysqli_query($mysqli, $sql);
}
?>
The submit works on a form and you have it on the input element.
Try:
$("#b_news form").submit(function(evt) {
evt.preventDefault(); //this is required to stop the default form submission
Documentation can be found here
Also, if these dom elements are dynamically loaded, you might want to read up on event delegation
This is my code:
<html>
<body>
<?php
include('header.php');
?>
<div class="page_rank">
<form name="search" id="searchForm" method="post">
<span class="my_up_text">ENTER THE WEBSITE TO CHECK GOOGLE PAGE RANK:</span>
<br /><br />
<input type="text" name="my_site"/></form></div>
<div class="p_ity">
PAGE RANK</div>
<div id="my_pass"></div>
<script>
function sub_form()
{
document.forms["search"].submit();
}
$(function () {
$('form#searchForm').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'check-google-page-rank.php',
data: $('form').serialize(),
success: function (data) {
$('#my_pass').html(data);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
The problem is the ajax post works perfect if I use a submit button in the form.It doesn't work if I use a sub_form() method to submit the form after on click event.My doubt is will the java script sub_form() method trigger the jquery ajax function or not?
Note:
The data returned by the post url is
echo "<img width=\"165\" height=\"55\" src=\"./images/page-rank/pr".$rank.".gif\" />"
document.forms[].property
This returns an array of all the forms in the current document.
Since it is a array, you should pass the index value as integer.
document.forms[0].submit();
this will submit the form, if you have this form as your first form in the html page from top.