I have 2 checkboxs inside a form, I can't post value of them.
I have already tried this:
<div class="form-group col-md-4">
<label class="col-md-6" for="invoiced">
<input type="checkbox" id="invoiced" value="false" name="project[invoiced]">
Invoiced </label>
<label class="col-md-6" for="tobeinvoiced">
<input type="checkbox" id="tobeinvoiced" value="true" name="project[tobeinvoiced]" checked>
To be Invoiced </label>
</div>
with this script that changes the value of 2 checkboxes in true or false:
<script type="text/javascript">
$('#tobeinvoiced').change(function(){
cb = $(this);
cb.val(cb.prop('checked'));
});
$('#invoiced').change(function(){
cb = $(this);
cb.val(cb.prop('checked'));
});
</script>
but when I submit, the values passed are set to null.
Try this
$project = $request->input('project');
$tobeinvoiced = $project['tobeinvoiced'];
Basically the naming convention you are using makes it an array and you cant call an array directly in request input in laravel
Hope this helps.
I've found the solution to my problem, this is the link : Solution.
My code became:
<label class="col-md-6" for="invoiced">
<input type="checkbox" key="invoiced"/>
<input type="hidden" id="invoiced" value="0" name="project[invoiced]">
Invoiced </label>
<label class="col-md-6" for="tobeinvoiced">
<input type="checkbox" key="tobeinvoiced" checked/>
<input type="hidden" id="tobeinvoiced" value="1" name="project[tobeinvoiced]">
To be Invoiced </label>
with this script:
$(document).ready(function () {
$('[key]').change(function () {
var key = $(this).attr('key');
$($('[name="project[' + key + ']"]')).val($(this).is(':checked') ? 'true' : 'false');
});
});
Related
how to retrieved data from db to radio type
<div class="form-check">
<input class="form-check-input" name="jenis" id="radio3"
onclick="enableTxtBox1()" type="radio" value="Cuti Tahunan" />
<label class="form-check-label">CUTI TAHUNAN</label>
</div>
<div class="form-check">
<input class="form-check-input" name="jenis" id="radio4"
onclick="enableTxtBox1()" type="radio" value="Cuti Sakit"/>
<label class="form-check-label">CUTI SAKIT</label>
</div>
<script>
$('#ModalCenter').on('show.bs.modal', function(e) {
var jenis = $(e.relatedTarget).data('jenis');
$(e.currentTarget).find('input[name="jenis"]').val(jenis);
});
</script>
In your case, you should find the element by id instead of name, i.e.:
$(e.currentTarget).find('input[id="radio3"]').val(jenis);
$(e.currentTarget).find('input[id="radio4"]').val(jenis);
Setting value using $(..).val() to textarea is fine, bu not for Checkbox or Radio. You need to use attr method of the input selector
Do this to update check / uncheck it
$(...).attr('checked', true);
/// to uncheck,
$(...).attr('checked', false);
To make it more dynamic, you can check input type using the below code
var isCheckboxOrRadio = $(...).is(':radio, :checkbox');
console.log(isCheckboxOrRadio); // result will be true or false
You can add the checkedattribute if the value retrieved from the database is the value of the radio.
<div class="form-check">
<input class="form-check-input" name="jenis" id="radio3"
onclick="enableTxtBox1()" type="radio" value="Cuti Tahunan"
<?php echo $data_retrieved['jenis'] == 'Cuti Tahunan' ? 'checked': '' ; />
<label class="form-check-label">CUTI TAHUNAN</label>
</div>
<div class="form-check">
<input class="form-check-input" name="jenis" id="radio4"
onclick="enableTxtBox1()" type="radio" value="Cuti Sakit"
<?php echo $data_retrieved['jenis'] == 'Cuti Sakit' ? 'checked': '' ; />
<label class="form-check-label">CUTI SAKIT</label>
</div>
I have plugin development requirement -
On activation of plugin, the plugin should create one database table and by default 35 fields with '0' value should be added.
I have created a table named checkbox with 3 column inside
id(int), chk_col(varchar), created_at(timestamp)
created multiple checkboxes with value 1 as below -
<form action="#" id="frmPost">
<label class="checkbox-inline">
<input type="checkbox" name="seat[]" id="seat0" value="1">A1
</label>
<button type="submit" name="submit" id ="btn btn-default">Submit</button>
</form>
and I have script.js file where i have written validation code as below which is working fine
!(function($){
$(document).ready(function(){
$('#frmPost').on('change', 'input[type=checkbox]', function(){
if ($(this).is(':checked'))
alert('Seat ' + $(this).closest('label').text() + ' added.');
else
alert('Seat ' + $(this).closest('label').text() + ' removed.');
});
$('#frmPost').submit(function() {
var $fields = $(this).find("input[name='seat[]']:checked");
if (!$fields.length) {
alert('You must book/select at least one seat!');
return false; // The form will *not* submit
}
});
});
})(window.jQuery);
and also main wp function file is containing all necessary code
Problem is -
I really don't understand how to insert multiple checkboxes checked value of 1 into WP Db.
I have tried to do so but not worked at all even serialization also not able to get processed.
Help me to proceed further.
Thank you.
Here is the php code as you asked me to show
=>code I wrote -
function my_action_callback(){
if ( isset($_POST["insert"]) ){
global $wpdb;
//$table_name = $wpdb->prefix . "status";
bus_seat_avail_table();
$wpdb->insert(bus_seat_avail_table(), array(
//no idea what to code here
));
}
}
I got my code working by tweaking the code as per the link searched and able to insert data into database successfully.
Main code which worked from script.js(I changed code completely - jQuery and ajax)
jQuery(document).ready(function($){
$('#submit').click(function(){
var seats = [];
$('.get_value').each(function(){
if($(this).is(":checked") ){
seats.push($(this).val() );
}
});
seats = seats.toString();
$.ajax({
url: ticketbookingajaxurl,
method:"POST",
data:{
'action': 'my_action_callback',
'seats': seats,
},
success:function(data){
$('#result').html(data);
}
});
});
});
The html checkbox form code been included with class="get_value"
<form action="#" id="frmPost">
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat0" value="1">A1
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat1" value="1">A2
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat2" value="1">A3
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat3" value="1">A4
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat4" value="1">A5
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat5" value="1">A6
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat6" value="1">A7
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat7" value="1">A8
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat8" value="1">A9
</label>
<label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat9" value="1">A10
</label><label class="checkbox-inline">
<input type="checkbox" class="get_value" id="seat34" value="1">D5
</label></br></br>
<button type="button" name="submit" class="btn btn-info" id ="submit">Submit</button>
</form>
<div id="result"></div>
</body>
</html>
And finally main php code which finally inserted value into WordPress DB
Hook is required for invoking the php code to wrap up in the function as shown
add_action( 'wp_ajax_my_action_callback', 'my_action_callback' ); //for logged in users
add_action( 'wp_ajax_nopriv_my_action_callback', 'my_action_callback' ); //for other users
function my_action_callback(){
if ( isset($_POST["seats"]) ){
global $wpdb;
//$table_name = $wpdb->prefix . "chkbox";
bus_seat_avail_table();
$wpdb->insert(bus_seat_avail_table(), array(
'chk_col' => '1' //chk_col is the column name in DB
));
//wp_die();//compulsory
}
}
But I am not able to understand whether all fields for unchecked checkbox value should remain 0 and checked should be saved as 1.
What I want is to understand the approach where the saved value should automatically save to 1 inside DB and unchecked should be 0 in the same chk_col field, But no luck so far.
Help me to understand please.....
I have to do a simple work.
I have:
echo' <div class="col-sm-12" id="recensioni_titolo">
<form role="form" id="review-form" method="post" action="php\insert_comment.php">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<input type="text" class="form-control" name="Titolo" id="titolo_review" placeholder="Titolo">
<input type="text" class="form-control" name="ID_locale" id="titolo_review" value="'.$id_Local.'" style="visibility: hidden; position:fixed;">
</div>
</div>
<div class="col-sm-4">
<fieldset class="rating">
<input type="radio" id="star5'.$id_Local.'" name="Voto" value="5" /><label class = "full" for="star5'.$id_Local.'" title="Ottimo - 5 stelle"></label>
<input type="radio" id="star4'.$id_Local.'" name="Voto" value="4" /><label class = "full" for="star4'.$id_Local.'" title="Buono - 4 stelle"></label>
<input type="radio" id="star3'.$id_Local.'" name="Voto" value="3" /><label class = "full" for="star3'.$id_Local.'" title="Discreto - 3 stelle"></label>
<input type="radio" id="star2'.$id_Local.'" name="Voto" value="2" /><label class = "full" for="star2'.$id_Local.'" title="Insufficiente - 2 stelle"></label>
<input type="radio" id="star1'.$id_Local.'" name="Voto" value="1" /><label class = "full" for="star1'.$id_Local.'" title="Pessimo - 1 stella"></label>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Review" id="review" placeholder="Inserisci una descrizione.."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn main-btn pull-right" name="submit_review" id="submit_review'.$id_Local.'">Invia</button>
</div>
</div>
This code is generating the same thing for 5 times. I'have to find one method to declare and use the id="review-form" in a unique mode because with this code:
$(document.getElementsByName("submit_review")).unbind().click(function() {
var chx = document.getElementsByName("Voto");
for (var i=0; i<chx.length; i++) {
// If you have more than one radio group, also check the name attribute
// for the one you want as in && chx[i].name == 'choose'
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
$.ajax({
url : "php/insert_comment.php",
type : "post",
data : $("#review-form").serialize(),
success : function(data){
$.ajax({
url : "php/reviews.php",
type : "post",
data: {'id_Local' : $('.modal').attr('data-modal')},
success : function(data){
$('#box_recensioni').html(data);
chx[i].checked=false;
}
})
}
})
return true;
}
}
// End of the loop, return false
alert("Inserisci almeno il voto!!")
return false;
});
I have only the first element is working.
I can generate the id with "id'.$variable'" but I don't know how to refers to every single id in the javascript file.
Thank you to all in advance
In HTML, an ID is supposed to be unique :
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
This is why JavaScript can grab only the first occurence of an ID, since it's supposed to be the only one. You may want to replace those multiple IDs with classes, which is at least correct in HTML5 and will be also smarter in Javascript.
Here is a link to the post in the Mozilla documentation of IDs in HTML, to be sure that you understand the role of this tag.
As other's have said using the same ID would be useless instead you may want to use a class identifier. And assuming you want to create multiple form elements... and you don't have a unique identifier to use in your scripts you may try the following which I haven't tested...
I see you have already gotten the radio button
var chx = document.getElementsByName("Voto");
and performed a check on it under your if statement
if (chx[i].type == 'radio' && chx[i].checked) {
if so, maybe you can try to get the closest form element of the radio button that you are dealing with (i.e. checked) by doing something like
var thisForm = chx[i].closest('form')
--and later do thisForm.serialize();
check this out for more detail in using closest
You can create an array, then use an loop through each radio button pushing the id into the array. Then use the array for the ids.
var radioIds = new Array();
$('.rating input[name="Voto"]').each(function(){
radioIds.push($(this).attr('id'));
});
console.log(radioIds)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<fieldset class="rating">
<input type="radio" id="star54" name="Voto" value="5" /><label class="full" for="star54" title="Ottimo - 5 stelle"></label>
<input type="radio" id="star44'" name="Voto" value="4" /><label class="full" for="star44" title="Buono - 4 stelle"></label>
<input type="radio" id="star34" name="Voto" value="3" /><label class="full" for="star34" title="Discreto - 3 stelle"></label>
<input type="radio" id="star24'" name="Voto" value="2" /><label class="full" for="star24" title="Insufficiente - 2 stelle"></label>
<input type="radio" id="star14" name="Voto" value="1" /><label class="full" for="star14" title="Pessimo - 1 stella"></label>
</fieldset>
</div>
I have this code, when im trying to toggle the checkbox (I can view the changes in inspect), the value of the checkbox doesnt change
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value=""/>
</div>
checkout with value
if ($(this).prop("checked") == true) {
$("h2 span").text(checkBoxval);
}
$(document).ready(function() {
var $checkBox = $("[type='checkbox']");
var checkBoxval = $checkBox.val();
$("h2 span").text(checkBoxval);
$checkBox.on("click", function() {
if ($(this).prop("checked") == true) {
$("h2").show();
$("h2 span").text(checkBoxval);
} else {
$("h2").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="My Checkbox value" checked="true">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1" value="" />
<h2>Your value is <span></span></h2>
</div>
Well, we can't see you js code but, you SHOULDN'T duplicate an id attribute like you did with NCONF_RSN1
You given the same id to both input element, give two different id. Then it will work
Figured out my problem, added "_" on hidden id
Instead of id="NCONF_RSN1" i used id="NCONF_RSN1_".
i just tried it, i dont know how it worked.
<div class="checkbox checkbox-success">
<input type="checkbox" name="NCONF_RSN1" id="NCONF_RSN1" value="">
<label>
Facility is far
</label>
<input type="hidden" name="NCONF_RSN1" id="NCONF_RSN1_" value=""/>
</div>
I want to get the value from radio button that we have choose then multiple with the number in grossSalary. The result will be display on a textbox called epf. There are an error happening, the form only get 0.09 value even we choose 11% radio button.
Here is my javascript
<script>
function get(percent)
{
var percent = document.getElementById('percent').value;
var grossSalary= document.getElementById('grossSalary').value;
var epf = parseFloat(percent)*parseFloat(grossSalary);
epf = epf.toFixed(2);
document.getElementById('epf').value = epf;
}
</script>
Here is my form coding:
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" id="percent" name="percent" value="0.09" onclick="get(this.value)">9%
<input type="radio" id="percent" name="percent" value="0.11" onclick="get(this.value)">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
</form>
You could use the name instead of the id (because id has to be unique). Also, with jQuery, you could use the change event.
i.e. :
HTML :
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
JS :
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
Here is the working example on JSFiddle.
Hope it helps.
EDIT Don't forget to include jQuery source in your html file :
One file template :
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
<script>
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
</script>
When you are using JS or Jquery than always remember one key point that:
id: used for single selection
class: used for multiple selection
In your case you are using same id for different tags, in that case it returns the first matching html value.
So to get rid of this, you have to use class and iterate over them and get the values.