I have a problem with my radio button.
Since i styled my radio buttons, the function is not working as it should.
I've heard somewhere that i have to change something in my jquery, but i dont know what.
Can someone help me?
here is the Html code
<div class="form-group">
<div class="form-check">
<input class="form-check-input" name="state" data-order="<?php echo $obj->order_id; ?>" value="1" type="radio" id="gridCheck1"
<?php if($obj->status == '1'){ echo 'checked'; } else { ''; } ?> >
<label class="form-check-label" for="gridCheck1">
Koude producten
</label>
</div>
</div>
Script
$(document).ready(function(){
$('#gridCheck1,#gridCheck2,#gridCheck3').click(function() {
if(this.checked){
$.ajax({
type: "POST",
url: 'change_state.php',
data: {
state: $(this).attr('value'),
order_id: $(this).data('order'),
}, //--> send id of checked checkbox on other page
success: function(data) {
$('#container').html(data);
},
error: function() {
//alert('it broke');
},
complete: function() {
setInterval(function() {
location.reload();
}, 1000);
}
});
}
});
Related
Currently I'm displaying all my data in a table format in my View class. Now I have checkboxes on top which are default checked when the user enters the page. Now I want it so that when the user unchecks any of them, it should send a POST ajax call to my controller and removing that filter from my model. To do this I'm using the following code:
View Class:
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<?php if($properties) foreach($properties as $lead): ?>
<td><?php echo $lead['refno'] ?></td>
<?php endforeach;?>
<script>
$("input[name='matchfield']").change(function() {
var matchfields = [];
$.each($("input[name='matchfield']:checked"), function(){
matchfields.push($(this).val());
});
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : { selmatches : matchfields, clickmatches:'clicked' },
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
Controller Class:
if(isset($_POST["clickmatches"]) ){
if(in_array('community', $_POST["selmatches"])){
$propcommunity = $default_data[0]['community'];
}
if(in_array('propsubcommunity', $_POST["selmatches"])){
$propsubcommunity = $default_data[0]['property_name'];
}
if(in_array('bedrooms', $_POST["selmatches"])){
$propbeds = $default_data[0]['bedrooms'] ;
}
if(in_array('unit_type', $_POST["selmatches"])){
$proptype = $default_data[0]['unit_type'];
}
$edit['properties']= $this->listings_model->load_leads($propcommunity, $propsubcommunity,$propbeds,$proptype);
}
Model Class:
$this->db->select('*');
$this->db->from("table1");
if($community!='')
$this->db->where('crm_data_table.community',$community);
if($subcommunity!='')
$this->db->where('crm_data_table.property_name',$subcommunity);
if($proptype!='')
$this->db->where('crm_data_table.unit_type',$proptype);
if($bedrooms!='')
$this->db->where('crm_data_table.bedrooms',$bedrooms);
$query = $this->db->get();
return $query->result_array();
But this doesn't change when I change my checkboxes. I put a var_dump($_POST["selmatches"]); die(); and "clickmatches" and both gave the following:
We can simplify the jQuery
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : data,
...
});
});
The code below gets
array(4) { [0]=> string(16) "propsubcommunity" [1]=> string(9) "community" [2]=> string(9) "unit_type" [3]=> string(8) "bedrooms" }
found community (if community is on)
PHP
<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: *"); // if on another server
$selmatches = $_POST['selmatches'];
var_dump($selmatches);
if(in_array('community', $_POST["selmatches"])){
echo "Found community";
}
?>
$("input[name='matchfield']").on("change", function() {
const matchfields = $("input[name='matchfield']:checked").map(function() {
return $(this).val()
}).get();
const data = {
selmatches: matchfields,
clickmatches: 'clicked'
};
console.log(data)
$.ajax({
url: 'https://plungjan.name/SO/testAjaxArray/save.php',
data: data,
type: 'POST',
success: function(data) {
$("#matchedleadscont").html(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<div id="matchedleadscont"></div>
In view:
Change name="matchfield" to name="matchfield[]"
....
$("input[type='checkbox']").click(function() {
$.ajax({
url: 'listings/edit/'+<?php echo $property->listingsid;?>,
data : $(form).serialize(),
type: 'POST',
beforeSend: function(){
$("#matchedleadscont").empty();
$("#loader").show();
},
success: function (data) {
$("#loader").hide();
$("#matchedleadscont").html(data);
}
});
});
And in your Controller:
if(in_array('community', $_POST["matchfield"])){
$propcommunity = $default_data[0]['community'];
}
I am using ajax in codeigniter, I have different checkbox now i want whenever someone checked
checkboxes,result should come according to user selection of checkboxes,so how can i do this ?
here is my code
<input type="checkbox" class="styled" id="Baker" value="Bakers">
<label for="role1">Bakers</label>
<input type="checkbox" class="styled" id="Bakerd" value="Bakersd">
<label for="role1">Bakersd</label>
<script>
$('.styled').click(function() {
alert($(this).attr('id'));
if(this.checked){
$.ajax({
type: "POST",
url: 'searchOnType.php',
data: $(this).attr('id'),
success: function(data) {
alert('it worked');
alert(data);
$('#container').html(data);
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
}
});
</script>
Html
<ul class="unstyled centered">
<li>
<input type="checkbox" class="styled-checkbox" id="Baker" value="" onchange="checkBoxOnChange(this);">
<label for="role1">Baker</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="Barista" value="" onchange="checkBoxOnChange(this);">
<label for="role2">Barista</label>
</li>
<li>
<input type="checkbox" class="styled-checkbox" id="Bartender" value="" onchange="checkBoxOnChange(this);">
<label for="role3">Bartender</label>
</li>
<li id="filter">
</li>
</ul>
jQuery Script
<script>
function checkBoxOnChange(isChecked){
if($(isChecked).is(":checked")){
console.log("check");
$.ajax({
url: 'test.php',
type: 'POST',
data: {id: $(isChecked).attr('id')}, // I suggest you to use $(isChecked).val(). Add value in html same as id
success: function(data){
console.log(data);
$("#filter").text(data);
}
}
);
}else{
console.log("Uncheck");
}
}
</script>
Php Script
test.php example just return a selected checkbox value
<?php
echo ($_REQUEST['id']);
exit;
?>
I want to send section option value with ajax but only selection
and checkbox
the problem is that section and checkbox post undifined
thanx advanced
php code
<?php
$paramateres = new ParametresApp();
$paramateres->getparametres();
$max_pages_nbr = $paramateres->max_pages_nbr;
$idle_deconnexion = $paramateres->idle_deconnexion;
$show_chat = $paramateres->show_chat;
?>
html code
<form id="formparametres" class="form-row row shadow bg-white border row p-5 "
method="post">
<div class="form-check col-3 col-lg-3 ">
<input name="show_chat" id="show_chat" type="checkbox"
class="form-check-input" value="<?php echo $show_chat; ?>"
<?php if ($show_chat == 1) {
echo 'checked="true" ';
}
?>
<label class="form-check-label"
for="show_chat"> Autoriser messenger </label>
</div>
<div class="col-3 col-lg-3">
<label class="form-control-label">idle deconexion</label>
<input name="idle_deconnexion" class="form-control"
value="<?php echo $idle_deconnexion; ?>" required>
</div>
<div class="input-wrapper col-4 col-lg-4">
<label class="form-control-label">max_pages_nbr</label>
<select name="max_pages_nbr" class="form-control" required>
<?php echo '<option value="'.$max_pages_nbr.'">'.$max_pages_nbr.'</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>';?>
</select>
</div>
</form>
jquery code
$("form").submit(function (event) {
event.preventDefault();
var formData =
'show_chat=' + $('input[name=show_chat]').val() +
'&idle_deconnexion=' + $('input[name=idle_deconnexion]').val() +
'&max_pages_nbr=' + $('section[name=max_pages_nbr]').val() ;
$.ajax({
url: "src/admins/inc/save_parametres.inc.php",
method: "POST",
data: formData, // serializes the form's elements.
cache: false,
success: function (data) {
alert(data);
}
});
Try this
$("form").submit(function (event) {
event.preventDefault();
var formData = {'show_chat' : $('input[name=show_chat]').val(), 'idle_deconnexion' : $('input[name=idle_deconnexion]').val(), 'max_pages_nbr' : $('section[name=max_pages_nbr]').val() };
$.ajax({
url: "src/admins/inc/save_parametres.inc.php",
method: "POST",
dataType: 'json',
data: formData, // serializes the form's elements.
cache: false,
success: function (data) {
alert(data);
}
});
Hope this will help you.
i have solveur thanx for all
jquery
$(document).ready(function () {
$(':checkbox').change(function () {
if ($(this).attr("value") == 1) {
$(this).attr("value", 0)
} else {
$(this).attr("value", 1)
}
});
$("form").submit(function (event) {
event.preventDefault();
var formData =
'show_chat=' + $('#show_chat').attr("value") +
'&idle_deconnexion=' + $('input[name=idle_deconnexion]').val() +
'&max_pages_nbr=' + $('#max_pages_nbr option:selected').text() ;
$.ajax({
url: "src/admins/inc/save_parametres.inc.php",
method: "POST",
data: formData, // serializes the form's elements.
cache: false,
success: function (data) {
alert(data);
}
});
});
});
in may page src/admins/inc/save_parametres.inc.php
<?php
if (isset($_POST)){
$show_chat= $_POST['show_chat'];
$idle_deconnexion= $_POST['idle_deconnexion'];
$max_pages_nbr= $_POST['max_pages_nbr'];
$sql = " update dms_parametres set parm_value=".$show_chat ." where parm_name='show_chat';
update dms_parametres set parm_value='" . $idle_deconnexion . "' where parm_name='idle_deconnexion';
update dms_parametres set parm_value='" . $max_pages_nbr . "' where parm_name='max_pages_nbr';
";
if (!$parametres->connect()->multi_query($sql)) {
echo $parametres->connect()->error;
} else {
echo 'sucsess';
}
}
?>
As soon as someone toggles a checkbox. I want a the value sent to a php page for it to update it in my database.
HTML:
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"></div>
</span>
</div>
</div>
JQUERY:
$(document).ready(function(){
$("input[type=checkbox]").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $('input:checkbox:checker').val()
},
success: function(data) {
$('#echo2').html(data);
}
});
});
});
PHP:
<?
$sent_value = $_POST['value'];
if(isset($sent_value)){
//update database
echo "updated";
}else{
//update database
}
?>
Currently, my jquery doesn't work. How I need it:
They click the orange checkbox toggle
Jquery recognises this and sends the checkbox value to my php page
my php page gets the value and puts it in the database
instead of echo use "return true" if success else false in php code
$(document).ready(function(){
$("#video").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $('input[type=checkbox]').val()
},
success: function(data) {
$('#result').html(data);
}
});
});
});
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"><p id="result"></p></div>
</span>
</div>
</div>
The error is in $('input:checkbox:checker').val() so the value is not sent to php file and the success method expects a return value in php. We need to use "return" instead of "echo"
Hope this can help you.
HTML: Not Changed
<div class="form-group">
<div class="tg-optionbox">
<span>Promotional Video</span>
<span class="tg-iosstylcheckbox">
<input type="checkbox" id="video" name="video" value="video">
<label for="video"></label>
<div id="echo2"></div>
</span>
</div>
</div>
JavaScript: Changed
Replaced: value: $('input:checkbox:checker').val() by: value: $(this).prop("checked") ? 1 : 0
You have to send the value of the clicked checkbox. So you must use $(this).
To get the value of the checkbox use .prop("checked"). If the returned value is true, then it is checked. If it is false, then it is not checked.
So if the checkbox is checked, 1 is sent. If not, 0 is sent
$(document).ready(function(){
$("input[type=checkbox]").click(function () {
$.ajax({
type: "POST",
url: "get/update-feature.php",
data: {
value: $(this).prop("checked") ? 1 : 0
},
success: function(data) {
$('#echo2').html(data);
}
});
});
});
PHP: Changed
If the value is equal to 1 or value equal to 0
<?php
$sent_value = $_POST['value'];
if(isset($sent_value)){
if ($sent_value == 1) {
echo "Checked" ;
}
else {
echo "Un Checked" ;
}
}
else{
echo "Error" ;
}
?>
Use .change() event handler :
$('input:checkbox').change(function () {
var name = $(this).val();
var check = $(this).attr('checked');
//Your Ajax code
});
i have a problem with finding parent for form in this code:
<li class="comment<?php echo $comment[id]?>">
<div class="comment-content">
<div class="comment-top">
<div class="comment-nme">
<?php echo $comment[name]?>
</div>
<div class="comment-dt">
<?php echo $comment[dt]?>
</div>
</div>
<div class="comment">
<?php echo $comment[comment]?>
</div>
<a class="reply" href="#comment<?php echo $comment[id]?>">Ответить</a>
</div>
<div class="answer-form">
<form method="post" name="answer-form" class="ans">
<textarea class="comment-textarea" name="comment"></textarea>
<div class="a-comment-inputs">
<input type="hidden" name="parent_id" value="<?php echo $comment[id]?>">
<input type="hidden" name="status" value="new">
<div class="a-comment-name">
Имя</br>
<input type="name" name="name" class="a-comment-name">
</div>
<div class="a-comment-email" >
Eмейл</br>
<input type="email" class="a-comment-email" name="email">
</div>
</div>
<div class="comment-apply">
<button value="submit" onclick="return sendDataChild();" class="answer-but">Добавить</button>
</div>
</form>
</div>
<?php if($comment[childs]){ ?>
<ul class="commentsRoot<?php echo $comment[id]?>">
<?php echo commentsString($comment[childs]) ?>
</ul>
<?php } ?>
</li>
i use this jQuery function:
function sendDataChild() {
var form = $('FORM[name=answer-form]');
var data = form.serialize();
$.ajax({
type: "POST",
url: "req.php",
dataType: "json",
data: data,
cache: false,
success: function (data) {
form[0].reset();
},
error: function (xhr, str) {
alert('Возникла ошибка: ' + xhr.responseCode);
}
//$("#messageModalDialog").text(resultStat).show();
});
return false;
};
but it select every form that find on button click.
Can somebody advise how to solve it?
one possible solution
<button value="submit" onclick="return sendDataChild(this);" class="answer-but">Добавить</button>
then
//pass the clicked button reference then find the parent form of the button
function sendDataChild(btn) {
var form = $(btn).closest('FORM[name=answer-form]');
var data = form.serialize();
$.ajax({
type: "POST",
url: "req.php",
dataType: "json",
data: data,
cache: false,
success: function (data) {
form[0].reset();
},
error: function (xhr, str) {
alert('Возникла ошибка: ' + xhr.responseCode);
}
//$("#messageModalDialog").text(resultStat).show();
});
return false;
};
Bind submit event on the form and pass the object to the form object to your method
$(document).ready(function(){
$("form[name='answer-form']").on('submit', function(){
sendDataChild($(this));
});
});
function sendDataChild(form) {
var data = form.serialize();
$.ajax({
type: "POST",
url: "req.php",
dataType: "json",
data: data,
cache: false,
success: function (data) {
form.reset();
},
error: function (xhr, str) {
alert('Возникла ошибка: ' + xhr.responseCode);
}
//$("#messageModalDialog").text(resultStat).show();
});
return false;
};