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.
Related
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>
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>
<table>
<tr class="clicke">
<td colspan="2">
<img src="images/title_.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>
<tr class="clicke">
<td colspan="2">
<img src="images/informati.gif" vspace="0" hspace="0" width="690" height="65"
border="0" alt="" />
</td>
</tr>
<tr class="tbl_odd">
<td>Present Address</td>
<td>
<input type="text" name="Present Address" style="width:250px;" />
</td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td>
<input type="text" name="City" value="credit-application.php" />
</td>
</tr>
</table>
when click the clicke class tr, the following tr will hide with slow up untill the next clicke tr. when click again, the following tr content will show with slow down.
my code:
$(document).ready(function(){
$(".clicke").click(function(){
$("tr").slideToggle("slow");
}
);
});
but all the tr are effect, which are not i want, how to determine the related tr content. thank you
i am sorry maybe i didn't say the question clear.
eg:
<tr class="clicke">
</tr>
click the tr. those tr will be show/hide
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td>
<input type="text" name="realname" />
</td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td>
<input type="text" name="Birth Date" />
</td>
</tr>
EDIT: I see you've updated your question to make your intent clearer. I think the best way to achieve what you want is to group the form fields in one element, and toggle that element.
I think this is preferable to animating multiple table rows simultaneously, since I assume your goal is to animate all the associated fields at once, in a single animation.
Here's how you might do that:
<h2 class="clicke">CLICK ME #1</h2>
<table>
<tr class="tbl_even">
<td class="required">Name (First, Middle Initial, Last)</td>
<td><input type="text" name="realname" /></td>
</tr>
<tr class="tbl_odd">
<td>Birth Date</td>
<td><input type="text" name="Birth Date" /></td>
</tr>
</table>
<h2 class="clicke">CLICK ME #2</h2>
<table>
<tr class="tbl_odd">
<td>Present Address</td>
<td><input type="text" name="Present Address" /></td>
</tr>
<tr class="tbl_even">
<td class="required">City</td>
<td><input type="text" name="City" /></td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('.clicke').next('table').hide();
$('.clicke').click(function(){
$(this).next('table').slideToggle('slow');
});
});
Here is a demo: http://jsfiddle.net/ZvFQm/1/
I'm not secure to have correctly understend, but this could be a solution:
$(".clicke").toggle(
function(){
$(this).parent().find("tr").eq(1).hide();
},function(){
$(this).parent().find("tr").eq(1).show();
} );
See HERE to see the result
Please try editing the table format like in demo
Demo here
All it does is find next .slide table and perform slideToggle
$(".clicke").click(function(){
$(this).next('tr').find('.slide').slideToggle("slow");
});
Try This, It will work.
$(document).ready(function(){
$(".clicke").click(function(){
$(this).nextAll("tr:eq(0), tr:eq(1)").slideToggle("slow");
});
});
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/