I've following Json data
{"1":"2","2":"2"} this can be change as per conditions.
I'm trying to implement radio button checked if Json contain value same as radio button.
in Json first Value is radio name and 2nd is value that needs to match.
success : function(result){
//alert(JSON.stringify(result));
var contact = JSON.parse(result);
alert("First: " + contact + " Second: " + contact);
$('input[type=radio][name="' + group[contact[1]] + '"][value="' + contact[1] + '"]').prop('checked', true);
}
Following is my html form
<table width="50%" border="1" align="center" cellpadding="2" cellspacing="1" >
<th><td colspan='2'> <font color='#006699' size='3' face='Arial, Helvetica, sans-serif'><strong> Assign User Role </br></br></strong></font></td></th>
<tr bgcolor="#FFFFFF">
<td><strong>Select User:</strong></td>
<td><input type="text" name="assigned_to" id="assigned_to" /></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><strong>Page Group</strong></td>
<td><strong>User Role </strong></td>
</tr>
<?php
foreach($groups as $key=>$value)
{ ?>
<tr bgcolor='#FFFFFF'>
<td><strong><?php echo $value; ?></strong></td>
<td>
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group1" value="1" />Viewer
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group2" value="2" />Approver
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group3" value="3" />Editor
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group3" value="4" />Adder
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group4" value="5" />Super Editor
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group5" value="6" />Blocked
</td>
</tr>
<?php
}
?>
</tr>
<tr></tr> <tr></tr> <tr></tr>
<tr bgcolor="#FFFFFF">
<td></td>
<td>
<input type="submit" name="submit" value="Submit"/>
</td>
</tr>
Traverse through radio elements collection using each() of jquery, check for matched radio value with json provided value and add check to matched radio.
According to your json as :
{"1":"2","2":"2"}
Insert below code in sucess function of ajax
success : function(result){
for(key in result){
$('input[type=radio]').each(function(){
if($(this).val() === result[key]){
$(this).prop('checked', true);
}
}
}
}
Related
I have a form that the user can add additional lines (using javaScript) but when the save button is clicked, how to I grab the new data to assign to a variable?
What's happening now: The user adds new rows, clicks save and the rows disappear from the page along with the data.
Here is my html:
<table id="desc_table" class="form">
<tbody id="desc_tbody">
<tr id="headings">
<td><font><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
<td></td>
</tr>
<tr>
<td><input name="desc1" type="text" value="<?php echo $desc1; ?>"></td>
<td> <input name="desc_hr1" type="text" value="<?php echo $desc_hr1; ?>"></td>
<td> <input name="desc_rt1" type="text" value="<?php echo $desc_rt1; ?>"></td>
<td><input name="desc_amt1" type="text" value="<?php echo $desc_amt1; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
<tr>
<td><input name="desc2" type="text" value="<?php echo $desc2; ?>"></td>
<td> <input name="desc_hr2" type="text" value="<?php echo $desc_hr2; ?>"></td>
<td> <input name="desc_rt2" type="text" value="<?php echo $desc_rt2; ?>"></td>
<td><input name="desc_amt2" type="text" value="<?php echo $desc_amt2; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
<tr>
<td><input name="desc3" type="text" value="<?php echo $desc3; ?>"></td>
<td> <input name="desc_hr3" type="text" value="<?php echo $desc_hr3; ?>"></td>
<td> <input name="desc_rt3" type="text" value="<?php echo $desc_rt3; ?>"></td>
<td><input name="desc_amt3" type="text" value="<?php echo $desc_amt3; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
</tbody>
</table>
<div>
<center><input type="button" value="Add New Line" id="add_btn" name="add_btn" onclick="newLine()"></center>
</div>
JavaScript:
function newLine(){
//get the total amount of rows in the table
var $rowcount = $('#desc_table tr').length;
//add the row number to the field name to make it unique
var $desc = "desc" + $rowcount;
var $desc_hr = "desc_hr" + $rowcount;
var $desc_rt = "desc_rt" + $rowcount;
var $desc_amt = "desc_amt" + $rowcount;
//create new row data
var $newRowData = '<tr><td><input name=' + $desc + ' type=text></td><td><input name=' + $desc_hr + ' type=text></td><td><input name=' + $desc_rt + ' type=text></td><td><input name=' +$desc_amt+ ' type=text></td><td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td></tr>';
//append new row to bottom of the table
$($newRowData).appendTo($("#desc_table tbody"));
}
PHP variable declaration:
...
if (!empty($_POST['desc1'])){
$desc1 = $_POST['desc1'];
}
else{
$desc1 = NULL;
}
if (!empty($_POST['desc_hr1'])){
$desc_hr1 = $_POST['desc_hr1'];
}
else{
$desc_hr1 = NULL;
}
if (!empty($_POST['desc_rt1'])){
$desc_rt1 = $_POST['desc_rt1'];
}
else{
$desc_rt1 = NULL;
}
if (!empty($_POST['desc_amt1'])){
$desc_amt1 = $_POST['desc_amt1'];
}
else{
$desc_amt1 = NULL;
}
if (!empty($_POST['desc2'])){
$desc2 = $_POST['desc2'];
}
else{
$desc2 = NULL;
}
if (!empty($_POST['desc_hr2'])){
$desc_hr2 = $_POST['desc_hr2'];
}
...
When the page variables are captured with the POST, how do I find the new row variables to declare them and capture the data?
Use array-style names rather than incrementing the suffix on each row:
<tr>
<td><input name="desc[]" type="text" value="<?php echo $desc; ?>"></td>
<td> <input name="desc_hr[]" type="text" value="<?php echo $desc_hr; ?>"></td>
<td> <input name="desc_rt[]" type="text" value="<?php echo $desc_rt; ?>"></td>
<td><input name="desc_amt[]" type="text" value="<?php echo $desc_amt; ?>"></td>
<td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
</tr>
PHP will then put all the inputs into arrays, and you can loop through them.
foreach ($_POST['desc'] AS $i => $desc) {
$desc_hr = $_POST['desc_hr'][$i];
$desc_rt = $_POST['desc_rt'][$i];
$desc_amt = $_POST['desc_amt'][$i];
...
}
Put in a hidden input and then set its value to the amount of rows shown by default. When you add or delete a row update the value using JavaScript. When submitted you can then use this value in a loop.
However, the easiest and most appropriate solution would be just to use form arrays. For example, why not call each input name as "desc[]"? Then use the array index to figure out where/amount of rows etc. You could have 1 or 1000 inputs named that...
I am trying to get a filter working for a table. What I would like is checkboxes to filter (hide) rows based on whether they're checked or not and if the value is present in the table cell. I have it somewhat working, but it will only sort one of the checkboxes. Also, if there are multiple values in the table cell being filtered, that row is hidden. Thoughts? Thank you in advance for any help. I'm really struggling with this for some reason!
Here is the code I have been using:
$("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
The markup is as follows (please excuse some messiness, its Wordpress)
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3><br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
<br/><br/><h3>Duration:</h3>
<input type="checkbox" rel="duration" value="Summer">Summer
<input type="checkbox" rel="duration" value="Semester">Semester
<input type="checkbox" rel="duration" value="Full Year or More">Full Year or More
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Field</th>
<th>Duration</th>
<th>Year of Study</th>
<th>Other</th>
<th>Procedure</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<?php
$grargs = array ( 'post_type' => 'scholarship');
$grant_query = new WP_Query( $grargs );
while ( $grant_query -> have_posts() ):
$grant_query -> the_post(); ?>
<tr class="grant-detail">
<td>
<?php the_title(); ?>
</td>
<td><?php echo wp_trim_words(get_the_content(), 25 ); ?></td>
<td class="fields" rel="<?php echo get_field('fields'); ?>"><?php echo the_field('fields'); ?></td>
<td class="duration" rel="<?php echo the_field('desired_duration'); ?>"><?php echo the_field('desired_duration'); ?></td>
<td class="status" rel="<?php echo the_field('year-of-study'); ?>"><?php echo the_field('year-of-study'); ?></td>
<td class="other" rel="<?php echo the_field('other'); ?>"><?php echo the_field('other'); ?></td>
<td class="procedure" rel="<?php echo the_field('procedure'); ?>"><?php echo the_field('procedure'); ?></td>
<td class="url"><?php echo get_field('url'); ?></td>
</tr>
<?php endwhile;
wp_reset_postdata(); //reset the first query
?>
</tbody>
</table>
As I think you just are calling the first checkbox [0]
if ($(this)[0].checked) {
call all by inserting someting like
$('input[type=checkbox]').each(function () {
if (this.checked) {
console.log($(this).val());
}
});
Your code works fine, here is a simplified version
$("input:checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
$('input:checkbox:checked').each(function() {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
});
if (showAll) {
$('tr').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3>
<br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Fields</th>
<th>Status</th>
<th>Procedure</th>
</tr>
</thead>
<tbody>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Freshman">Freshman</td>
<td class="status" rel="Freshman">Freshman</td>
<td class="procedure" rel="Freshman">Freshman</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Sophmore">Sopho</td>
<td class="status" rel="Sophmore">Sopho</td>
<td class="procedure" rel="Sophmore">Sopho</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Junior">Junior</td>
<td class="status" rel="Junior">Junior</td>
<td class="procedure" rel="Junior">Junior</td>
</tr>
</tbody>
</table>
Please help me. I have a php file that will be called by post method of jQuery. The html elements from this php file cannot be accessible in jquery.
Here comes my code snippet.
In query:
var getFinishOptions = $.post("ajax_finish_options.php",
{ event_id: event_name},
function(data)
{
$("#TimeToFinish").append(data);
}
);
HTML:
<div id="TimeToFinish"> </div>
PHP:
<tr style="width: 100%">
<th style="width: 100%" colspan="2"><?php echo $FinishCategory[0]; ?> </th>
<th style="width: 100%" colspan="3"><?php echo $FinishCategory[1]; ?> </th>
<th style="width: 100%" colspan="3"><?php echo $FinishCategory[2]; ?> </th>
</tr>
<tr>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 3 </td>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 3 </td>
</tr>
<tr>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[0]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[0]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[0]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[0]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][2]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][2]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][2]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][2]; ?> </td>
</tr>
Final piece of jquery:
$("input[type=radio][name=FinishOptions]").click(function() {
alert($(this).val());
});
All i want is, to get the value of any of one checked radio button.
Please give your valuable comment.
The reason why you cant get the values is that, upon your final piece of jquery, upon execution, you are binding and element which does not yet exist (remember, the radio buttons inside the table are loaded dynamically, thru your ajax call).
Therefore, it will not work. You must use .on() in order to catch that after it has been loaded. (its like .live())
Consider this example:
// change the final piece of jquery
$('#TimeToFinish').on('click', 'input[type="radio"][name="FinishOptions"]', function() {
var value = $(this).val();
alert(value);
});
I want to sum table rows dynamically as the user inputs values. Since the number of rows can vary I want to use a php loop to accomplish this. I'm having problems getting the loop to work correctly. If, for example, there are two individual rows to sum only the bottom row will be summed.
<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();
for (i = 1; i <= 3; i++) {
if (parseInt(document.getElementById(a + i).value) > 0) {
n[i] = parseInt(document.getElementById(a + i).value);
rowtotal += n[i];
}
}
document.getElementById(a + 'total').value = rowtotal;
};
</script>
The following is an example of a single row sum. The total column continues to be summed as values are entered. This is a nice effect but not necessary.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<tr>
<td>
<input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1gtotal" id="p1gtotal" type="text" value="" />
</td>
</tr>
</table>
Here is my attempt at looping additional rows using php and javascript. The first row will not sum but the second row will. I think the problem is with the javascript variable "m" in that it goes directly to the last row but I can't figure out how to fix it.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
var k = <?php echo json_encode($j); ?>;
var m = 'p'+k+'g';
</script>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
Any help is greatly appreciated. Thanks.
Used PHP to echo the loop variable within the onChange javascript function call:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
I am having trouble finding the closest selected option (text) near a submit button in multiple forms (with multiple submit buttons).
But I don't get anything how to fix this?
Code :
$(document).ready(function() {
$("form").submit(function() {
var x = $(this).closest('form').find('input[type=submit]');
var y = $(x).closest('select option:selected').text();
alert(y);
});
});
<form action="<?php echo site_url('manage/deleteVendor'); ?>" method="POST">
<table cellspacing='10'>
<tr>
<td>Delete Vendor</td>
</tr>
<tr>
<td>Vendor</td>
<td><select name="vendor" class="vendor">
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor->ID; ?>" ><?php echo $vendor->NAME; ?></option>
<?php } ?>
</select></td>
<td><input type="submit" name ="submit" value="Delete Vendor"/></td>
</tr>
</table>
</form>
<form action="<?php echo site_url('manage/deleteVendor'); ?>" method="POST">
<table cellspacing='10'>
<tr>
<td>Delete Vendor 2</td>
</tr>
<tr>
<td>Vendor</td>
<td><select name="vendor" class="vendor">
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor->ID; ?>" ><?php echo $vendor->NAME; ?></option>
<?php } ?>
</select>
</td>
<td><input type="submit" name ="submit" value="Delete Vendor"/></td>
</tr>
</table>
</form>
Find the closest select and find the selected option in it followed by .html() to get the text.
var y=$('selector').closest('select').find(':selected').html(); //find the text
var x=$('selector').closest('select').find(':selected').val(); //find the value
alert(y);
alert(x);
Edit: After viewing you HTML
var SelectedOptionText=$('.vendor').find(':selected').html();
alert(SelectedOptionText);
Edit: Based on your commment
$(document).ready(function() {
$("form").submit(function() {
var x =$(this).find('.vendor :selected').html();
alert(x);
});
});