submit a value from span field - php

i have a from with a submit button
after using jquery the page will have :
for(var i=0 ; i <10 ; i++){
'<span class="ioAddConcept">'+ currentConcept[i] +'</span>\n\
with\n\
<span class="ioAddRelation">'+ currentRelation[i] +'</span>\n\'
}
(that piece of code is just an example)
the variables currentConcept[] and currentRelation[] i got its values from database using Ajax
**i am using PHP**
and my question how to submit the page with these two variables ?
i mean in the server i hope something to be like this
$concepts = $_POST['currentConcept[]']

Get these values in jQuery like this:
var ioAddConcept = $(".ioAddConcept").html();
var ioAddRelation = $(".ioAddRelation").html();
Now you can set these values into form text boxes:
$('input.ioAddConcept').text( ioAddConcept );
$('input.ioAddRelation').text( ioAddRelation );
OR if you are submit form via AJAX request:
$.ajax({
url : '/path/to/action.php',
type : 'POST',
data : 'value1=' + ioAddConcept '&value2=' + ioAddRelation,
success : function( data ) {
alert(data);
}
});
Get these values on server side:
print_r( $_POST );

Add an ID to your span element
<span id="ElementID"> your variable text here</span>
Then use jquery to get the text out
var spanText = $('#ElementID').html();

