Actually i just trying to get all input data from serialize but i get the values in int type like age & id but unable to get value of name.
following is my code.
<html>
<body>
<form id ="form" method="post" class= "form">
Name<input type = "text" name = "name" /><br>
Age<input type = "number" name = "age" /><br>
ID<input type = "number" name = "id" /><br>
<input type = "submit" name = "submit"><br/>
</form>
<p id="result"></p>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#form").submit(function () {
var data = $("#form").serialize();
insertStudent(data);
return false;
});
function insertStudent(data) {
$.ajax({
url: 'process.php',
data: data,
type: 'POST',
dataType: 'json',
success: function (data, textStatus) {
$("#result").html(data);
},
error: function () {
alert('Not OKay');
}
});
}
});
</script>
</body>
</html>
process.php
print_r($_POST);// give error but if i try to get id then
print_r($_POST["id"])// print value
print_r($_POST["name"])// doesn't print name
$(document).ready(function () {
$("#form").submit(function (e) {
//e.preventDefault();
var data =$(this).serialize();
insertStudent(data);
return false;
});
function insertStudent(data) {
$.ajax({
url: 'process.php',
data: data,
type: 'post',
dataType: 'html',
success: function (data, textStatus) {
$("#result").html(data);
// console.log(data);
},
error: function () {
alert('Not OKay');
}
});
}
});
Related
I have been trying to upload an image with AJAX but somehow it's not working. CodeIgniter always throwing 'You have not selected any file'.
Thanks in advance.
Here's my Controller -
class Upload extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
}
public function index() {
$this->load->view('upload/upload');
}
public function upload_file() {
$config['upload_path'] = './uploads/Ajax/';
$config['allowed_types'] = 'gif|jpg|png|doc|txt';
$config['max_size'] = 1024 * 8;
$this->load->library('upload', $config);
$title=$this->input->post('title');
if (!$this->upload->do_upload('userfile')) {
echo $this->upload->display_errors()."<br>".$title;
}
else {
$data = $this->upload->data();
echo $data['file_name']." uploaded successfully";
}
}
}
/* end of file */
And here's the view
<!DOCTYPE HTML>
<html>
<head>
<title>AJAX File Upload</title>
<script src="<?php echo base_url(); ?>assets/js/jquery-1.11.3.js"> </script>
<script src="<?php echo base_url(); ?>assets/js/AjaxFileUpload.js"> </script>
<script>
$(document).ready(function() {
$('#upload-form').submit(function(e) {
e.preventDefault();
if (typeof FormData !== 'undefined') {
$.ajax({
url : '<?php echo base_url(); ?>upload/upload/upload_file',
type : 'POST',
data : FormData,
beforeSend: function () {
$("#result").html("Uploading, please wait....");
},
error: function () {
alert("ERROR in upload");
},
success : function(data) {
$('#result').html(data)
}
});
}
else {
alert("Your browser doesn't support FormData API!");
}
});
});
</script>
</head>
<body>
<h1>Upload File</h1>
<form method="post" action="" id="upload-form" enctype="multipart/form-data" accept-charset="utf-8">
<p>
<label for="title">Title</label>
<input type="text" name="title" id="title" value="" autocomplete="off">
</p>
<p>
<label for="userfile">File</label>
<input type="file" name="userfile" id="userfile">
</p>
<input type="submit" name="submit" id="submit">
</form>
<h2>Result</h2>
<span id="result"></span>
</body>
I have tested in Firefox 43, IE11 & Chrome 43
<script>
$(document).ready(function() {
$('#upload-form').submit(function(e) {
e.preventDefault();
if (typeof FormData !== 'undefined') {
$.ajax({
url : '<?php echo base_url(); ?>upload/upload/upload_file',
type : 'POST',
secureuri :false,
fileElementId :'userfile',
data : FormData,
beforeSend: function () {
$("#result").html("Uploading, please wait....");
},
error: function () {
alert("ERROR in upload");
},
success : function(data) {
$('#result').html(data)
}
});
}
else {
alert("Your browser doesn't support FormData API!");
}
});
});
</script>
You need to add xhr function in ajax request
$(document).on('submit','#form_id',function(){
var formData = new FormData(this);
$.ajax({
type:'POST',
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
return xhrobj;
},
url: $(this).attr('action'),
data:formData,
cache:false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
});
you can use
$(document).on('submit','#form_id',function(){
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
});
no plugin required for this, for easiness you can use ajaxForm jquery plugin and just use
$('#form-id').ajaxSubmit({
// same config as ajax call but dont use data option right here
});
have a look on http://malsup.com/jquery/form/ to for more information about plugin
Use this
$("#upload-form").on('submit' ,function(){
var form = $(this);
$.ajax({
url: form.attr('action'),
data: new FormData(form[0]),
dataType: 'json',
method: 'POST',
cache: false,
contentType: false,
processData: false,
success: function(data){
}
});
});
Use $.ajaxFileUpload instead $.ajax, this should work, if not please let me see your AjaxFileUpload.js
$(document).ready(function() {
$('#upload-form').submit(function(e) {
e.preventDefault();
if (typeof FormData !== 'undefined') {
$.ajaxFileUpload({
url :'./upload/upload_file/',
fileElementId : 'userfile', // your input file ID
dataType : 'json',
//
data : {
'title' : $('#title').val() // parse title input data
},
beforeSend: function () {
$("#result").html("Uploading, please wait....");
},
error: function () {
alert("ERROR in upload");
},
success : function(data) {
$('#result').html(data)
}
});
}
else {
alert("Your browser doesn't support FormData API!");
}
});
});
I am trying to get the values of the first 9 clicked buttons and put them into an array named $u_input. I actually found this, but its in javascript.
my html:
<div>
<button name="btn1" type="submit" id="btn1" value="1" style="width:50%;height:40%;margin-left: auto;margin-right: auto; float:left" class="ui-btn"></button>
<button name="btn2" type="submit" id="btn2" value="2" style="width:50%;height:40%;margin-left: auto;margin-right: auto;float:right" class="ui-btn"></button>
</div> // I have up to 9 buttons, thats only a piece
my javascript:
$(document).ready(function(){
$('.ui-btn').click(function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'escreen.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
});
});
});
my php:
if (isset($_POST['action'])) {
$u_input = array($_POST['action'](1), $_POST['action'](2), $_POST['action'](3), $_POST['action'](4));
echo $u_input;
}
Just loop through the buttons with the following code:
jQuery(document).ready(function($){
var ajaxurl = 'escreen.php',
$values = [];
$('button').each(function(){
$values.push($(this).val());
});
$.ajax({
url: ajaxurl,
type: 'post',
data: {
buttons: $values,
},
success: function (result) {
console.log('Yay it worked');
},
error: function (xhr, ajaxOptions, thrownError) {
console.log('Something went wrong');
}
});
});
An even nicer way to do it would be to set a name for each property in your array:
jQuery(document).ready(function($){
var ajaxurl = 'escreen.php',
$values = [];
$('button').each(function(){
$values[$(this).attr('name')] = $(this).val();
});
$.ajax({
url: ajaxurl,
type: 'post',
data: {
buttons: $values,
},
success: function (result) {
console.log('Yay it worked');
},
error: function (xhr, ajaxOptions, thrownError) {
console.log('Something went wrong');
}
});
});
The array $values should contain the following:
[button1: "value1", button2: "value2", button3: "value3"]
So in your PHP file you can retreive it by using:
$_POST['buttons']['button1']
i want to populate two fields when some one fill up card no.
<input type="text" id="name" name="name" class="form-control" Value="<?php echo $grow['name']; ?>">
<input type="text" id="address" name="address" class="form-control" Value="<?php echo $grow['address']; ?>">
but this code populate field one by one. can any one suggest be better code for populating two fields from database. Thank you
jquery
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k=$(this).val();
var q="name";
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q='+q,
cache: false,
success: function(data)
{
if(data){
$("#name").val(data);
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
$("#address").val(data);
}
}
});
}else
$("#name").val("");
$("#address").val("");
}
});
});
});
</script>
getresult.php
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select * from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
echo $row[$q];
?>
Try to extract both name and address from database and json them
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select address,name from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
$result = array(
'name'=>$row['name'],
'address'=>$row['address']);
echo json_encode($result);
After that parse them via jquery
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
var parsedData = jQuery.parseJSON(data);
$("#name").val(parsedData.name);
$("#address").val(parsedData.address);
}
}
});
Javascript Code:
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k = $(this).val();
var q = "name";
$.ajax({
type: 'POST',
url: "getresult.php",
data: 'k='+k,
cache: false,
success: function(data)
{
var jsonArr = $.parseJSON(data);
if(typeof response =='object')
{
$("#name").val(jsonArr.name);
$("#address").val(jsonArr.address);
}
else
{
$("#name").val("");
$("#address").val("");
}
}
});
});
});
</script>
PHP Code:
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k = $_POST['k'];
$sql = mysql_query("select * from inward where krishi='$k'");
$row = mysql_fetch_assoc($sql);
echo json_encode(array('name' => $row['name'], 'address' => $row['address']);
?>
What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
i have a website with a jquery search form. I have the searchboxes in every page of the site indide the header. Once you enter the searchwords there it redirects you the the search.php
What i want to do is to make the form submitted as soon as the page loads, because i send the data to the searchbox inside the search.php
Example: in page 1 i enter something and click submit. In search.php loads and in the main search field i have somethis(what i entered before). But i have to click again the submit to see the results. Any idea how can i make the form autosubmit when im being redirected? So i can see the results instantly.
Here's the code:
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="<?php $_GET['q']; ?>" placeholder="Enter band, artist, name..." autofocus/>
<input type="submit" value="Go" />
<br />
</form>
and the jquery:
<script type="text/javascript">
$(function() {
//-------------- Update Button-----------------
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
//---------------- Delete Button----------------
});
</script>
$(function(){
$('#myForm').trigger('submit');
});
When the page is ready you simply trigger the submit using jquery.
$(function() {
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
$(document).ready(function(){
$('#myForm').submit();
});
You can try this way.
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="" placeholder="Enter band, artist, name..." autofocus/>
<input id="button-submit" type="submit" value="Go" />
</form>
<script type="text/javascript">
$(function() {
function _myFunction () {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
}
$("#button-submit").click(function(e) {
e.preventDefault();
_myFunction();
return false;
});
_myFunction(); //This is where the magic happens
});
</script>
By doing that, the page will trigger on loading the function that is used when you click on the button.