I want to pass values of multiple checkboxes to mysql using array via ajax(Jquery).
Any ideas?
I wrote two pices of code , maybe some one help me to combine them?
$(document).ready(function(){
var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
}).get();
$("#ajaxDiv").html(selected);
});
AND
<script>
$(document).ready(function () {
$('.item').change(function(){
if($(this).is(':checked')){
var name = $(this).val();
$.post('load.php', {name:name}, function(data){
$('#name-data').html(data);
});
}
});
});
</script>
2nd code: in "load.php" you can access the sent values by using $_POST['name'], etc and put them in the database with a simple mysqli-query. dont Forget to check the values, before you put them into the database.
Related
How to print the multiple input boxes using jquery
I am using the following code
<script type="text/javascript">
$(document).ready(function(){
$("#taxId").change(function(){
var tax_id=$("#taxId").val();
$.ajax({
type:"post",
url:"<?php echo base_url();?>index.php/pranasInventory/get_tax_detail",
data:{tax_id:tax_id},
success:function(data)
{
var json_obj = $.parseJSON(data);//parse JSON
var len=json_obj.length;
for (var i=0;i<len;i++)
{
var output=json_obj[i].tax_detail+"<input id='taxcal' name='taxcal' placeholder='0.00'>";
$('#taxDetail').html(output);
console.log(output);
}
}
});
});
});
</script>
It print only one input tag.
my console message like this
Service tax # 14%<input id='taxcal' name='taxcal' placeholder='0.00'>
swachh bharat cess # 0.5%<input id='taxcal' name='taxcal'placeholder='0.00'>
I want print two input box.
please help me
The html function replaces the whole content.
You might replace
var len=json_obj.length;
for (var i=0;i<len;i++) {
var output=json_obj[i].tax_detail+"<input id='taxcal' name='taxcal' placeholder='0.00'>";
$('#taxDetail').html(output);
console.log(output);
}
with
$('#taxDetail').append(json_obj.map(function(obj){
return $("<input placeholder='0.00'>");
});
but you need to decide how to handle the ids of the added inputs as you can't obviously use the same for all.
.html replaces the whole content of the div. You must use JQuery append or prepend methods.
I am working with weather api, my intention is to display the json data into simple html view....
The problem is that (perhaps) the above script not working at all, even alert, if i am doing it wrong please someone guide....
Script and html
<div id ="fj"></div>
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//do some thing with json or assign global variable to incoming json.
var tasks = $.parseJSON(dataDD.city);
alert(tasks);
//alert('empLoggedId');
$.each(tasks, function(key, value) {
$("#fj").append(data.weather.description);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="fj"></div>
Any kind of hep or reference will be appreciated
Thanks for your time
Here you go, http://jsfiddle.net/9c2tb8xk/
I am not sure what you are trying to list but I think this is what you want.
$(document).ready(function() {
var teams;
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?lat=33.5689&lon=72.6378&cnt=10", function(dataDD) {
//$.getJson parses for you, dont try to parse it again.
var tasks = dataDD.list //tasks is list property of dataDD
$.each(tasks, function(key, value) { //for each value in list will be in value
$("#fj").append(value.weather[0].description); //I used the value as a specific item from list.
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id ="fj"></div>
I am trying to get all the values present in my dynamic HTML table and POST the values to AJAX.
I have HTML table like this
When i press '+' , I can able to add rows dynamically . When i click save, How to POST array values from this HTML table to AJAX, so that i can meanwhile INSERT those values into MYSQL
I have tried getting the 'text' of each td present in my table
var rows = $("tbody tr",$("#myTable")).map(function() {
return [$("td",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
This is getting me -> <input type="text"> and so on.
you are returning the innerHTML, which is... HTML.
you can get the value of a input element with .val()
how does this work for you?
return $("td input").map(function() {
return $(this).val();
});
Use serialize function using jQuery
<script type="text/javascript">
(function ($) {
$('#formID').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '/pathTo/process_form.php',
data: $('#formID').serialize()
});
});
})(jQuery);
</script>
var rows = $("td input",$("#myTable")).map(function() {
return { name : $(this).attr('name'), value :$(this).val()};
});
and you should get :
[
{
name : 'inputname',
value : 'inputval'
},
{ ... }
]
This would return an array like the .serialize() method
I have an issue with jQuery.each(). I retrieve json data from another php file then I want to print specific key from it.
here is the js :
<div class="row" id="fetchmember">
<script type="text/javascript">
jQuery('#group').change(function() {
var id_group = this.value;
var memberjson = "fetchmember.php?group="+id_group;
jQuery.getJSON(memberjson,function(data){
jQuery.each(data, function(i, item) {
jQuery("#fetchmember").empty().append("<li>"+item.name+"</li>");
});
});
});
</script>
</div>
JSON result from one of the selected option :
[{"id":"1645819602","name":"Michael Great","first_name":"Michael","last_name":"Great"},
{"id":"100000251643877","name":"George Pambudi","first_name":"George","last_name":"Pambudi"}]
I want to print all of name from the json, but it print only last name key of the json. I have tried to use .html() and it also returns only last name key. What's wrong with my code?
Any advice and helps would be greatly appreciated. Thank you very much
You are emptying the div first and then appending :
jQuery("#fetchmember").empty().append("<li>"+item.name+"</li>");
Instead just use :
jQuery("#fetchmember").append("<li>"+item.name+"</li>");
Don't empty it in the loop if you don't want to keep only the last data. Change your callback to
jQuery("#fetchmember").empty();
jQuery.each(data, function(i, item) {
jQuery("#fetchmember").append("<li>"+item.name+"</li>");
});
Note that you can make one append if you want :
jQuery("#fetchmember").html(data.map(function(item){
return '<li>'+item.name+'</li>'
}).join(''));
I'm not a javascript expert or even an amateur. I've found some script that I'm playing around with and was wondering how I can create a second variable within the code.
<script type="text/javascript">
$(document).ready(function(){
$("select#type").attr("disabled","disabled");
$("select#category").change(function(){
$("select#type").attr("disabled","disabled");
$("select#type").html("<option>wait...</option>");
var id = $("select#category option:selected").attr('value');
$.post("select_type.php", {id:id}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("select#model").attr("disabled","disabled");
$("select#type").change(function(){
$("select#model").attr("disabled","disabled");
$("select#model").html("<option>wait...</option>");
var id = $("select#type option:selected").attr('value');
$.post("select_model.php", {id:id}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
});
});
</script>
In the second piece of code, I would like to get the category id and create another post variable called $_POST[cat_id]. How can I do this again referring to select_type.php in the same piece of javacode?
This is for a 3 piece chained dropdown where..
drop #1 produces drop #2. Drop #1 & #2 together produce drop #3.
All i need to do know is how to add the second variable grabbing it from the first drop down.
Any help is appreciated.
EDIT: I tried to add something like this in, but it doesn't work. The 2nd variable needs to come from the initial first select in the dropdown like the select_type.php file or if somehow the initial value can be stored and carried over to help populate the third select.:
<script type="text/javascript">
$(document).ready(function(){
$("select#model").attr("disabled","disabled");
$("select#type").change(function(){
$("select#model").attr("disabled","disabled");
$("select#model").html("<option>wait...</option>");
var carrier = $("select#type option:selected").attr('value');
$.post("select_model.php", {carrier:carrier}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
var countryid = $("select#category option:selected").attr('value');
$.post("select_type.php", {countryid:countryid}, function(data){
$("select#type").removeAttr("disabled");
$("select#type").html(data);
});
});
});
</script>
Any help?
This is how you can do it.
var id = $("select#type option:selected").attr('value');
var categoryID = 34;
$.post("select_model.php", {id:id, cat_id:categoryID}, function(data){
$("select#model").removeAttr("disabled");
$("select#model").html(data);
});
And for multiple dropdown please see this : How to handle multiple select dropdown - JQuery. It is using static content, but I hope you can modify it adding required ajax requests in between.
EDIT ---
I misunderstood your request. You will need to set an event handler on the first dropbox. You will need to do something more like this:
$.post("select_model.php", {carrier:carrier}, function(data){
$("select#model").removeAttr("disabled").html(data);
});
$("select#category").change(function(){
var countryid = $("select#category option:selected").attr('value');
$.post("select_type.php", {countryid:countryid}, function(data){
$("select#type").removeAttr("disabled").html(data);
});
});