I am using a jquery change event using a slider to present to a user the amount of inputs that they select from the slider. I am struggling to find a way to process these results in php and insert into mysql. I would be grateful if someone could start me off with this. Thank you
for(var i = 0;i < $(this).val();i++) {
$("#boxamount").append('<div data-role="fieldcontain"><label for="boxamount" class="ui-input-text">Enter box ' + (i + 1) + ' number:</label><input type="text" name="boxamount['+i+']" id="boxamount['+i+']" class="boxamount ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" /></div>')
}
Well, you could loop over the text boxes, store the values in an object and submit them via an ajax request. Here's some rough code below.
var data = {};
$('input[name^="boxamount"]').each(function(){
data[ $(this).attr('id') ] = $(this).val();
});
Then perform an ajax request.
$.ajax({
type: "POST",
url: "yourServerScript.php",
data: data,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Related
I have an empty select in HTML that i want to populate through the database.
I have a button that opens a Modal and passes an id. With that ID i fetch the Data from the database and fill all the form fields for one company. However a company can have multiple employees, so i want to fill a select so that all employees that have the same ID as the company, will be shown.
For example:
Company ID is 43, i fill all the form fields (name, location etc.) using this id and fetching the data from the database.
In the table employee there are 3 employees that have the ID 43 as FK, let's name them hans, max and peter.
Now i want to populate a select that shows all 3 of them, so that an user can select one of them and depending on that selection an empty form will be populated, so that it can be edited.
I'm assuming this involves a loop, but i'm not sure how to do it. Not sure if it's relevant but all my mysqli calls use prepare, as i've read this is more secure.
The loop i've tried so far is this, but it's not working. I'm not sure if it's the loop that isn't working or if i'm trying to populate the select wrong.
This is inside a select and all the input fields get populated.
while ($row = $result->fetch_assoc()){
$prename= $row['prename'];
$surname= $row['surname'];
$users_arr[] = array("prename" => $prename, "surname" => $surname);
}
Then i return the data as follows
echo json_encode(array('users_arr'=>$users_arr));
and try to populate the select in the AJAX success
$.each(data.users_arr, function(key, val){
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});
Thanks
Edit: The complete Ajax call:
$.ajax({
url: url,
data: data,
dataType: 'json',
cache: false,
type: "POST",
error: function () {
$('#alertdone').removeClass('hidden');
},
//if ajax call is successful populate form fields and hide error message
success: function (data) {
//hide error message
$('#alertdone').addClass('hidden');
$.each(data.users_arr, function(key, val){
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});
}
});
});
In your AJAX success you can try
var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});
Edit
$.ajax({
url: url,
data: data,
cache: false,
type: "POST",
error: function () {
$('#alertdone').removeClass('hidden');
},
success: function (data) {
//hide error message
$('#alertdone').addClass('hidden');
var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});
}
});
});
I'm developing a web based inventory system. In my project i have a user management page and it has a table to view all the users.
+----------------------------------------+
+ username + user type + + +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
+ sample + sample + edit + delete +
+----------+-----------+--------+--------+
It has two buttons to edit user type and to delete user from the database. i need to get username from this table to php script, to execute delete query. I tried this,
$(document).on('click','.remove' ,function(){
var $item = $(this).closest("tr").find('td:eq(0)').html();
console.log($item);
<?php $username = <script>$item</script>?>
});
but i can't pass this 'username' variable to php. How to do this? Thank you :-)
To achieve this you need to perform an ajax request like this:
$(document).on('click','.remove' ,function(){
var $item = $(this).closest("tr").find('td:eq(0)').html();
$.post("url/file.php", { // your php file
username: $item
}, function(data, status){
// you will get response from your php page (what you echo or print)
});
});
PHP side:
$username = $_POST['username'];
//Do whatever you want ...
echo "success";
You can do it by Ajax, this is suggested for your code:
$.ajax({
url: "data.php",//file wich has query select to db table
data: {id:theid},//describe your data here
dataType: 'json',// type of data that will you get (JSON/HTML).
type: 'POST',//sending type (POST/GET)
success: function(data) {
//do change the select option
}
});
Goodluck!
My experience with jQuery is very limited, and im on a very steep learning cure.
I have a dynamic form which is generated based on main and sub menu, placing marker points in each row which has an inputfield, I have managed to create a loop which looks for all the marker points and return the field_name and the field_value of any input field.
$('td[edit="1"]').each(function(i, el) {
field_name = $(el).attr('fieldname');
field_val = $('#'+field_name).val();
alert(field_name + " = " + field_val);
});
What I am having trouble with now, is converting this in to an array or JSON and pushing it to a PHP file which can then pick up the results.
Here is an example of how I currently submit a forms data to a PHP file, however is not dynamic as I have to specify which fields and values I want to send.
$.ajax({
type: "POST",
url: "form.php",
data: {
title : title,
age : age
}).done(function(data) {
results = $(data).find('data').html();
}).fail(function() {
alert("error");
}
);
If i have clearly understand your problem then You will have to use serialize method of jquery to send fields to php file. You can do like
data:$('form').serialize(),
It will send all the fields to php file.
As data you can user Jquery on the form to create an array of all the data:
https://api.jquery.com/serializeArray/
$.ajax({
type: "POST",
url: "form.php",
data: $('#idOfForm').serializeArray()
}).done(function(data) {
results = $(data).find('data').html();
}).fail(function() {
alert("error");
});
I have a problem with my JQuery script. I am making a 2d chat where people have their own figure like Habbo hotel, but the JQuery script that is suppose to move the figures is bugging.
I think it is easier to show the problem:
Click here to see the problem
I am using the following script to update the figures:
function UpdateRoom() {
var data = 'roomId='+roomId;
$.ajax({
type: "GET",
url: "chatfunctions/updateroom.php",
dataType: 'json',
data: data,
success: function(data){
$.each(data, function(i, data) {
var temp = parseInt(data.field);
$('#f' + temp).append('<div class="user" id="'+charId+'" />');
});
}
});
}
The #f+temp is the id of the field that the figure should be places at. The charId is the id of the figure.
And then I am calling the script every 500 miliseconds:
window.setInterval(function() {
UpdateRoom();
}, 500 );
Im not sure if this is enough code and example for you guys to help me. If not please tell me if I need to provide more for you to help me. My guess is that it is the .append(); function that is used wrong, but I'm no expert in JQuery.
You are only continuing to append but not replacing anything.
Try to either use .html() or .empty().
$.each(data, function(i, data) {
var temp = parseInt(data.field);
$('#f' + temp).html('<div class="user" id="'+charId+'" />');
});
or
$.each(data, function(i, data) {
var temp = parseInt(data.field);
$('#f' + temp).empty(); // clear out all content
$('#f' + temp).append('<div class="user" id="'+charId+'" />');
});
not knowing your code you might need to move the call to .empty() outside your each loop.
I have put together an ajax powered chat/social network with jquery, PHP - but am having problems with the javascript.
I have a js file in the main page which loads the php in a div container, the js file is underneath the div. But only one function for posting a msg seems to work but the others do not.
I have tried including the js file with the dynamically loaded php at the end of the ajax load the functions work fine but am getting mutiple entries of the same message/comment.
I am pretty sure its not the PHP as it seems to work fine with no ajax involvment. Is there a way to solve this?
this is the function that works fine:
$("#newmsgsend").click(function(){
var username = $("#loggedin").html();
var userid = $("#loggedin").attr("uid");
var message = $("#newmsgcontent").val();
if(message == "" || message == "Enter Message..."){
return false;
}
var datastring = 'username=' + username + '&message=' + message + '&uid=' + userid;
//alert(datastring);
$.ajax({
type: "POST",
url: "uploadmsgimage.php",
data: datastring,
success: function(data){
document.newmessage.newmsgcontent.value="";
//need to clear browse value too
$('.msgimage').hide('slow');
$('#addmsgimage').show('slow');
$(".usermsg").html(data);
$("#control").replaceWith('<input type="file" name="file"/>');
$(".msgimage").remove();
}
});
});
And this is one of them that does not work:
//like btn
$(".like").click(function(){
var postid = $(this).attr("pid");
var datastring = 'likeid=' + postid;
$.ajax({
type: "POST",
url: "addlike.php",
data: datastring,
success: function(data){
$(".usermsg").html(data);
}
});
});
From your post, I'm guessing that each message has a "Like" button, but you have 1 main submit button. When messages load dynamically, you have to assign the .like to each one when they come in, otherwise it will only be assigned to the existing messages.
The problem, from what I gather (and this is a guess) would probably be fixed using live so jQuery will automatically assign the click function to all messages including dynamically loaded messages; so instead of:
$(".like").click(function(){
Try this:
$(".like").live('click', function(){
If that doesn't solve the problem, then I'm probably not understanding what it is.