sungpeng Posted September 21, 2015 Share Posted September 21, 2015 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 ? Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 21, 2015 Author Share Posted September 21, 2015 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()' /> Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 21, 2015 Share Posted September 21, 2015 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 ... }); }); 1 Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 21, 2015 Author Share Posted September 21, 2015 Thank You Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 21, 2015 Author Share Posted September 21, 2015 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 ? Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 21, 2015 Share Posted September 21, 2015 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 ... }); } Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 22, 2015 Author Share Posted September 22, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 22, 2015 Share Posted September 22, 2015 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 ... }); }); Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 22, 2015 Author Share Posted September 22, 2015 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)' /> Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 22, 2015 Share Posted September 22, 2015 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 Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 (edited) i got it. Thank you. Edited September 23, 2015 by sungpeng Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 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, }); Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 23, 2015 Share Posted September 23, 2015 How are you defining the dataString variable used here data:dataString, Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 23, 2015 Share Posted September 23, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 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"]; ?>' > } Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 23, 2015 Share Posted September 23, 2015 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 }); Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 23, 2015 Author Share Posted September 23, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 23, 2015 Share Posted September 23, 2015 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. Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 29, 2015 Author Share Posted September 29, 2015 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted September 29, 2015 Share Posted September 29, 2015 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); Quote Link to comment Share on other sites More sharing options...
sungpeng Posted September 30, 2015 Author Share Posted September 30, 2015 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"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.