I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});
Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE
It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/
Related
I am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.
Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.
I am dynamically creating a table which includes some dynamically generated buttons. I have done the same thing before using POST and it worked. Now I'm using AJAX so I need to get the value of the hidden form element via the click event. But, it always gives me the first value (first row/form).
Below is example of stripped down code.
Must I have a different name for each button? If so, how would I bind all those to a click event?
<pre><code>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function(event){
console.log('sliste'+$("input[name='sliste']").val());
event.preventDefault();
});
});
</script>
</head>
<body>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<input name="vsu1" type="submit" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu2" type="submit" value="view">
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</pre></code>
You need to find the input element which is the previous sibling of the clicked button so
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function (event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
When you use $("input[name='sliste']") as the selector it will find all the input elements with the given name then when you use .val() as a getter it will return the value of the first element in the given set of elements.
$(document).ready(function() {
$(document).on("click", "input[name='vsu']", function(event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<!-- changed the button type since the code snippet does not allow submit requests-->
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
</tbody>
</table>
i am using tow pagge one is parent page and other is child window page for pass the radio button value from child window page to parent page but i have getting error undefined in parent page text fields...
parent page
<form method="post" action="" name="f1">
<table border=0 width=550>
<tr>
<td>
Your Name
<input id="OPRID" name="OPRID" type="text" value="<?php echo (isset($_POST
['OPRID']) ? $_POST['OPRID'] : ""); ?>" />
<a href="javascript:void(0);" name="My Window Name" title=" My title here "
onClick="window.open
('popwindow.php','Ratting','width=650,height=550,0,status=0,scrollbars=1');" />
Click here to open the child window
</a>
</td>
</tr>
</table>
</form>
**child window page**
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.OPRID.value = document.frm.OPRID.value;
self.close();
}
</script>
<form name="frm" method="post" action=''>
<tr>
<td><div align="center">
<input type="radio" name="OPRID" id="radio" value="<?php echo $objResult ["OPRID"];?
>" /></div></td>
<td><div align="center"><?=$objResult["OPRID"];?></td>
<td><div align="center"><?=$objResult["OPRDEFNDESC"];?></td>
</tr>
<?
}
?>
</table>
<br />
<tr>
<td><div align="center"> <input type="button" value='Submit' onclick="post_value();"> </div>
</td>
</tr>
</form>
but in text fields i have getting undefined error.
What you are trying to achieve can be done with using HTML5 sessionStorage feature.
Check this link: http://playground.html5rocks.com/#sessionstorage
use this
window.opener.document.f1.OPRID.value = document.frm.OPRID.value;
instead of this
opener.document.f1.OPRID.value = document.frm.OPRID.value;
hope this helps...
Currently I have a functioning code for dynamically adding and removing form inputs on my page. I have multiple forms that I need to include on the page, so I made an event action where they could press a button and it would hide all the forms except the relevant one. This worked fine, but it created a conflict with my jQuery/javascript code because the code uses a class name to dynamically add or remove input fields. Both forms would have to be under the same class name for me to use the jQuery function as is, but that creates conflict and the function stops working. I could just write two versions of the function (one for each class), but I'm trying to find a way to generalize this, so that I don't have to have so many functions. I was thinking about doing something like this:
$('.ccinput').addClass('dinput').removeClass('ccinput');
where I would change each form's class name accordingly, so that they would be the only ones communicating with the jQuery function. This method seems to be very error prone, especially with more than 2 forms (I plan on having 4 forms total). Do you guys know of another way that I can accomplish this? Here is my html code for reference:
EDIT: I've made significant changes to the code, so here is the new version. I removed all the ID values from the form inputs and changed the jQuery function so that it does not use ID values as selectors. This removed some conflicts. And I'm now trying to use attr('class','newclass') so that the jQuery function works for both codes. It seems to work perfectly for the first form, but it refuses to function for the second. I have no idea why.
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('#btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('#btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add CC" />
<input type="button" id="btnDel" value="Remove CC" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add DB" />
<input type="button" id="btnDel" value="Remove DB" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
Okay, I solved it. There were multiple issues with my selectors that I had to fix, but after that the following solution works perfectly:
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
This basically changes the class attribute of each table according to which button is pressed. Theoretically, this should work for 4 forms, though I have not tried it yet. This is the updated code (I've changed a lot since the first code) for those that want to see what I did:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('.btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('.btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('.btnAdd').attr('disabled','disabled');
});
$('.btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('.btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('.btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
You can use something like this.
//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
for detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/
i have one text box,if i press any alphabet it will display best match to that alphabet in div tag, problem is i have button which is exactly below to textbox when drop down comes button moves to the bottom,i dont want to move my button when list displays
can any body tell me how to achieve this
code:
<table border="0" width="300" cellspacing="0" cellpadding="0" datasrc="#Header">
<tr>
<td id="txt" >
<INPUT TYPE="text" name="text1" id="text1" size=36 maxlength=255 style="font-family: Arial; font-size: 13px; color: #808080"
value="Type your Search Here" onfocus="this.value= (this.value=='Type your Search Here') ? '' : this.value"
onKeyUp="doSuggest(this.value,event.keyCode);"/>
<div id = "theResults" style ="width:22em;border:0px black solid;padding-left:0px;padding-right:0px;visibility:hidden;"/>
</div>
<!-- inner html goes here -->
<input type="hidden" name="id1" id="id1"/>
</td>
</tr>
<!--<tr><td> <INPUT type="text" size="50" id="text1" name="text1" value="" onKeyUp="doSuggest(this.value,event.keyCode);"/></td></tr>-->
<tr>
<td>
<input type="button" name="btn" id="btn" value="show selected"
onclick='alert("selected values "+document.getElementById("text1").value+","+document.getElementById("id1").value);'/>
</td>
</tr>
</table>
Without seeing anything off your markup: try position: absolute in your CSS.