I have a simple form, just a single text field containing a email from a MySQL database. The user has 2 buttons one can completely update the email with what they replace it with or they can choose to return the email to a default state i.e. the original email. It all works OK if you have the 2 buttons immediately 'in-situ' with the relevant text-field. But if you put the 'reset' button in a separate table cell, the 'onlick' set-email-back-to-default function stops working, and I don't understand how to fix it.
It will work like this because the reset button is slap-bang next to the text field:
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
<input id="reset-cc" name="add" type="button" value="Set to default" />
Here's the JavaScript:
$(document).ready(function() {
$('#reset-cc').click(function() {
$(this).siblings('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
$('#update_cc').submit();
return false;
});
But if I place the reset button in a separate table cell as follows the function ceases to work as if it can no longer access the text field:
<td>
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
I assume I need to modify the JavaScript so it can still access the text field even though it is now separated by a table-cell but I don't know how to do it.
Your problem lies here:
$(this).siblings('input[name="cc_email"]')
By moving the input button into a different TD it is no longer a sibling (as the other answers have indicated). You may want to just give the button an ID and reference it that way:
//this bit |
// v
<input id="cc_email" name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
//...
$("#cc_email")...
Which will be easier than making convoluted parent/find calls. This button is unique, is it not?
The .siblings() function searches in a collection of siblings within the same parent. If you put them into different parents then they are not siblings. Try replacing it with something like:
$(this).parent().prev().find('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
If the input will always be in the same tr as the button, search for the input field within the row:
$('#reset-cc').click(function() {
$(this).closest('tr').find('input[name="cc_email"]').val('original#example.com');
$('#update_cc').submit();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="cc_email" type="text" value="loaded#example.com" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
</tr>
</table>
Related
Improper Form Submission
For the below code snippet, I am not able to get any value for the input hidden field in my request.
In the form table created:
It is working fine, if I click the Approve button of the first row.
Issue is faced when Approve button of intermediate row is clicked.
There is no any value passed in the request for the id="hidinput";
<script>
function fetchID(){
var contentID = document.getElementById("testID").innerHTML;
document.getElementById("hidinput").value=contentID;
}
</script>
<%for (APPL_Testimonial_Txn testimonial_Txn : results) {%>
<tr>
<form action="<%=approve.toString()%>" method="POST">
<td id="testID"><%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%></td>
<input type="hidden" name="rowId" id="hidinput" value=""/>
<td><button class="button-continue ContinueNew" type="submit"
onclick="fetchID()">APPROVE</button></td>
</form>
</tr>
<%}%>
Please find below screen capture of the table.
As per the code above, there is no way to figure out the row in which approve button was clicked. You can pass the testimonial Id to a fetchID function.
<script>
function fetchID(contentID){
document.getElementById("hidinput").value=contentID;
}
<script>
<tr>
<form action="<%=approve.toString()%>" method="POST">
<td><%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%></td>
<input type="hidden" name="rowId" id="hidinput" value=""/>
<td><button class="button-continue ContinueNew" type="submit"
onclick="fetchID('<%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%>')">APPROVE</button></td>
</form>
</tr>
<%}%>
Thanks for the suggestion.
I changed the position of form tags, means kept form tag outside the loop construct keeping form as unique and it worked. :)
I want to delete a selected row using jQuery. First, while clicking add button, rows are added dynamically with a delete button. Now I want to delete the selected row.
I am using the following code to add rows dynamically:
$("#btnAdd").on('click', function (){
$('#Time tr').last().after('<tr><td><span style="font-size:14px;">Diplamo/Certificate :</span><input type="textbox" input id="addedValue12" name = "Certificate"></td><td><span style="font-size:14px;">Percentage :</span><input type="textbox" id="addedValue123" name = "CertificatePer"></td></tr>');
});
<input id="btnAdd" type="button" value="add" />
<table id="Time">
<tr>
</tr>
</table>
I am displaying values in a JSP page.
<c:forEach var="var1" items="${empedu.empCertificate}">
Certificate Name:<input value="${var1.certification}" name="Certificate" type="text" title="Only Text Allowed" pattern="[a-zA-Z\s'.,#:&?!()$#/\\]+" />
Percentage: <input value="${var1.percentage}" name="CertificatePer" style="width: 100px;" type="text" max="100" />
<input type="button" id="deleteRow" name="delete" value="delete" /><br/>
</c:forEach>
It is displayed on screen like this:
Here, If I click the third row, I want to delete the third row. How can I do this?
$("#Time").on("click", ".delete", function(){
$(this).closest("tr").remove();
});
Assuming delete is the class of the delete button. I have used .on as the rows and thus delete buttons are dynamically added.
This is picking the closest tr from the clicked delete button, and removing it.
Working Fiddle
1st: Id must be unique so don't use id for more than one element .. use class instead
2nd: while you append rows you need to jQuery event delegation ...
$('#Time').on('click' , '.delete' , function(){
// change .delete_btn with your delete btn class
$(this).closest('tr').remove();
});
This function doesn't get the ID or class (first line), so the code is applied to all the fieldsets. For me that's not a big problem, but I would like to focuse the code on two specific IDs to make the code more compatible for plugins.
$('#feedburner_widget').ready(function() {
$('input').focus(
function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$('input').blur(
function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
Basically, this code adds a class to a fieldset when the user clicks on the input field. The ID is on the first line, but the code applies the effect to all the fieldsets. And it works exactly in the same way if I change '#feedburner_widget' to document. What I'm doing wrong? Thanks.
Edit: And this is the HTML code:
<form id="feedburner_widget" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_attr($user); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<fieldset >
<input type="text" class="field" name="email" placeholder="<?php echo esc_attr($text); ?>" />
<input type="hidden" value="<?php echo esc_attr($user); ?>" name="uri" />
<input type="hidden" name="loc" value="<?php bloginfo('language'); ?>"/>
<span>
<input type="submit" value="" />
</span>
</fieldset>
</form>
When you do $('input'), you are asking jQuery to do a global search in the whole document. It does not 'remember' that you have just fetched the #feedburner element.
To search for only the elements in the #feedburner element, you could use the find() function on the jQuery object, like this:
$(document).ready(function() {
var $inputs = $('#feedburner_widget').find('input');
$inputs.focus(function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$inputs.blur(function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
In this particular case, you could also just alter the CSS selector to search directly for inputs inside the #feedburner_widget like this: $('#feeburner_widget input') If that element was already in a variable in your code, however, you should use the find method.
I have several forms in HTML, each with a submit button and a hidden field. The same javascript function is called when any of the submit buttons are pushed. I want to know which submit button has been pushed. I think I can do this by finding out what the hidden field value is of the corresponding form - but I'm having difficulty with this. My HTML is:
<div id="existingPhotosList">
<table><tbody><tr><td>
<img src="./userPictures/IMG0001.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0001.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
<tr>
<td>
<img src="./userPictures/IMG0002.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0002.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
</tbody>
</table>
</div>
There may be more or less table rows with images and forms on them - depending on how many images are found on the server.
The javascript I have right now is:
$('.deleteFiles').submit(deleteFile);
function deleteFile() {
var myValue = $(this).parent().closest(".picture").val();
alert(myValue);
return false;
}
I'm currently getting undefined as the result of the alert.
I want to know which submit button has been pushed.
As each of your forms only has one submit, you don't have to change your code much.
this in your submit handler will refer to the form, and the element is within the form, so:
var myValue = $(this).find("input[name=picture]").val();
No need to go up to the parent, and closest goes up the ancestry (through ancestors), not down. find goes down (descendants).
the simplest way I think will be:
var myValue = $('input[name=picture]', this).val();
should be:
var myValue = $(this).closest(".deleteFiles").find("input[type=hidden]").val();
here is the demo http://jsfiddle.net/symonsarwar/963aV/
$('.deleteFiles').click(deleteFile);
function deleteFile() {
var me=$(this).closest('tr').find('td:eq(1) input').val();
alert(me)
}
I have a fairly long form on a page with various checkboxes and text boxes. There is one point where I want a text box to become available if a corresponding checkbox is ticked. I almost have it working with this code:
<tr class= "formspace">
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td>
<td colspan="2"><input name="extrabed" type="checkbox" value="1" onChange="jsextrabed()"><?php echo $lang["extraadultx"]." ".$lang["notsingleoccx"];?>
<div id="extrabednumber"></div>
<script type="text/javascript">
function jsextrabed() {
if(document.roomnew.extrabed.checked == 1) {
document.getElementById("extrabednumber").innerHTML=' Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">';
}else{
document.getElementById("extrabednumber").innerHTML=' Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">';
}
}
</script>
</td>
</tr>
When the page first opens, only the checkbox shows.
When I tick the checkbox, the text box opens with a value of 1. So far, so good.
When I click again the checkbox is unticked and the value in the text box changes to 0. Still good.
When I click yet again the checkbox is ticked (good) but the value in the text box stays at 0 (bad!).
Further clicking toggles the checkbox but has no effect on the value in the text box.
What have I done wrong?
use this code for check:
if(document.roomnew.extrabed.checked) {
Just check with
if(document.roomnew.extrabed.checked){
}
else
{
}
There is no problem in the displayed code.
Here's a working demonstration : http://jsfiddle.net/dystroy/u6mtW/
HTML :
<tr class= "formspace">
<td class="formleft" valign="top" style="line-height:22px">Extra bed(s)?</td>
<td colspan="2"><input name="extrabed" id=checkextra type="checkbox" value="1" >some php
<div id="extrabednumber"></div>
</td>
</tr>
Javascript :
<script>
window.onload=function(){
document.getElementById('checkextra').onchange = function() {
if(this.checked) {
document.getElementById("extrabednumber").innerHTML=' Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="1">';
}else{
document.getElementById("extrabednumber").innerHTML=' Max number of extra beds <input name="extrabed" type="text" id="extrabed" size="1" maxlength="1" value="0">';
}
};
};
</script>
I made a few changes to
adapt to the fact that we don't have the whole DOM. Your problem may be there, in the parts we don't see.
ensure the function is correcly hooked on the checkbox (you may have a problem of not fully loaded DOM, depending on your page)
Problem solved!
I was using the same name for two elements: both the checkbox input and the text box input (in the innerHtml were called "extrabed". Changing one of those has fixed it.
Thanks to all of you who offered help.