I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??
I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');
I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>
Related
I have an input tag on table :
example :
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
I want to get value from input using javascript.
I have try :
var x = document.getElementById("datatable").rows[1].cells;
alert(x[1].innerHTML);
but the result is :
<input type='text' value="a">
please help. thank you
This is invalid html. Each input element should have a name attribute this is how the forms data is submitted. Then you could use value=document.querySelector("input[name='fred']").value;
Edit
Since you are using brackets (and therefore sending back array value with same name) you will need to use:
// create array for values
a_s_array = [];
// get input values
a_s = document.querySelectorAll("input[name='a[]']");
// loop through elements
for( var x=0; x<a_s.length; x++ ) {
// store input value into array
a_s_array.push( a_s[x].value );
}
Try this:-
var x = document.getElementById("datatable").rows[1].cells;
alert(x[0].children[0].value);
You can try this jquery code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
<script>
$(document).ready(function(){
var td = $("#datatable").find('td');
$.each(td, function() {
alert($(this).find('input[type="text"]').val());
});
});
</script>
</body>
</html>
var data = $("#myform").serialize();
console.log(data);
<form method="post" id="myform" action="">
<table>
<tr>
<td>
<input type=text name="fname"/>
</td>
</tr>
<tr>
<td>
<input type=text name="lname"/>
</td>
</tr>
<tr>
<td>
<input type=text name="age"/>
</td>
</tr>
</table>
</form>
I was able to serialized this form using input text and using the code above my question is, Is it possible to serialize using td only if yes any idea?my form using the is like this
<form method="post" id="myform" action="">
<table>
<tr>
<td name="fname" id="fname">
</td>
</tr>
<tr>
<td name="lname" id="lname">
</td>
</tr>
<tr>
<td name="age" id="age">
</td>
</tr>
</table>
</form>
You will need to collect data yourself and then parameterize it:
var data = $.param($('td').map(function() {
return {
name: $(this).attr('name'),
value: $(this).text().trim()
};
}));
Check the demo below.
var data = $.param($('td').map(function() {
return {
name: $(this).attr('name'),
value: $(this).text().trim()
};
}));
alert(data)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td name="fname" id="fname">First Name</td>
</tr>
<tr>
<td name="lname" id="lname">Last Name</td>
</tr>
<tr>
<td name="age" id="age">23</td>
</tr>
</table>
No. You can not use serialization for table td.
It will work only for input controls. If you want to post td data then create your own java script object, collect td texts & post it to server.
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 am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.
You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}
check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;
alert(document.getElementById('txt_Password').value.length);
HTML CODE
<form id="createCFrom">
<table class="ui-widget">
<tr>
<td>Event
</td>
<td>
<input type="text" id="CreateName" name="Event" />
</td>
</tr>
<tr>
<td>Date
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
<tr>
<td>Guest
</td>
<td>
<input type="text" id="CreateGuestName" name="Guest" />
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="addCeremony();" class="right" id="saveCeremony">Save</button>
</td>
</tr>
</table>
</form>
JS Code
function addCeremony() {
alert($("#createCForm").serialize());
}
Your id is createCFrom
<form id="createCFrom">
but your script refers to createCForm
function addCeremony() {
alert($("#createCForm").serialize());
}
hi have change <button> to <input> type and it is working please try this
<input type='button' onclick="addCeremony();" class="right" id="saveCeremony" value='Save'>
fiddle
You have a typo:
alert($("#createCForm").serialize());
Should be:
alert($("#createCFrom").serialize());
(Or perhaps the id of the form is where the typo is - up to you to decide, but obviously what I'm saying is the id of the form has to match the id you use in your JS.)
Correct that problem and it works: http://jsfiddle.net/K5FVg/