Something like that
var currentConcept = $('currentConcept').html();
And then you can send this var as a param in you request to server
Update
$("form").submit(function() {
var currentConcept = $('.currentConcept').html(); // it's an Array
var currentRelation = $('.currentRelation').html(); // it's an Array
$.ajax({
url : // your URL,
data : 'currentConcept=' + currentConcept '&currentRelation=' + currentRelation,
success : function( html ) {
// write your code here
}
});
}
// server side (php)
$currentConcept = $_GET('currentConcept');
$currentRelation = $_GET('currentRelation');

Related

Sending multiple data through jquery ajax

I am building a form to process text input, multiple check boxes and 4 images. currently I am to process the check boxes using the each function to put all the values of the checkboxes in an array before sending it through ajax. Now the problem is that I can't send the images with ajax too. And also I can't access the images too.
Code:
$(document).ready(function () {
//alert("this page works");
$('#uploadProperty').on('submit',function (e){
e.preventDefault();
var hname = $('#hname').val();
var location = $('#location').val();
var htype = $('#htype').val();
var rooms = $('#rooms').val();
var price = $('#price').val();
var hdetails = $('#hdetails').val();
var feature = [];
$('.feature').each(function() {
if($(this).is(":checked")){
feature.push($(this).val());
}
});
// if (feature.length == 0)
// alert("Select atleast 1 Feature");
// else{
// feature = feature.toString();
// alert(feature);
// }
var file1 = $('#file4').val();
//alert(file1);
$.ajax({
url : 'core/upload.php',
type : 'POST',
data : new FormData(),
contentType : false,
processData : false,
success : function (ep){
alert(ep);
}
});
});
});
You need to upload images first via ajax ( ex: http://hayageek.com/docs/jquery-upload-file.php ) and after make another ajax for the form fields. But you need an ID link between Property and images. you cand add an empty record and remember the mysql_insert_id to make update with the form fields and insert images or update ( depend how is your table structure )
So if i got it right, you want to fill the FormData object. Because currently it's empty.
You can use append method:
var formData = new FormData();
var $myField = $('#myField');
formData.append('myField', $myField.val());
To append file:
var $fileField = $('#fileField');
var myFile = $fileField.get(0).files[0];
formData.append('myFile', myFile);
To append multiplie files you should set the name properly:
formData.append('myFile[]', myFileFirst);
formData.append('myFile[]', myFileSecond);
Check it here: Uploading multiple files using formData()
Also, you can grab the whole form data through constructor:
var form = $('form').get(0);
var formData = new FormData(form);

How call another php page after jQuery / Ajax success method?

I have following Ajax Success method :
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success <b class=\"text-danger\"> Delete</b></div>").hide().appendTo(parent).fadeIn("slow");
});
console.log(data);
},
In this success method you see that I have a link which is :
Delete
and
console.log(data)
This console.log(data) is returning following String :
mpic_list_573ecaafae8220.41741946 |76|40
Now I want call a php page e.g : delete_upload_image.php after click on this link Delete with a string mpic_list_573ecaafae8220.41741946 and 76 and 40
I mean :
In delete_upload_image.php page I can get 3 string which is passed when I click on the delete link.
`
You must either bind the click to a function where you send the user to the desired page or directly make a link in the button.
First, if you want to send the differents params separately, you must split them.
var params = data.split('|');
And then use it as you want, for example bind the click method to the new link to create a new ajax call.
$('#delete_upload_image').on('click', function() {
var params = data.split('|');
var url = "delete_upload_image.php?param1=" + params[0] +"&param2=" + params[1] + "&param3=" + params[2];
// Make AJAX call as you want to url
$.get(url);
});
Catch your parameters in your data using split method :
var stringParam = data.split('|')[0];
var int1Param= data.split('|')[1];
var int2Param= data.split('|')[2];
then put your parameters inside your link :
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success <b class=\"text-danger\"> Delete</b></div>").hide().appendTo(parent).fadeIn("slow");
you must put your data in your link tag:
<a href=\"#delete_upload_image\" data-params='" + data + "'>Delete</a>
then you can send delete requests to "delete_upload_image.php" by below codes:
$(function(){
$('body').on('click', '[href=#delete_upload_image]', function() {
var params = $(this).data('params').split('|');
var url = "delete_upload_image.php?param1=" + params[0] +"&param2=" + params[1] + "&param3=" + params[2];
// Make AJAX call as you want to url
$.get(url);
});
});
now I understand what is your problem;
You want to get the parameters from console.log.
but you can not get the console.log value directly.
What you can do is:
hook the console.log function so that you store when it logs by this code:
var store = '';
var oldf = console.log;
console.log = function(){
store = JSON.stringify(arguments);
oldf.apply(console, arguments);
}
use below function to get parameters from console_store variable and delete image:
function delete_image()
{
var params = store.split('|'),
queryString = $.param({param0:params[0], param1:params[1], param2:params[2]}),
url = "delete_upload_image.php?" + queryString;
$.get(url);
}
call the function on link click:
$('body').on('click', '[href=#delete_upload_image]', delete_image);

Jquery - Changing URL used in load()

I'm using the following to auto refresh the contents of a div.
$(document).ready(function() {
$("#log").load("test.php?q=" + $('#sq').val());
var refreshId = setInterval(function() {
$("#log").load("test.php?q=" + $('#sq').val());
}, 1000);
$.ajaxSetup({ cache: false });
});
This seems to work fine. I have a text field with the name 'sq' and anything entered in there is searched for by test.php.
My page also has 2 other form fields.
A checkbox and another text field. The checkbox has the id 'chk' and the text field 'txt'.
What I would like to do is change the URL being used by load() if the checkbox is ticked and a value is entered in the text field. Obviously this will also need to include 'sq'.
Can some one point me in the right direction.
The URL with out the check box being ticked is : ( is it is now )
test.php?q=VALUE_FROM_sq
With the checkbox ticked it needs to be :
test.php?s=1&txt=VALUE_FROM_txt&q=VALUE_FROM_sq
Then test.php can use $_REQUEST to get the values passed.
My network box only supports php4 so that does limit me some..
Can some one point me in the right direction. Thanks
Just add some logic in the code:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
var refreshId = setInterval(LoadLog, 1000);
LoadLog();
});
function LoadLog() {
var sq = $('#sq').val();
var text = $("#txt").val();
var url = "test.php?q=" + encodeURIComponent(sq);
if ($("#chk").is(":checked") && text.length > 0)
url += "&s=1&txt=" + encodeURIComponent(text);
$("#log").load(url);
}
You could save the URL in a separate variable and update it on the changed event of the checkbox.
var url = "test.php?q=VALUE_FROM_sq"
$(document.body).on('change', '#chk', function (event) {
if ($(this).is(':checked')) {
url = "test.php?s=1&txt=VALUE_FROM_txt&q=VALUE_FROM_sq"
} else {
url = "test.php?q=VALUE_FROM_sq"
}
}

jquery post data to a php script and display it immediately in the same php script file

How to post data to a php script (showitemid.php) using ajax and open the same script (showitemid.php) immediately in a thickbox on a hyperlink click and display that posted data. Below is my code:
postitemid.php
This file consists of multiple check-boxes. The user will tick the checkboxes and click a hyperlink. On clicking the hyperlink all the selected check-box values would be posted to showitemid.php and then immediately showitemid.php would open in a thickbox and display the received values. But it isn't receiving any values in my code ? Need help.
$('#showitem).click(function()
{
var data = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
$.ajax({type: 'POST',
url: 'showitemid.php',
data: data,success: success,dataType: dataType});
});
showitemid.php
$data = '';
if (isset($_POST['data']))
{
$data = $_POST['data'];
}
elseif (isset($_GET['data']))
{
$data = $_GET['data'];
}
echo 'd='.$data;
use something like this
$('#showthickbox').click(function()
{
var data = $('input:checkbox:checked').map(function() {
return this.value;
}).get();//your code
$.post("showitemid.php",{data:data},function(data){
$("#thickbox").html(data);
})
})
})
in your showitemid.php
echo "your data";
The main problem with the original code is the data being sent has no key named data to match $_POST['data']) so $_POST['data']) is empty. You have to send key/value pairs, you are only sending a value with no key. You are likely getting a bit confused since you use the same variable name constantly
var dataArray = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
var dataToServer= { data : dataArray} /* now have the key to match $_REQUEST in php */
Now can use AJAX shorthand method load() to populate content
$('#myContainer').load( "yourfile.php", dataToServer, function(){
/* new html exists run open thickbox code here*/
})

How do i change this into JSON?

How can I send multiple values to be picked up like this using JSON?
foreach($_POST['listItem'] as $key => $values){
list($eventDate, $eventTitle) = $values;
}
At the moment the values are sent as follows. But this doesn't appear to work properly as it is only sending some of the string. I also can't figure out where/how to send the caltitle value.
This is sending me crazy. Any help would be great.
var txt = $("#listbox");
var caltitle = copiedEventObject.title
var dtstart = $.fullCalendar.formatDate(copiedEventObject.start, 'yyyyMMdd');
var txt = $('#listbox');
txt.append("<li class ='listItem'> " + dtstart + "</li>")
// remove the element from the "Draggable Events" list
$(this).remove();
}
});
$('#calendarform').submit(function(e) {
var form = $(this);
var listItems = $('.listItem');
listItems.each(function(index){ //For each event do this:
var listItem = $(this);
$("<input type='hidden'/>").val(listItem.text()).appendTo(form).attr('name', 'listItem[' + index + ']');
});
//Get text information from elements
});
EDIT:
(using JSON)
$('#calendarform').submit(function(e) {
var form = $(this);
var going_to_be_json = [];
list.each(function(i, item) {
going_to_be_json.push({
'id':'test',
'title': 'test'
});
});
$('#stuff').val( JSON.stringify(going_to_be_json) );
});
Prepare the data into an array of objects then convert that array to JSON using JSON.stringify() and set the hidden form value to said string (or use XHR to submit it to the server).
Here is a very limited example of how to prepare the data:
var going_to_be_json = [];
list.each(function(i, item) {
going_to_be_json.push({
'id':item.id,
'title': item.title,
'date': (new Date()).now()
});
});
hidden_form_element.val( JSON.stringify(going_to_be_json) );
and on the server
<?php
$json_data_string = $_POST['hidden_form_field_containing_json_data']; // sanitize however
$array_data = json_decode($json_data_string);
More can be ready about JSON (Javascript Object Notation) from json.org and the Tag Wiki (although the tag wiki just shows you more examples and links)
it seems you needed a little more direction. I was hoping you wouldn't just copy and paste what I had and you would read and attempt to understand what it is doing....
$('#calendarform').submit(function(e) {
var form = $(this),
listItems = $('.listItem'),
data = [],
hidden = $('<input />'); // create a hidden field for the form.
// or just select the hidden form element from the page
hidden[0].type = 'hidden'; // set the type
hidden[0].name = 'some_name_for_php_to_recognize'; // and name
listItems.each(function(i,el){
data.push({'index': i, 'text': $(el).text()});
});
hidden.val(JSON.stringify(data));
$(this).append(hidden); // not needed if the hidden element is already in the DOM
});
send it with jQuery Post or Get method and fetch it by php you can send multiple values
use $.post or $.get

Categories