I have UI with Input field and Submit Button,And After Entering Number in field and clicking on Submit Button. I want this to go to first.php file and second.php depends on the first.php response. At the end I want to show to value from second.php, Can you please help me on this.
And I am using AngularJS with PHP And I am creating 2 functions with in one controller and calling 2 functions at time by clicking on button Can you please suggest me on the approach?
HTML Code
<html>
<div ng-controller="get_controller">
<input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
<span class="input-group-btn">
<button type="submit" ng-click="sendAccountNumber();geValues()" class="btn btn-primary">Submit</button>
</span>
</div>
<div ng-controller="get_controller">
<table>
<tbody>
<tr>
<th ng-repeat="list in personDetails">{{list.Name}}
</th>
</tr>
<tr>
<td class="features" ng-repeat="list in personDetails">{{list.Location}}
</td>
</tr>
</tbody>
</table>
</div>
</html>
AngularJS
var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function($scope, $http) {
$scope.sendAccountNumber = function() {
var request = $http({
method: "post",
url: "first.php",
data: {
accountnumber: $scope.accountnumber
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
/* Check whether the HTTP Request is successful or not. */
request.success(function(data) {
console.log("Account Number " + data + " Sent to first.php");
});
}
$scope.geValues = function() {
$http({
method: 'POST',
url: 'second.php'
}).success(function(data) {
$scope.post = data;
$scope.personDetails = Employee;
})
},
});
You can call your next function call in the promise of the first call in the following way:
//First function
$scope.firstFunction = function(){
$http({
method: 'POST',
url: 'first.php',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).then(
function (response) {
var data = response.data;
$scope.secondFunction(data);
// not relevant
}, function (error) {
var data = error.data;
// not relevant
});
}
//Second function
$scope.secondFunction = function(data)
{
$http({
method: 'POST',
url: 'second.php',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).then(
function (response) {
var newData = response.data;
// not relevant
}, function (error) {
var newData = error.data;
// not relevant
});
}
And call a one function firstFunction() on button click only.
<button type="button" ng-click="firstFunction();" class="btn btn-primary">Submit</button>
FYI,
I would recommend to use ng-submit() event for form to submit the form data rather then submitting by submit event of your form.
And one more thing, why would you request two ajax calls ?
You can do both the server side operations in single call only.
Hope this helps you :)
Related
I have a form in index.php:
<form action="submit.php" method="post" id="registerSubmit">
<input type="text" name="name" id="name" placeholder="Name">
<button id="submit" type="submit">Submit</button>
</form>
<div id="result"></div>
When the form is submitted it gets intercepted by Jquery:
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "load.php",
method: "post",
data: "",
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
However, when the AJAX request gets sent to load.php. I am not able to access the super global post variable:
<?php
$name = $_POST['name'];
echo $name;
?>
I'm able to access the form data through Jquery, but I didn't want to have to parse JSON to send to Mysql. How can I access the super global post form data after the AJAX request and if it's not accessible, what are best practices for sending php form data through Ajax to Mysql?
You need to pass data through AJAX call
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "load.php",
method: "POST",
data: $(this).serialize(), // Send all form data to AJAX
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
You need to pass data through AJAX call When the form is submitted.
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
var name = document.getElementById("name").value;
var dataString ='name=' + name;
$.ajax({
url: "load.php",
method: "post",
data: "dataString",
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
In the load.php page
<?php
$name = $_POST['name'];
echo $name;
// code for insert in mysql with PHP.
?>
I am getting Id value from my AJAX and I am also able to display it. I set the Id value input text in the AJAX and displaying it on HTML like this <input value="4864" id="compare_id" type="hidden"> Now I have to pass that value to PHP to get the result from database.
Is there any idea how to do it?
AJAX
$(document).ready(function() {
arr = [];
$("[type=checkbox]").click(function() {
$.ajax({
type: "POST",
url: "includes/compare_process.php", //
data: 'users=' + arr,
dataType: 'json',
success: function(msg) {
$("#pics_name,#pics_Id").empty();
$.each(msg, function() {
$("#pics_Id").append("<input type=hidden value=" + this.Id + " id=compare_id name=compare_id>");
//alert(msg.id);
});
},
error: function() {
alert("failure");
}
});
});
});
//tried AJAX
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: "GET",
url: 'includes/compare_process.php?key=compare_details',
data: $('#search-form').serialize(),
success: function(response) {
//$('#response').html(response);
alert(response);
}
} );
});
});
PHP
<div class="bg-popup" style="display: none;" id="open_compare_popup">
//popup code here
<?php
$val2=htmlentities($_GET['compare_id']);
echo $val2;
$sql = "SELECT * FROM `request` WHERE Id IN($val2)";
?>
//end popup code here
This output I am getting from AJAX
<form action="#" method="get" id="search-form">
<span id="pics_Id">
<input value="4869" id="compare_id" name="compare_id" type="hidden">//output
<input value="4884" id="compare_id" name="compare_id" type="hidden">//output
<input value="5010" id="compare_id" name="compare_id" type="hidden">//output
</span>
<button class="action action--button action--compare" type="button" id="search-button" name="search-button"><span class="action__text">Compare</span></button>
</form>
I have to pass the input value to PHP after clicking on a button.
How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.
I need to refresh the table to show newly added row after sending the data from $http method. Below is my working code for adding the form values to mysql table. Appreciate if anyone can help me out with the angular way to achieve this.
JS Code:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('bookmarkCtrl', function($scope, $http) {
$scope.addThis = function() {
$http({
url: "addbookmark.php",
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $.param({
bookmarktitle: $scope.bookmarktitle,
bookmarkurl: $scope.bookmarkurl
})
}).success(function(data, status, headers, config) {
//refresh the table after success
}).error(function(data, status, headers, config) {
});
}
});
HTML
<div class="panel-body" ng-app="myApp" ng-controller="bookmarkCtrl">
<input ng-model="bookmarktitle" type="text" class="form-control" required>
<input ng-model="bookmarkurl" type="text" class="form-control">
<button type="button" class="btn btn-default" ng-click="addThis();">Submit</button>
<table class="table table-responsive">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<!-- repeat row -->
<tr>
<td>
<?php echo $row['bookmark_title'] ?>
</td>
</tr>
<!-- repeat row -->
</tbody>
</table>
</div>
#ismailvtl, angular is a client-side library, so typically the data would be populated through an ajax call from the client. In order to dynamically add a row, the data has to be accessible to the controller.
$scope.bookmarks = [];
$scope.getBookmarks = function() {
$http.get('/bookmarks').then(function(response) {
// should do validation here
$scope.bookmarks = response.data
}
}
$scope.getBookmarks();
Then, in your html, it should look like
...
<tr ng-repeat="bookmark in bookmarks">
<td>{{bookmark.bookmarktitle}}</td>
<tr>
...
Then, lastly, in your addThis() function:
$scope.addThis = function() {
$http({
url: "addbookmark.php",
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $.param({
bookmarktitle: $scope.bookmarktitle,
bookmarkurl: $scope.bookmarkurl
})
}).success(function(data, status, headers, config) {
var bookmark = {
bookmarktitle: data.bookmarktitle,
bookmarkurl: data.bookmarkurl
}
$timeout(function() {
$scope.bookmarks.push(bookmark)
}
}).error(function(data, status, headers, config) {
// handle error here
});
}
Alternatively, you can assign the bookmarks array directly in the view from the php using ng-init (something like ng-init="bookmarks=[{bookmarktitle: 'titlea',bookmarkurl: 'urla'},...]" with the values being supplied by php.
I am trying to update a value in my php file and present it in a textarea using jquery and ajax. to make it short, I have:
1- A Form with User Input and Submit button and a Text area
2- A PHP file called data.php
3 -and the html file
Here is my codes
<form>
<input type="text" name="name"><br>
<textarea name="wstxt" id="wstxt" cols="40" rows="5"></textarea>
<input type="button" name="txta-update" id="txta-update" value="Update Textarea" />
</form>
PHP is as simple as:
<?php
$name = "Jordano";
echo $name;
and here is the jquery
$(document).ready(function() {
$('#txta-update').click(function() {
$.ajax({
type: "GET",
url: "data.php",//get response from this file
success: function(response){
$("textarea#wstxt").val(response);//send response to textarea
}
});
});
});
can you please tell me how I can send the input value to php and update the textarea from new value?
Thanks
Update
Send data like this
data:{name:$('input[name="name"]').val()}
you js file becomes
$.ajax({
type: "GET",
url: "data.php", //get response from this file
data:{name:$('input[name="name"]').val()},
success: function (response) {
$("textarea#wstxt").val(response); //send response to textarea
}
});
or
$(document).ready(function () {
$('#txta-update').click(function () {
var name_val = $('input[name="name"]').val();
$.ajax({
type: "GET",
url: "data.php", //get response from this file
data: {
name: name_val
},
success: function (response) {
$("textarea#wstxt").val(response); //send response to textarea
}
});
});
});
To get value in PHP
<?php
$name = $_GET['name'];
echo $name;
?>