Jump to content

PHP AJAX Loop Array send data


sungpeng

Recommended Posts

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 ?
Link to comment
Share on other sites

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 ...
   });

});
  • Like 1
Link to comment
Share on other sites

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 ...
    });
}
Link to comment
Share on other sites

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 by sungpeng
Link to comment
Share on other sites

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 ...
   });

});
Link to comment
Share on other sites

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)' />
Link to comment
Share on other sites

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 by sungpeng
Link to comment
Share on other sites

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 by sungpeng
Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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
});
Link to comment
Share on other sites

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 by sungpeng
Link to comment
Share on other sites

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">
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.