PHP AJAX Loop Array send data

[sungpeng]

function chk()
{
var name=document.getElementById('checking[]').value;
var dataString='checking2='+ name;
$.ajax({
type:"post",
url:"send-checking.php",

while($doing=mysql_fetch_array($sqlq)){
<input type='checkbox' id='checking[]' value='<?php echo $doing["pid"]; ?>' onchange='chk()' />

It always send the first row value from $doing["pid"]; 

I need it to send second, third or forth row if i click like the forth row of the check box.

 

Can someone help ?

[sungpeng]

It always send value 1 

<input type='checkbox' id='checking[]' value='1' onchange='chk()' />

I need it to send value 2 etc if i click on value 2 checkbox using php loop to define value.

<input type='checkbox' id='checking[]' value='2' onchange='chk()' />

[Ch0cu3r]

It is because you are ids to name your input field. When using  var name=document.getElementById('checking[]').value;   in the chk() it will always return the first element with the id called checking[].  This is because id's must be unique, meaning you cannot use the same id for multiple HTML elements.

 

The id attribute should not be used for giving an form element a name, for that you must use the  name  attribute.

<input type='checkbox' name='checking[]' value='1' onchange='chk()' />

Now for the chk function to know which checkbox was clicked/changed you pass  this  as the argument to the chk function

<input type='checkbox' name='checking[]' value='1' onchange='chk(this)' />

What this will do is pass instance of the element to the function when it is called

 

Your function will now become

function chk(input)
{
   var dataString='checking2='+ input.value;
   $.ajax({
   type:"post",
   url:"send-checking.php",

However if you are using jquery. Then cn just use its event handler to apply the onchange event, rather than define your own function.

$('input[name="checking[]"]').on('change', function() {

   // get the value of the checkbox that was clicked
   var checkboxValue = $(this).val();
   
   $.ajax({
       ... do ajax request here ...
   });

});

[sungpeng]

Thank You

[sungpeng]

Follow up question is if number 2 is checked and number 1 is unchecked, can i bring the variable checked and unchecked to ajax to process ?

[Ch0cu3r]

What do you mean by that? Currently the code fires an ajax request for each individual checkbox when it is checked and unchecked. Saying that you probably only want the ajax request to happen when the checkbox is checked and not when it is unchecked. In that case you'd do

// only do the ajax request if this checkbox has been checked
if($(this).is(':checked'))
{
    // get the value of the checkbox that was clicked
    var checkboxValue = $(this).val();
   
    $.ajax({
        ... do ajax request here ...
    });
}

[sungpeng]

How can i pass the "checked or not checked" with the "value" to ajax together ?

$(document).ready(function(){
if ($(this).is(':not(:checked)')){
var checkboxValue = $(this).val();
$.ajax({
type:"post",
url:"checking1.php",
});
}

<input type='checkbox' id='tickcheck' value='4' onchange='chk(this.value)' />

 

 

Edited September 22, 2015 by sungpeng

[Ch0cu3r]

Use  $(this).is(':checked')  to to get the checkbox checked state. It will return true if its checked and false it is not

$('input[name="checking[]"]').on('change', function() {

   // get the value of the checkbox that was clicked
   var checkboxValue = $(this).val(),
       // set variable to 'yes' if the checkbox is checked, set to 'no' if it is not checked
       isCheckboxChecked = $(this).is(':checked') ? 'yes' : 'no';
   
   $.ajax({
       ... do ajax request here ...
   });

});

[sungpeng]

Being trying but don't seem to work.

$('input[name="checking[]"]').on('change', function() {
   var checkboxValue = $(this).val(),   
       isCheckboxChecked = $(this).is(':checked') ? 'yes' : 'no';
   alert (isCheckboxChecked);
 $.ajax({
code here 

});
}
<input type='checkbox' id='checking[]' value='4' onchange='chk(this.value)' />

[Ch0cu3r]

As I said earlier, you cant use the id attribute to name your input fields it must be the name attribute. Also as you are using JQuery's event handler then you do not need to use the onchange attribute. Your input field should be like this

<input type='checkbox' name='checking[]' value='4' />

Live Demo

[sungpeng]

Not working also, the alert box never pop up as well.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script type="text/javascript">
$('input[name="checking"]').on('change', function() {
   var checkboxValue= $(this).val(),   
       isCheckboxChecked = $(this).is(':checked') ? 'yes' : 'no';
alert (checkboxValue);
 $.ajax({
type:"post",
url:"checking1.php",
data:dataString,
});
}
</script>


<input type='checkbox' name='checking' value='90'  />

Edited September 23, 2015 by sungpeng

[sungpeng]

i got it. Thank you.

Edited September 23, 2015 by sungpeng

[sungpeng]

Got the alert box working already but isCheckboxChecked value can't send over to checking1.php, any problem with ajax coding ?

$.ajax({ 

type:"post",

url:"checking1.php",

data:dataString,

cache:false,

});

[Ch0cu3r]

How are you defining the dataString variable used here

data:dataString,

[sungpeng]

I successfully send the checkboxValue to the checking1.php page but for the isCheckboxChecked, how am i going to send it over to checking1.php as well ? If i echo the $results at checking1.php they will give me an Array wording output.

var dataString='sendcheck='+ checkboxValue;

Edited September 23, 2015 by sungpeng

[Ch0cu3r]

You send that value by appending it to your data string, eg

var dataString='sendcheck='+ checkboxValue + '&isChecked=' + isCheckboxChecked;

// alternatively use
var dataString = { sendcheck: checkboxValue,
                   isChecked: isCheckboxChecked };

Now in checking1.php you use $_POST['sendcheck'] to get the checkboxValue value, and use $_POST['isChecked'] to get the isCheckboxChecked value

Edited September 23, 2015 by Ch0cu3r

[sungpeng]

If i never put in the while loop, it works fine. But once in the while loop, click on the checkbox has no reaction.

while($doing=mysql_fetch_array($sqlq)){
<input type='checkbox' name='checking[]' value='<?php echo $doing["pid"]; ?>' >
}

[Ch0cu3r]

Have you shortened the code? Because that is not valid PHP code it needs to be

while($doing=mysql_fetch_array($sqlq)) {
    echo '<input type='checkbox' name='checking[]' value="'.$doing["pid"]'" >';
}

Also make sure the Javascript code is after the the while loop otherwise if the javascript coded is before then you need to wrap it in

$( document ).ready(function() {
    // javascript code goes here
});

[sungpeng]

Solved Thank you. One question my friend told me to use html 5 instead of ajax as html 5 all browsers can support while ajax some browsers can't. Is it true ?

Edited September 23, 2015 by sungpeng

[Ch0cu3r]

Umm. HTML5 has nothing to do with Ajax - which is JavaScript, using the xmlhttprequest object.  Which is supported by most/if not all modern browsers. However not all browsers provide the same api. With JQuery, which is a javascript framework, provides a standard easy to use api allowing our code to work across all major browsers.

[sungpeng]

Is it possible to change it to a search box text instead of a checkbox ? It seemed not working.

$(window).load(function(){
$('input[name="searchbox"]').on('change', function() {
   var val = $(this).val(),         
var dataString='var='+ val;  
alert ('dataString');


<input type="text" name="searchbox">

Edited September 29, 2015 by sungpeng

[Ch0cu3r]

alert ('dataString');  is going to alert the string literal "dataString". If you want to display the value of the dataString variable then remove the quotes  alert(dataString);

[sungpeng]

No not working also.

<script type='text/javascript'>
$(window).load(function(){
$('input[name="searchbox"]').on('change', function() {
   var val = $(this).val(),         
var dataString='varal='+ val;    
alert (dataString);
});
});
<input type="text" name="searchbox">