I have a table like every table have their edit button :
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name"><?php echo $aircrews->fname.' '.$aircrews->lname; ?></p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status1; ?></p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status2; ?></p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
My problem is that when I click on particular edit then its corresponding p tag should be hidden and input type=text should be visible but in my case, by clicking on "edit" button, every p tag getting hide and showing all input text instead of particular tags.
My jQuery code is given below:
<script type="text/javascript">
$(document).ready(function(){
$('.text').hide();
$(this).on('click', function(){
alert('ok');
$('.name').hide();
$('.text').show();
})
})
</script>
I am a new be here can anyone please help me related this? thanx in advance. I want only clickable edit open their text boxes instead how cs
My view is like this :
https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost
i want click on edit and name pay1 and pay2 should be text
Remove the .class delcarations since the event will apply to every one of them in .hide() and .show(). Put the click event directly on all p in this case. (Can easily be adjusted to your specs).
Put this instead of your class in 'show() and hide(). To show the current <td>s .text class you can use the jQuery .siblings() function and specificy the .text sibling directly.
EDIT:
Since you want to have the text change when you hit the Edit button and not each p then you can place p with .edit_btn, and traverse up and down the DOM using .parent() and .children() functions.
$(document).ready(function() {
$('.text').hide();
$('.edit_btn').on('click', function(e) {
console.log(this);
$(this).parent().siblings('td').children('p').hide();
$(this).parent().siblings('td').children('.text').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">
Name </p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
You are accessing the elements by class. $('.name') returns all elements of class name, also $('.text') returns all elements of class text, not just the one you clicked on.
So you need to give individual elements unique ids and select by id $('#id').
See https://api.jquery.com/id-selector/
You should change Javascript part like this:
<script type="text/javascript">
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
</script>
In jQuery, .parents() function will check for the parents of "edit_btn" class which is <td>. Then .siblings() function consider all the siblings of <td> tag which comes under the same <tr> tag. Then .children('p') function will check for childrens with <p> tag means it consider <p> tags which are under those <td> tags and then hide() function will hide that particular <p> tag. Check below Snippet.
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 1_1</p>
<input class="text" type="text" name="name" value="Value Here 1_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input type="text" class="text" name="pay1" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 3_1</p>
<input type="text" class="text" name="pay2" value="Value Here 3_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input class="text" type="text" name="name" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_2</p>
<input type="text" class="text" name="pay1" value="Value Here 2_2" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_3</p>
<input type="text" class="text" name="pay2" value="Value Here 2_3" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
Related
I am trying to intercept changes to a WooCommerce Extra product options datetimepicker component. Essentially, it's just a datetimepicker.
I have:
<script>
var box = document.getElementById("myDateTimePicker");
//console.log("#devlog: Active");
box.addEventListener("blur", function(){
var selectedDate = box.value;
console.log(selectedDate);
});
</script>
Which is almost working. It outputs the previous value contained by the datetimepicker, not the value it has just been changed to.
I've tried a range of events in the eventListener but nothing seems to do the trick. Could some kind soul put me out my misery and clue me in to how to get the NEW value from the datetimepicker when it is changed? Thanks.
Update:
Here is the html from the form. The component I'm fighting with is the date-picker inside the last <tr>.
<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
<table class="thwepo-extra-options thwepo_simple" cellspacing="0">
<tbody>
<tr>
<td colspan="2" class="section-title">
<h3 class="">Mandatory information</h3></td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
</td>
</tr>
</tbody>
</table>
<div class="quantity hidden">
<input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
</div>
<button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>
</form>
You can try this:
document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}
You might be able to use this.value, but I wrote it the long way just in case.
Hope this helps.
how to make current table row as highlighted if I change any input text or image of that particular table row using Jquery. As code given below which contains two rows, so out of which how to make any of the row as highlighted if I modify input text or change image by keypress event or any other solutions please let me know
<table>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
Try this,
$(document).ready(function() {
$('td').on('keydown', function(ev) {
$('tr').css('background-color','');
$(this).closest('tr').css('background-color','red');
});
});
jsFiddle for the same
https://jsfiddle.net/0k8Lu50v/
Try giving styles to tr,
<style>
tr:focus { background: yellow; }
</style>
<table>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
How can I reorder table rows?
<table class="table table-bordered" style="text-align: center; width: 95%;">
<tr>
<td style="width: 2%;"></td>
<td>Prekės pavadinimas</td>
<td style="width: 15%;">Kiekis</td>
<td style="width: 15%;">Kaina</td>
<td style="width: 15%;">Suma</td>
<td style="width: 2%;"></td>
</tr>
<tr>
<td style="vertical-align: middle;">
<span class="glyphicon glyphicon-menu-up"></span><br>
<span class="glyphicon glyphicon-menu-down"></span>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="product"></label>
<input type="text" class="form-control" id="product" name="product" placeholder="Prekė">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="quantity"></label>
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Kiekis">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="price"></label>
<input type="text" class="form-control" id="price" name="price" placeholder="Kaina">
</div>
</td>
<td style="vertical-align: middle;">
<div class="form-group">
<label for="total"></label>
<input type="text" class="form-control" id="total" name="total" placeholder="Suma" disabled>
</div>
</td>
<td style="vertical-align: middle;"><span class="glyphicon glyphicon-remove" style="color: red;"></span></td>
</tr>
</table>
$('tr td span:nth-of-type(1)').on('click', function() {
moveup = $(this).parent();
moveup.prev().before(moveup);
});
$('tr td span:nth-of-type(2)').on('click', function() {
movedown = $(this).parent();
movedown.next().after(movedown);
});
And here is how my code now working with jQuery:
http://jsfiddle.net/zJ8hd/21/
Thanks for help in advance! :)
Your logic for traversal and amending the DOM isn't quite right. You need to get the parent tr element and then insert it before/after the prev/next tr, something like this:
$('tr td span:nth-of-type(1)').on('click', function() {
var $row = $(this).closest('tr')
if ($row.index() == 1)
return;
$row.insertBefore($row.prev());
});
$('tr td span:nth-of-type(2)').on('click', function() {
var $row = $(this).closest('tr')
$row.insertAfter($row.next());
});
Working example
Note I added foo and bar as default field values in the fiddle only to make the movement more obvious.
moveup = $(this).parent();
Here, this refers to the span, so its parent is a td not the row. If you want to move the whole row, you should give a look at .closest()(1) and then use .prev() or .next().
Your are close to the solution, I'll let you work a little ;)
1 -> https://api.jquery.com/closest/
I created page with 2 checkbox, submit and reset button as attached image
If i click on radio buttons it will show hidden text area's.
If I select both checkboxes and click on submit it will work fine. But if I click on only one of the checkboxes and click on submit it won't work.
Could you please help me how to submit the query with selecting only one checkbox?
My request_to_approve.php code is
<html>
<script type="text/javascript">
function checkValue()
{
if(document.getElementById("reject").checked == true)
{
document.getElementById('xtraInfo').style.display='block';
document.getElementById('xtraInfo1').style.display='block';
document.getElementById('xtraInfo2').style.display='block';
document.getElementById('xtraInfo3').style.display='block';
document.getElementById('xtraInfo4').style.display='block';
document.getElementById('xtraInfo5').style.display='block';
}
else
{
document.getElementById('xtraInfo').style.display='none';
document.getElementById('xtraInfo1').style.display='none';
document.getElementById('xtraInfo2').style.display='none';
document.getElementById('xtraInfo3').style.display='none';
document.getElementById('xtraInfo4').style.display='none';
document.getElementById('xtraInfo5').style.display='none';
}
}
function checkswcr()
{
if(document.getElementById("swcr").checked == true)
{
document.getElementById('swcrInfo').style.display='block';
document.getElementById('swcrInfo1').style.display='block';
document.getElementById('swcrInfo2').style.display='block';
document.getElementById('swcrInfo3').style.display='block';
document.getElementById('swcrInfo4').style.display='block';
document.getElementById('swcrInfo5').style.display='block';
}
else
{
document.getElementById('swcrInfo').style.display='none';
document.getElementById('swcrInfo1').style.display='none';
document.getElementById('swcrInfo2').style.display='none';
document.getElementById('swcrInfo3').style.display='none';
document.getElementById('swcrInfo4').style.display='none';
document.getElementById('swcrInfo5').style.display='none';
}
}
function checkother()
{
if(document.getElementById("other").checked == true)
{
document.getElementById('otherInfo').style.display='block';
document.getElementById('otherInfo1').style.display='block';
if(document.getElementById("reject").checked == false)
{
document.getElementById('otherInfo2').style.display='block';
document.getElementById('otherInfo3').style.display='block';
document.getElementById('otherInfo4').style.display='block';
document.getElementById('otherInfo5').style.display='block';
}
}
else
{
document.getElementById('otherInfo').style.display='none';
document.getElementById('otherInfo1').style.display='none';
document.getElementById('otherInfo2').style.display='none';
document.getElementById('otherInfo3').style.display='none';
document.getElementById('otherInfo4').style.display='none';
document.getElementById('otherInfo5').style.display='none';
}
}
</script>
<table id="structure">
<tr>
<td id="page">
<body>
<?php
if (isset($_POST['submit']) )
{
$pronto = $_POST['pronto'];
$fatal = $_POST['fatal'];
$medi = $_POST['medi'];
$neu = $_POST['neu'];
$swcr = $_POST['swcr'];
print_r($pronto);
print_r($fatal);
print_r($medi);
print_r($neu);
print_r($swcr);
}
?>
</br>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<table width="100%" align="left" cellpadding="3" cellspacing="1">
<form name = "Register" method = "post" action = "request_to_approve.php">
<tr>
<td>
PR: <input type='checkbox' name='reject' id='reject' value='Rejected' onClick="checkValue()" />
</td>
</tr>
<tr>
<td align="left">
<div id="xtraInfo1" style="text-align:left; display:none; font-weight:bold;">
PRONTO Details: </div></td>
<td>
<div id="xtraInfo" style="text-align:left; display:none; font-weight:bold;">
<textarea id="pronto" width="900" style="width: 650px; resize:vertical;" name="pronto" required><?php if( $_SERVER['REQUEST_METHOD'] === 'POST' ) { print_r($_POST['rejectdt']); }?></textarea>
</div>
</td>
</tr>
<tr>
<td>
<div id="xtraInfo2" style="text-align:left; display:none; font-weight:bold;">Review Comments :</div></td>
<td>
<table>
<tr>
<td align="center"> <div id="xtraInfo3" style="text-align:left; display:none; font-weight:bold;">Fatal :- </br>
<textarea id="fatal" class="wmd-input processed" name="fatal" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
<td align="center"> <div id="xtraInfo4" style="text-align:left; display:none; font-weight:bold;">Medium :- </br>
<textarea id="medi" class="wmd-input processed" name="medi" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
<td align="center"> <div id="xtraInfo5" style="text-align:left; display:none; font-weight:bold;">Neutral :- </br>
<textarea id="neu" class="wmd-input processed" name="neu" type="file" cols="31" rows="5" tabindex="50" data-min-length="" wrap=physical required></textarea>
</div></td>
</tr>
</table>
</tr>
<tr>
<td>
SWCR/Feature : <input type='checkbox' name='swcr' id='swcr' value='swcr' onClick="checkswcr()" />
</td>
</tr>
<tr>
<td align="left">
<div id="swcrInfo1" style="text-align:left; display:none; font-weight:bold;">
SWCR/Feature/Backlog Details: </div></td>
<td>
<div id="swcrInfo" style="text-align:left; display:none; font-weight:bold;">
<textarea id="swcr" width="900" style="width: 650px; resize:vertical;" name="swcr" required><?php if( $_SERVER['REQUEST_METHOD'] === 'POST' ) { print_r($_POST['swcr']); } ?></textarea>
</div>
</td>
</tr>
<tr><td>
<button type="submit" name="submit" value="submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</td></tr>
</form>
</table>
</table>
</html>
Could anyone please help me on this
function checkswcr(){
var swcrInfo = document.getElementById('swcrInfo');
swcrInfo.style.display == 'block' ? swcrInfo.style.display = 'none' : swcrInfo.style.display = 'block';
}
Demo
okay make a hidden field like a number, store a value on first checkbox click..attach your desired function to it. on second checkbox click store a different value and the function and if both the checkboxes have been clicked store the third value in the same hidden field. the value of the hidden field will indicate exactly what to do with the click..hope it should work
I'm trying to include a file which generates 2 random numbers that needs to be add or what we call captcha. I have two logins: one that requires employee id, birthdate, and the captcha answer(Which I call the easy login). While the other one requires your first name, last name, birthdate, and captcha(I call it the standard login). So I have two radio buttons for the user to choose whether an easy login or standard login. So I'm encountering this problem when you choose a login then you need to answer the captcha (The captcha sends sessions for its answer) so whats happening right know is that the captcha in the easy login is always being override by the captcha in the standard login. What I thought that I would do is set a condition where if the radio button is selected (easy login) then thats the time it will be included. But I don't know how to do that.
Here is the captcha code:
captcha.php
<?php
session_start();
$n1=rand(1,6); //Generate First number between 1 and 6
$n2=rand(5,9); //Generate Second number between 5 and 9
$answer=$n1+$n2;
$math = "What is ".$n1." + ".$n2." ? ";
$_SESSION['vercode'] = $answer;
print $math;
?>
Then here is the code for my interface:
index.php
<SCRIPT TYPE="text/javascript">
function toggleTables(which)
{
if(which == "0") {
document.getElementById('standard').style.display = "table";
document.getElementById('customize').style.display = "none";
}
if(which == "1") {
document.getElementById('customize').style.display = "table";
document.getElementById('standard').style.display = "none";
}
}
</SCRIPT>
</head>
<body style="background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" >
<?php include('../include/logoheader.php'); ?>
<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div class="content">
<?php include('../include/retain-empid.php'); ?>
<br>
<input name="radio" type="radio" id="customize_1" onClick="toggleTables('0')" value="radio" /><font color="white">Standard Login</font>
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" checked="checked"/><font color="white">Easy Login</font>
<form name="loginform" action="login_exec.php" method="post" >
<center><?php include('../function/login_errmsg.php'); ?></center>
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
<tr>
<th colspan="4">
Easy Log-in For Registered Convergys Employees
</th>
</tr>
<tr>
<td align="right">
<label>Employee Number</label>
</td>
<td>
<input type="text" placeholder="Employee Number" name="txt_EmpID" autoComplete="off" value=<?php echo $value; ?> >
</td>
<td align="right">
<label>Birthday</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate" name="txt_BDate" autoComplete="off" maxlength = "10"
style ="width:170px;"/>
</td>
</tr>
<tr>
<td align="right">
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 170px; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
<form action="otherlogin_exec.php" method="post">
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
<tr>
<th colspan="4">
Standard Log-in For All Registered Users
</th>
</tr>
<tr>
<td align = "right">
<label>First name:</label>
</td>
<td>
<input type="text" placeholder="First Name" name="txtFirstName" autoComplete="off" >
</td>
<td>
<label>Last name:</label>
</td>
<td>
<input type="text" placeholder="Last Name" name="txtLastName" autoComplete="off" >
</td>
</tr>
<tr>
<td>
<label>Birthday:</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate"
name="txtPassword" autoComplete="off" maxlength = "10" style = "width:170px;"/>
</td>
<td>
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 100%; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
</div>
</div>
Make the first line of your file
<?php include_once ('../include/mathcaptcha.php'); ?>
then change the lines from
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
to
<td><?php echo $math;?></td>
and take the print out of the captcha file. PHP doesnt affect the design of pages only the outputted data does which should be altered as needed.