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');
});
Related
I am new in JavaScript and I am wondering to get some text from two fields.
after a user click on confirm. texts print in Result section.
It does not work as I expected. After you confirm, you should refresh the page once, for second time it works!
var personalInfo = {
firsName: document.getElementById("name").value,
familyName: document.getElementById("family").value,
confirm: function confirm() {
document.getElementById("show-name").innerHTML = personalInfo.firsName;
document.getElementById("show-family").innerHTML = personalInfo.familyName;
}
}
<div> Basic Information</div>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="name"></td>
<td>Family Name</td>
<td><input type="text" id="family"></td>
</tr>
</table>
<button type="button" onclick="personalInfo.confirm()">Confirm</button>
<br><br><br><br><br><br><br><br><br>
<hr>
<div> Result!</div>
<table>
<tr>
<td>Name & Family name:</td>
<td><span id="show-name"></span> <span id="show-family"></span></td>
</tr>
</table>
In your current code, personalInfo.firstName and personalInfo.familyName are set to the values of the DOM elements when you're declaring personalInfo variable. You should replace them with functions getting the values of the DOM elements when the button is pressed (when personalInfo.confirm() runs):
var personalInfo = {
firstName: function () {return document.getElementById("name").value},
familyName: function () {return document.getElementById("family").value},
confirm: function() {
document.getElementById("show-name").innerHTML = personalInfo.firstName();
document.getElementById("show-family").innerHTML = personalInfo.familyName();
}
}
<div> Basic Information</div>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="name"></td>
<td>Family Name</td>
<td><input type="text" id="family"></td>
</tr>
</table>
<button type="button" onclick="personalInfo.confirm()">Confirm</button>
<br>
<hr>
<h3> Result:</h3>
<div>Name: <span id="show-name"></span></div>
<div>Family name: <span id="show-family"></span></div>
Please help if you are seeing this.I want to pre-populate the form-field with row data after clicking on the same row.
SIMILAR TO THIS DEMO:http://jsbin.com/qavugo/2/edit?html,js,output
Problem is faced now. fillForm() function is OK(AS SHOWN IN THE DEMO inside the scripts) in order to populate the form field with row data.HOW DO I GET ROW DATA? But as I am populating the table using jsp like this
<table class="data-table" id="test" border="1">
<tr>
<td>Student ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Year Level</td>
</tr>
<c:foreach items="${allStudents}" var="stud">
<tr>
<td>${stud.studentId}</td>
<td>${stud.firstname}</td>
<td>${stud.lastname}</td>
<td>${stud.yearLevel}</td>
</tr>
</c:foreach>
</table>
Which makes it more difficult for me for getting the rowData than what is showed in the DEMO.
MY FORM
<form name="frm" class="data-form" action="./StudentServlet" method="POST" onsubmit="return validateForm()">
<tr>
<td>
<label>Student ID --></label><input type="text" name="studentId" value="${student.studentId}" />
</td>
<td>
<label>First Name --></label><input type="text" name="firstname" value="${student.firstname}" />
</td>
<td>
<label>Last Name --></label>
<input type="text" name="lastname" value="${student.lastname}" />
</td>
<td>
<label>Year Level --></label><input type="text" name="yearLevel" value="${student.yearLevel}" />
</td>
</tr>
</form>
THE SCRIPTS
$(function() {
// I am not using dummy data here.
var rowData = [
// how and what should go here.Please help
];
row.on("click", function() {
fillForm(rowData);
});
return row;
});
$(".data-table").append(rows);
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
I am updating the records like this
<table>
<tr>
<td colspan="5">
<input type="submit" name="action" value="Add" />
<input type="submit" name="action" value="Edit" />
<input type="submit" name="action" value="Delete" />
<input type="submit" name="action" value=Refresh />
</td>
</tr>
</table>
I am getting an error after clicking the/add/edit/delete button
Warning: StandardWrapperValve[StudentServlet]: Servlet.service() for servlet StudentServlet threw exception
java.lang.NumberFormatException: For input string: " "
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:569)
at java.lang.Integer.parseInt(Integer.java:615)
at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
at com.joseph.controller.StudentServlet.doPost(StudentServlet.java:99)
That demo looks way too complicated for the task at hand. There's really no need to work with class references. You could simplify your approach by doing the following:
HTML:
<h1>Student Info:</h1>
<form class="data-form">
<label>Student ID
<input type="text" />
</label>
<label>First Name
<input type="text" />
</label>
<label>Last Name
<input type="text" />
</label>
<label>Year Level
<input type="text" />
</label>
</form>
<table class="data-table" id="test">
<thead>
<tr>
<th>Student ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Year Level</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Frank</td>
<td>Sinatra</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>Miles</td>
<td>Davis</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Waits</td>
<td>6</td>
</tr>
</table>
JS:
$(document).ready(function () {
$("td", this).on("click", function () {
var tds = $(this).parents("tr").find("td");
$.each(tds, function (i, v) {
$($(".data-form input")[i]).val($(v).text());
});
});
});
The only condition for this to work is that the input order in the form needs to match the column order in the table. Here's a working JSFiddle for reference.
YOUR Form (data-form)tag includes your edit/delete/ update inputs.Keep that out of your form tag.Then the java.lang.NumberFormatException: For input string: " will not take place.See if it works.
I tried adding the code further as mentioned above.It did not worked well.I am facing same dilemma.Anyone plz tell where is it going wrong?
<script>
$(function()
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
function fillForm(rowData) {
var form = $(".data-form");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
form.find("input.value4").val(rowData.value4);
}
}
</script>
Try adding this to the on.cick function
row.on("click", function() {
$('INPUT', this).each(function(i){
rowData['value' + (i+1)] = this.value;
});
fillForm(rowData);
});
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>
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.
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>