I want to make a form for my office, where users can fill the form
without manually typing.
Just search from the popup browser, and find their data and automatically set in fields.
This is form display,
when we click the blue file icon to open new popup window
And this is new popup window, search display.
When we click button 'pilih' i want ('nik, nama_karyawan, departemen, jabatan')
to automatically set in form display.
What you need is to send parameters to opener window. You can do it easily by using window.opener Below is the sample code that works fine for me:
In parent window:
<script>
$(document).ready(function(){
$('.btnOpenPopup').click(function(){
window.open("popup.html", "userList", "width=200, height=100");
});
});
</script>
<form name="test">
<label>Name: </label>
<input type="text" name="firstname" id="firstname" />
Open
<br /><br />
<label>Last name:</label>
<input type="text" name="lastname" id="lastname" />
</form>
In popup window:
<script>
$(document).ready(function(){
$('table tr').click(function(){
firstName = $(this).find('td:eq(1)').text();
lastName = $(this).find('td:eq(2)').text();
window.opener.$('input[name="firstname"]').val(firstName);
window.opener.$('input[name="lastname"]').val(lastName);
window.close();
});
});
</script>
<table width="80%">
<tr>
<td>ID</td>
<td>Name</td>
<td>Last name</td>
</tr>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Something</td>
</tr>
<tr>
<td>8</td>
<td>Albert</td>
<td>Potter</td>
</tr>
<tr>
<td>9</td>
<td>Melis</td>
<td>Some Last Name</td>
</tr>
</tbody>
</table>
Related
HTML:
<table border="1">
<tr id="main_account">
<td width="50%">
<h3 style="margin-left:10px">Details</h3>
<table width="270">
<tr>
<td>First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /></td>
</tr>
<!-- other html -->
</table>
</td>
</tr>
<tr id="authorised_reporter">
<td width="100%" colspan="2">
<form method="post" action="." id="reporter-form">
<table width="100%">
<tr>
<td style="width:100px;">First name:</td>
<td><input type="text" name="first_name" id="id_first_name" /> </td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="last_name" id="id_last_name" /> </td>
</tr>
<tr>
<td>Daytime phone:</td>
<td><input id="id_phone_daytime" type="text" class="trim-space" name="phone_daytime" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
onpage load id #main_account is shown and id #authorised_reporter is hidden.If #authorised_reporter is clicked #authorised_reporter is in display block and #main_account is in display none state.In #authorised_reporter tab i am updating the user data using ajax,after sucess call i am reloading the page.Since onload i am showing the #main_acount by default after reload it takes me to #main_account but what i required is after sucess ajax call on pagereload the page should show #authorised_reporter tab and not #main_account tab.
I tried the below but not working,takes me to #main_account
//other code not shown
success: function() {
location.reload();
$('#authorised_reporter').css("display", "block");
$('#main_account').css("display", "none");
$("#sucess").show();
$("#sucess").text("Changes has been updated.");
}
Your changes may not apply since,
location.reload();
It will reload the content and later part of success function will not effect. If you can be more specific and supply more html, will be able give you an answer. You can use .done() in jQuery also.
Try with the below:
Example: 1
$("#main_account").hide();
if the answer is not related to you please disregard it.
Example:2
To have graceful degredation as well, you could stick with the hiding done via jQuery, just give the edit <tr> rows a class, e.g. <tr class="edit"> then hide all of those at once with jQuery outside the table, like this:
<script type="text/javascript">
$(function() {
$("tr #main_account").hide();
});
</script>
This approach, instead of hiding them off the bat with CSS is more friendly to those with JS disabled, if you might have an audience of users like that, go with this .hide() approach.
I need some help from the experts here on this site.
What I would like to accomplish is, at the click of a button is to copy the existing table ('data'), open a new popup window and use the document.write to write the table from the previous page onto the new one.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
</head>
<body>
<table id="data" border="1" cellspacing="1" width="100" id="table1">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Colors</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Apples</td>
<td>Carrots</td>
<td>red</td>
<td>10</td>
<td>0.99</td>
</tr>
<tr>
<td>Pears</td>
<td>Celery</td>
<td>blue</td>
<td>24</td>
<td>1.00</td>
</tr>
<tr>
<td>Mangos</td>
<td>Broccoli</td>
<td>green</td>
<td>12</td>
<td>1.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>Cauliflower</td>
<td>purple</td>
<td>48</td>
<td>1.25</td>
</tr>
</table>
<br>
<input type="button" value="test it" />
</body>
</html>
Here is a working example.
The button needs a click handler:
<input type="button" value="Open popup" onclick="openPopup();" />
The click handler function:
function openPopup() {
var popup = window.open("", "", "width=640,height=480,resizeable,scrollbars"),
table = document.getElementById("data");
popup.document.write(table.outerHTML);
popup.document.close();
if (window.focus)
popup.focus();
}
Add onclick function for your button first:
<input type="button" value="test it" onclick="openWin()" />
In script:
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write(document.getElementById('data').outerHTML);
myWindow.focus();
}
Thats it.
I am not sure outerHTML property compatibility across browsers. Please check once.
I started to build clicks manner such that there will be like a box up. it can in no way get to work at all!. so is it like when you create an account and click "opret_ok" then the close box/dialog by itself.
Oppen
<div id="dialog" style="display:none;">
<form action="#" method="post" name="opret_nyheder">
<table>
<tr>
<td>Navn</td>
<td><input type="text" name="navn" class="new"></td>
</tr>
<tr>
<td>Email - Brugernavn</td>
<td><input type="email" name="email_indhold" class="new"></td>
</tr>
<tr>
<td><input type="submit" name="opret_ok" value="Opret Bruger" class="new"></td>
<td></td>
</tr>
</table>
<?php
if(isset($_POST["opret_ok"]))
{
$opret_bruger = $mebe->opret_bruger();
}
?>
</form>
</div>
<script>
$(document).ready(function() {
$("#contactUs").click(function() {
$("#dialog").dialog();
return false;
});
});
</script>
I'll get nothing from jquery page about box or style. All I have here is what I show on the outside of the body, etc.
$(document).on('click','input[name="opret_ok"]',function(){
jQuery('#dialog').dialog('close');
});
In my html page, there exists a link to sign up and a div which holds the signup form.
<img src="images/logo2.png" alt="LOGO">
<div>
<form method="POST" action="signup.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname"></input></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname"></input></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></input></td>
</tr>
<tr>
<td>Re-enter Email</td>
<td><input type="text" name="remail"></input></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="text" name="cpwd"></input></td>
</tr>
<tr>
<td>Birthday</td>
<td><input type="text" name="bday"></input></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="text" name="sex"></input></td>
</tr>
<tr>
<td><input type="submit" value="Signup"></input></td>
<td><input type="button" value="Cancel"></input></td>
</tr>
</table>
</form>
</div>
I need to scroll down to the div when the user clicks on the signup link.
Can somebody plz explain how to do that.
Thanx in advance....
To use just HTML, you can use an anchor tag.
<div><a id='form'></a>
<form method="POST" action="signup.php">
...
</div>
Then your link will be the following: Click here to sign up
Explanation: That link goes to the a anchor tag with the id of form.
Use the following,
<img src="images/logo2.png" alt="LOGO">
Sign Up
<div id="test">
<form method="POST" action="signup.php"> ... </form>
</div>
By using simple HTML,using anchor tag you can scroll page to your SignUp div.
"#" in href is used to redirect within the page.
Hope this helps
Sign Up
<div id="mySignUpDiv">
</div>
I am using the following code to make a certain section of my form show or hide depending on the selection of the radio buttons. However, if I leave the page and come back to it (I leave the page to fill out other sections of the form that are then placed back on the main form) the state of the radio button selection isn't remembered even if the user already made a selection and filled out the fields. Have I done something wrong with my Jquery?
Code for Jquery radio button hide/show:
$(document).ready(function() {
$("[name=delvchoice]").change(function(){
$("#list").toggle($("[name=delvchoice]").index(this)===1);
});
});
HTML code of the page for the radio buttons:
<div>
<table>
<tr>
<td>Will the above items be delivered by your department to the Surplus Warehouse?</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="Yes"/>Yes</td>
<td><input type="radio" name="delvchoice" property="delvchoice" value="No"/>No</td>
</tr>
</table>
</div>
HTML code for the hide/show section:
<div id="list" style="display: none;">
<div>
<table>
<tr>
<td>Should you choose to have Physical Plant Support Services deliver the items for your department you must provide an
account number for the labor charge:</td>
</tr>
</table>
<table>
<tr>
<td>Account Number :</td>
<logic:notEmpty name="SurplusSaveForm" property="acctno1" scope="session">
<td>
<table border="0">
<tr>
<td><bean:write name="SurplusSaveForm" property="acctno1" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno2" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno3" scope="session"/>-
<bean:write name="SurplusSaveForm" property="acctno4" scope="session"/>
</td>
</tr>
</table>
</td>
</logic:notEmpty>
<logic:empty name="SurplusSaveForm" property="acctno1" scope="session">
<td><html:text size="2" property="acctno1" maxlength="2" onkeyup="nextbox(this,'acctno2');"/>-
<html:text size="2" property="acctno2" maxlength="2" onkeyup="nextbox(this,'acctno3');"/>-
<html:text size="5" property="acctno3" maxlength="5" onkeyup="nextbox(this,'acctno4');"/>-
<html:text size="3" property="acctno4" maxlength="3" onkeyup="nextbox(this,'acctno4');"/>
</td>
</logic:empty>
<td><b><html:submit property="btn_findAccount">Search for and choose</html:submit><br>your Account</b></td>
</tr>
</table>
</div>
css-tricks has a nice screencast on forms storage if you want to check it out.
http://css-tricks.com/video-screencasts/96-localstorage-for-forms/