I am populating a list of checkboxes from a foreach loop, and giving each an ID. I have added a set of divs below that would appear, depending on which checkbox is created. I was thinking I could load the id variable into a jQuery if statement, and then use a .toggle to show or hide the corresponding div.
<?php
//Call Programs
$getPrograms = Doctrine::getTable('Program')->createQuery()->where('subsection=?', 'mfa')->orWhere('subsection=?', 'mps')->orWhere('subsection=?', 'mat')->orWhere('subsection=?', 'ma')->orderBy('title ASC')->execute(); ?>
<div class="form_row">
<label>
<span><sup class="required_form_item">*</sup>Select Program</span>
</label>
<div class="buttonColumn" style="margin-left:170px;">
//loop the records in with checkboxes
<?php foreach ($getPrograms as $prog): ?>
<?php
$subsection = $prog->getSubsection();
$subsection = strtoupper($subsection);
$trimProg = trim($prog->getTitle(), ' ');
$removeChars = array(" ", "&");
$trimProg = str_replace( $removeChars, '', $trimProg );
$trimProg = preg_replace('/\s\s+/', '_', $trimProg);
?>
//custin id matches record title
<input type="checkbox" name="program" class="isChecked" id="<?php echo $trimProg; ?>" value="<?php echo $subsection . " " . $prog->getTitle() ?>" /><?php echo $subsection . " " . $prog->getTitle() ?><br />
<?php endforeach ?>
</div>
</div>
The following divs would be set to display:none until the matching checkbox is checked.
<div class="form_row sessionTime" id="Program1" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="5:00 pm" />5:00 pm<br />
</div>
<div class="form_row sessionTime" id="program2" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="10:00 pm" />10:00 pm<br />
</div>
...
And this is what I thought would work...but alas...it doesn't
$('.isChecked').click( function() {
if ( $(this).is(':checked') ) {
$thisID = $(this).attr("id");
$('.'+ $thisID).show();
}
else {
$('.'+ $thisID).hide();
}
}
);
You should be using "Program1" as class name instead of id like this
<div class="form_row sessionTime Program1" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="5:00 pm" />5:00 pm<br />
</div>
And your jQuery code should work, which you can simplify as follows:
$('.isChecked').click( function() {
if ( $(this).is(':checked') ) {
$('.'+ this.id).show();
}
else {
$('.'+ this.id).hide();
}
});
I tested this code # home and it works as you might want
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(
function()
{
$('.isChecked').click(
function()
{
if ( $(this).is(':checked') )
{
$(this).show();
}
else
{
$(this).hide();
}
}
);
}
);
</script>
</head>
<body>
<form>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
</form>
</body>
I think the problem in your code can come from the $(document).ready() handler that waits for the entire DOM to be loaded before binding action listener to it.
What's more, your jquery code wasn't working for me. My version seems to work, but once checked box hidden, the user cannot handle them anymore.
Otherwise, I think doing some Doctrine requests in your template is a very bad idea.
Good bye !
Related
Suppose that, you have 27 checkboxes, let's call them 'categories'. These checkboxes are in one section, you can select them multiple, and save.
The eseence is: if you save the form, the categories will be added to your profile, in MySQL.
My question is:
How I should name the models,
How I should store de values after sending the form
I had a solution for this, I saved the nth of the categories, then clicked them back at loading, but that's not the best.
Here is the code:
$scope.getSelectedCats = function() //Returning array: [1,4,5,6]
{
$return_array = [];
$i = 0;
if($scope.whoareu.develop){ $return_array[$i] = 1; $i++;}
if($scope.whoareu.design){ $return_array[$i] = 2; $i++;}
if($scope.whoareu.produce){ $return_array[$i] = 3; $i++;}
if($scope.whoareu.repair){ $return_array[$i] = 4; $i++;}
[...]
return $return_array;
}
HTML
<p>
<input ng-model="whoareu.develop" type="checkbox" value=1 id="WAY8" name="whoareu" />
<label for="WAY8">Develop</label>
</p>
<p>
<input ng-model="whoareu.design" type="checkbox" value=2 id="WAY9" name="whoareu" />
<label for="WAY9">Design</label>
</p>
<p>
<input ng-model="whoareu.produce" type="checkbox" value=3 id="WAY10" name="whoareu" />
<label for="WAY10">Produce</label>
</p>
<p>
<input ng-model="whoareu.repair" type="checkbox" value=4 id="WAY11" name="whoareu" />
<label for="WAY11">Repair</label>
</p>
[...]
And last, a very ugly solution for loading checks:
<?php
//$dbData = Data row from mysql, in object, by Wordpress
echo "setTimeout(function(){";
foreach(explode(',', $dbData->interested_in) as $val)
{
//echo "$('input:checkbox[name=whatareu]').filter('[value=$val]').click();";
echo "$('input:checkbox[name=whatareu]').eq($val-1).click();";
}
echo "}, 1000);";
?>
I don't know if I understand your problem well, see my snippet. If you want, you could create some mapping function setDefaultState(basedOn) which set checked in model checkboxs.
If the problem is that data is lost after you leave the controller, you should use some singleton storage like Angular's factories, and storage the checked categories there.
angular.module('app', [])
.controller('FrameController', ['$injector',
function($injector) {
var vm = this;
vm.checkboxs = [{
id: 'WAY8',
label: 'Develop',
checked: true
}, {
id: 'WAY9',
label: 'Design'
}]
angular.extend(vm, {
save: save
})
function save() {
// API call
console.log('checked: ', vm.checkboxs.filter(function(c) {
return c.checked
}).map(function(c) {
return {
id: c.id
}
}));
}
}
]);
setTimeout(function() {
angular.bootstrap(document.getElementById('body'), ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="body">
<div ng-controller="FrameController as vm">
<ul>
<li ng-repeat="checkbox in vm.checkboxs">
<input ng-model="checkbox.checked" type="checkbox" id="{{checkbox.id}}" name="whoareu" />
<label for="{{checkbox.id}}">{{checkbox.label}}</label>
</li>
</ul>
<button ng-click="vm.save()">
Save
</button>
</div>
</div>
I am trying to give payment processing option e wallet and cod in checkout page, with the help of radio button, but the selected value is not getting fetched in php. How can this be solved?
I could't upload my code, so I am explaining the required logic, please do help.
In payment process i need a radio button
Selected radio button value should be given to php, so that my further calculations will continue.
I am unable to get the value in to php.
CODE:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='cod']").click(function () {
if ($("#chkYes").is(":checked")) {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
</script>
<form method ="post">
<label for="chkYes">
<input type="radio" id="chkYes" name="cod" />
COD
</label>
<br/>
<label for="chkNo">
<input type="radio" id="chkNo" name="cod" />
E-Wallet
</label>
<hr />
<button type="submit" name="submit1" value="submit">Submit</button>
</form>
<div id="dvPassport" style="display: none">
<input type="text" id="txtPassportNumber" />
</div>
<?php
echo $com;
echo $grand_total;
if(isset($_POST['submit'])) {
if($grand_total <= $com) {
$com = $com - $grand_total;
$sql1 = mysqli_query($conn,"UPDATE commission SET total_commission=$com WHERE e_id = '".$_SESSION["e_id"]."'");
echo $com;
$total_pay = $com;
echo $total_pay;
} else {
$newcom = $grand_total - $com;
$sql2 = mysqli_query($conn,"UPDATE commission SET total_commission=$newcom WHERE e_id = '".$_SESSION["e_id"]."'");
$total_pay = $newcom;
echo $total_pay;
}
}
?>
It seems you haven't actually sent any variables to your php.
You can send the value of 'cod' by declaring a php var and assigning it the value via post, likewise for your txtPassportNumber, e.g.
$cod = $_POST['cod'];
$passNo = $_POST['txtPassportNumber'];
Include these php variables in your php file and then use them to continue with your calculations.
Hope this helps
I'm trying to add a group of repeater fields to a WordPress plugin's settings page. This code works if I only have one repeater field, but if I have more than one repeater field in the same group, it behaves unexpectedly. What it does is, after saving the settings, it automatically adds empty fields. If I have, say, two repeater fields in the group, it will add two empty fields after saving. If I have more than two repeater fields, the number of empty fields after saving increases exponentially. I can't figure out why it's doing this. Again, with the current code, if I use only one repeater field, no empty fields are added after saving (that's what I want).
Here's the code I'm using:
function ssfrm_render_form(){ ?>
<form method="post" action="options.php">
<?php settings_fields('ssfrm_plugin_options'); $options = get_option('ssfrm_options'); ?>
<script>
jQuery(document).ready(function($) {
$('.repeatable-field-add').click(function() {
var theField = $(this).closest('div.repeatable-wrap')
.find('.repeatable-fields-list li:last').clone(true);
var theLocation = $(this).closest('div.repeatable-wrap')
.find('.repeatable-fields-list li:last');
$('input', theField).val('').attr('name', function(index, name) {
return name.replace(/(\d+)/, function(fullMatch, n) {
return Number(n) + 1;
});
});
$('select', theField).val('').attr('name', function(index, name) {
return name.replace(/(\d+)/, function(fullMatch, n) {
return Number(n) + 1;
});
});
theField.insertAfter(theLocation, $(this).closest('div.repeatable-wrap'));
var fieldsCount = $('.repeatable-field-remove').length;
if( fieldsCount > 1 ) {
$('.repeatable-field-remove').css('display','inline');
}
return false;
});
$('.repeatable-field-remove').click(function(){
$(this).parent().remove();
var fieldsCount = $('.repeatable-field-remove').length;
if( fieldsCount == 1 ) {
$('.repeatable-field-remove').css('display','none');
}
return false;
});
});
</script>
<h4>Configure PDF Output</h4>
<?php
echo '<div class="repeatable-wrap"><ul id="tracks-repeatable" class="repeatable-fields-list">';
if ( ! empty( $options ) ) {
$i = 1;
foreach( $options as $option ) {
?> <li>
<input type="text" name="ssfrm_options[ssfrm_mytext<?php echo $i; ?>]" value="<?php echo $options['ssfrm_mytext'.$i]; ?>" />
<input type="text" name="ssfrm_options[ssfrm_myothertext<?php echo $i; ?>]" value="<?php echo $options['ssfrm_myothertext'.$i]; ?>" />
<select name="ssfrm_options[ssfrm_myselect<?php echo $i; ?>]">
<option value="" <?php selected('', $options['ssfrm_myselect'.$i]); ?>></option>
<option value="true" <?php selected('true', $options['ssfrm_myselect'.$i]); ?>>Yes</option>
<option value="false" <?php selected('false', $options['ssfrm_myselect'.$i]); ?>>No</option>
</select>
<a class="repeatable-field-remove button" href="#">X</a>
</li>
<?php
$i++;
}
} else {
?> <li>
<input type="text" name="ssfrm_options[ssfrm_mytext1]" value="<?php echo $options['ssfrm_mytext1']; ?>" />
<input type="text" name="ssfrm_options[ssfrm_myothertext1]" value="<?php echo $options['ssfrm_myothertext1']; ?>" />
<select name="ssfrm_options[ssfrm_myselect1]">
<option value="" <?php selected('', $options['ssfrm_myselect1']); ?>></option>
<option value="true" <?php selected('true', $options['ssfrm_myselect1']); ?>>Yes</option>
<option value="false" <?php selected('false', $options['ssfrm_myselect1']); ?>>No</option>
</select>
<a class="repeatable-field-remove button" href="#">X</a>
</li>
<?php
} ?>
</ul><a class="repeatable-field-add button" href="#">+</a></div>
<br />
<p class="submit"><input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /></p>
</form>
</div>
<?php
}
I've figured out the problem. After saving, it was repeating the fields group for each option in the group. I solved the problem by wrapping the repeatable section inside a conditional statement, checking if the first required field has a null value:
if ( $options['ssfrm_mytext'.$i] !== null ) {
// repeatable fields section
}
I have a search function that will accept a search string and send it to a php file for parsing a database column. I'd also like users to choose which aspect of the website they'd like to search (comics, artwork, or both). Comic and Artwork or stored in two separate tables.
This is a function that will accept an input search string from the html below and send it to a php file.
<script type="text/javascript">
function search(searchString) {
//var site = $("#site").val();
$.get("./scripts/search.php", {_input : searchString},
function(returned_data) {
$("#output").html(returned_data);
}
);
}
And this is javascript to accept a choice to search "comics", "artwork" or "all".
function searchChoice(choice) {
alert("Choice: " + choice);
$.get("./scripts/search.php", {_choice : choice}
);
}
</script>
HTML:
<!--Search filtering for comics, artwork, or both-->
<span class="search"><b>Search for: </b> </span>
<div class="btn-group" data-toggle="buttons-radio">
<span class="search">
<button type="button" class="btn" id="comics" onclick="searchChoice(this.id)">Comics</button>
<button type="button" class="btn" id="artwork" onclick="searchChoice(this.id)">Artwork</button>
<button type="button" class="btn" id="all" onclick="searchChoice(this.id)">All</button>
</span>
</div>
<br/>
<br/>
<!--Search functionality-->
<span class="search">
<input type="text" onkeyup="search(this.value)" name="input" value="" />
</span>
<br />
<span id="output"><span class="sidebarimages"> </span></span>
PHP excerpt:
$input = (isset($_GET['_input']) ? ($_GET['_input']) : 0);
$siteChoice = (isset($_GET['_choice']) ? ($_GET['_choice']) : "all");
You can see the javascript correctly alerting out "Choice: comics" when comics button is selected, but the php side, echo "</br>Choice: " . $siteChoice;, is echo'ing out "all", which is incorrect.
Any ideas would be greatly appreciated!
As mentioned #E_p, that is the problem ... another option is to create a variable and store the data there ... try this: you don't need change the html
var mySearchString = 0;
var myChoice = 'all';
function search(searchString) {
mySearchString = searchString;
GetSearch();
}
function searchChoice(choice) {
myChoice = choice;
GetSearch();
}
function GetSearch(){
$.get("./scripts/search.php", {_input : mySearchString, _choice : myChoice},
function(returned_data) {
$("#output").html(returned_data);
}
);
}
You do not keep state for _choice.
When search is called it does not pass it to a server.
You need to change buttons to option and in search function pass both. to a server at the same time
Replace the buttons with radio buttons and use form.Serialize()
<form id="searchform">
<input type="radio" name="_choice" value="comics" />Comics<br/>
<input type="radio" name="_choice" value="artwork" />Artwork<br/>
<input type="radio" name="_choice" value="all" />All<br/>
<input type="text" onkeyup="search()" name="_input" value="" />
</form>
Javascript
function search() {
//var site = $("#site").val();
$.get("./scripts/search.php", $('#searchform').serialize(),
function(returned_data) {
$("#output").html(returned_data);
}
);
}
The .serialize() function converts form input to JSON so you don't have to type manually, No more parameter, and no two functions, just one to do them all
I have a text box named subscriber name.when I double clicked on that text box,a child window should open.In that child window list of subscriber names are shown using while loop of mysql query.My problem is when I double clicked on it ll pass a value as undefined.This problems comes due to looping of subscriber names from db table.How can I solve it? Please help me soon.Here my code.
<script type="text/javascript">
function displaymessage(){
opener.document.cash_entry.sub_name.value = document.subscriber.subname.value;
self.close();
}
</script>
<form>
<?php
$sel=mysql_query("select * from add_ticket");
while($row=mysql_fetch_array($sel)) {
$subscriber=$row['subscriber'];
?>
<input type="text" name="subid" id="subid" value="<?php echo $subscriber; ?>"
ondblclick="displaymessage()" readonly="true">
<?php } ?>
</form>
You have not named your form and you named your field differently than in the HTML code and you have more than on element with the same name which makes it an array if more than one
Do this
<script type="text/javascript">
function displaymessage(fld){
opener.document.cash_entry.sub_name.value = fld.value;
self.close();
}
</script>
<form>
<?php
$sel=mysql_query("select * from add_ticket");
while($row=mysql_fetch_array($sel)) {
$subscriber=$row['subscriber'];
?>
<input type="text" name="subname"
id="subid<?php echo $subscriber; ?>"
value="<?php echo $subscriber; ?>"
ondblclick="displaymessage(this)" readonly="true">
<?php } ?>
</form>
by why not
<input type="button" value="<?php echo $subscriber; ?>"
onclick="displaymessage(this)" >
For more than one value, you can do
function displaymessage(fld){
var parts = fld.value.split("|");
opener.document.cash_entry.sub_name.value = parts[0];
opener.document.cash_entry.sub_id.value = parts[1];
self.close();
}
<input type="button"
value="<?php echo $subscriber; ?>|<?php echo $subscriberID; ?>"
onclick="displaymessage(this)" >