I do not know why I cannot get access to the input text when the code does not have any error.
<form action="#">
<table width="80%" align="center">
<tr>
<td>Write your name</td>
<td><input type="text" name="yourName" placeholder="Name" /></td>
<td><input type="button" value="Submit" id="sendName"/></td>
</tr>
</table>
</form>
<p />
<div id="nameResult"></div>
and the js (jQuery):
$(document).ready(function(){
$('#sendName').click(function(){
$(document).ready(function(){
var tag = $('#yourName').val();
$('<p>Name ' + tag + '</p>').appendTo('#nameResult');
});
});
})
The output is always undefined. I do not know what I am doing wrong.
You are calling nameas if it is an id using #.
Change this
<input type="text" name="yourName" placeholder="Name" />
to this, in which the input control has an id defined:
<input type="text" id="yourName" name="yourName" placeholder="Name" />
If you prefer to stick to name and do not want to define an id, then you can do this as well:
var tag = $('input[name="yourName"]').val();
Related
I have an HTML table. On the table I have an input textbox. Next to it. (appended in the HTML) I have an anchor. All I want the anchor to do (at the moment), is get and set the value in the textbox.
Here is my (abbreviated code) HTML Code:
<tr>
<td class="t-Report-cell" headers="DEPARTMENT">
<input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" />
<td class="t-Report-cell" headers="DESCRIPTION">
<input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off">
<a href="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV">
<span class="a-Icon icon-popup-lov">
<span class="visuallyhidden">List</span>
</span>
</a>
<input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off">
<input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" />
</tr>
Notice I have an input type=text name=f03 with a value of "soup" (I've also given it another attribute to try and target it. (col_name="DESCRIPTION")
Then under it, I have an anchor which calls a JavaScript function and passes in the current row.
My simple function does the following:
function get_desc(thisRow) {
console.log(thisRow);
var desc = thisRow.find("input[name='f03']");
console.log(desc);
console.log(desc.val());
console.log(desc.text());
}
So it passes in the current row, looks for the input, then tries to get the value.
I can see on console.log that the correct selector is found, but nothing I do gets the value.
As I say, I have lots of JavaScript code in my app, so I've been staring at this wondering what I'm doing wrong
Some debugging shows that this is the window object when you use <a href="javascript:get_desc(this);", :
function get_desc(link) {
console.log(link === window);
}
click me
If you must use html attributes, then you can use onclick='get_desc(this):
function get_desc(link) {
thisRow = $(link).closest('tr')
var desc = thisRow.find("input[name='f03']");
console.log(desc.val());
}
<table>
<tr>
<td>
<input type="text" name="f03" value="soup">
click me
</td>
</tr>
</table>
Alternatively, embrace jquery events (or vanilla events)
$(".link").click(function() {
thisRow = $(this).closest('tr')
var desc = thisRow.find("input[name='f03']");
console.log(desc.val());
});
<table>
<tr>
<td>
<input type="text" name="f03" value="soup">
<a href="javascript:return false;" class='link'>click me</a>
</td>
</tr>
</table>
I used querySelector instead of find and value property of input.
function get_desc(thisRow) {
console.log(thisRow);
var desc = thisRow.querySelector("input[name='f03']");
console.log(desc.value);
}
<table>
<tr onclick="get_desc(this);">
<td class="t-Report-cell" headers="DEPARTMENT">
<input type="text" name="f02" size="20" maxlength="2000" value="" col_name="DEPARTMENT" class="u-TF-item u-TF-item--text" autocomplete="off" />
<td class="t-Report-cell" headers="DESCRIPTION">
<input type="text" name="f03" size="20" maxlength="2000" value="soup" col_name="DESCRIPTION" class="u-TF-item u-TF-item--text" autocomplete="off">
<a href="#" class="a-Button a-Button--popupLOV">
<span class="a-Icon icon-popup-lov">
<span class="visuallyhidden">List</span>
</span>
</a>
<input type="hidden" id="fcs_0001" name="fcs" value="FB0D0992B787C5475D897B224F1FAE9D7547BC497FADE2E32B252FFAE2F31CE235225E0D645509C8E3576895FB814229B832CBF0BC11DA3F784FDE9BD5ADED86" autocomplete="off">
<input type="hidden" id="fcud_0001" name="fcud" value="U" autocomplete="off" />
</tr>
</table>
instead of href use onClick attribute of anchor.
Try this;
<a href="#" onClick="javascript:get_desc( $(this).closest('tr') );" class="a-Button a-Button--popupLOV">
I have a table full of rows that have <form> tag inside them and have <input> tags inside cells as shown in the below markup.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<form>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
</form>
</tr>
<tr>
<form>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
<td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
</form>
</tr>
........
</table>
Now I want to submit the each row form using pure Vanilla JavaScript Ajax function whenever anyone types in the input tags to their respective form. My Ajax function is simple that is getting the Form Object to pick all form elements value whenever wee type in any element.
function searchGet(incomingForm) {
var FD = new FormData(incomingForm);
var ajx = new XMLHttpRequest();
ajx.onreadystatechange = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
console.log(ajx.responseText);
}
};
ajx.open("POST", "submit.php", true);
ajx.send(FD);
return false;
}
Now the problem is that this.parentNode.parentNode is not picking <FORM> element but it's directly picking <TR> element. So how can I make it working perfectly?
Note: I tried many other ways but not able to make it like...
this.parentElement.parentElement
this.parentNode.parentNode
this.closest(form)
As you can see here, you can't place forms between tr elements. The solution is restyle to resemble a table. Also, use addEventListener to have a more elegant code.
document.body.addEventListener("keyup", function(ev) {
if (ev.target.tagName == "INPUT") {
console.log(ev.target.closest("form").id);
}
});
div { display: inline-block; width: 100px; }
input {width: 95px; }
<div>Firstname</div>
<div>Lastname</div>
<div>Age</div>
<form id="first">
<div><input type="text" name="Firstname" /></div>
<div><input type="text" name="Lastname" /></div>
<div><input type="number" name="Age" /></div>
</form>
<form id="second">
<div><input type="text" name="Firstname" /></div>
<div><input type="text" name="Lastname" /></div>
<div><input type="number" name="Age" /></div>
</form>
I am trying to send records of my table as form using javascript. I have tried using method below.
I know my foreach function is not capturing the tag. How do I solve it so i can send to php and receive as POST['SHOWTITLE']
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" disabled="">
</td>
</tr>
<tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tr>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
You could iterate all input tags like this:
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("tbody input[type=text]").each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
Please try this i.e. remove disabled="" to readonly. If an element is disabled, its value is not sent to the server. So, the correct code is as below:
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</td>
</tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id).children().each(function() {
$(this).children().each(function(){
$(this).clone().appendTo(form);
});
});
document.body.appendChild(form);
form.submit();
}
This html is not require any javascript to submit the form and yes you need to write CSS to make those inner DIV inline that can be easily achieve using CSS flex and please keep in mind this is only for one row, you have to iterator the whole html to create another row.
<div>
<form action="orderTicket.php" method="POST">
<div>
<input type="text" class="form-control transparent-input" name="1" value="1">
</div>
<div>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</div>
<div>
<button type="submit" class="btn btn-outline-success">Room</button>
</div>
</form>
</div>
I am try to display under my form the new value.
<form>
<h2>AES Encryption</h2>
<table>
<tr>
<td>
<label for="inputValue">Text to encrypt</label>
</td>
<td>
<input type="text" id="inputValue" size="50" name="inputValue" />
</td>
</tr>
<tr>
<td>
<label for="inputPassword">Password:</label>
</td>
<td>
<input type="text" id="inputPassword" size="50" name="inputPassword" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
</td>
</tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>
<h3>Code</h3>
Download
</div>
</form>
and my Script:
function encryptAES() {
var value = document.getElementById("inputValue").value;
var password = document.getElementById("inputPassword").value;
var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
document.getElementById("afterPressed").removeAttribute("hidden");
document.getElementById("resultTitle").innerHTML = "Result";
document.getElementById("result").innerHTML = encrypted;
}
When I click the button the code works for 1 second and then refresh the form as null
I want to show the result in the div result tag, but the page is updated and everything disappears and the code is hidden again.
Your form is submitting, so the values are displayed in the browser and then the page reloads.
You can either set the onsubmit property of the form like this:
<form onsubmit="return false;">
Or you can use an <input type="button"> or <button> instead of the <input type="submit"> that is... well, submitting the form.
Update your form tag with <form onsubmit="return false;">. This will prevent the page from getting submitted.
I have a row in a table something like this
<table>
<tr>
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="button" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
I am trying to access the value of column number 3 that is email when i click on the Save button.
My script is something like this
$(document).on('click', '#guardarBtn', function (event) {
alert('yo');
var tr = $(this).parents('tr');
tr.each('td', function () {
alert($(this).html()) ;
});
// $(".validate", this).css("border", "1px solid #ddd");
});
Js Fiddle for the question is HERE
Thanks in Advance
You can select the td by index using :eq():
$(document).on('click', '#guardarBtn', function (event) {
var $tr = $(this).closest('tr');
var email = $tr.find('td:eq(3) input').val();
alert(email);
});
Example fiddle
You can use eq() and .find() as shown below :-
$(document).on('click', '#guardarBtn', function (event) {
var tr = $(this).parents('tr:first');
alert(tr.find('td:eq(3) input:text').val());
});
You can also go directly to named inputs with jQuery via attribute searches. For instance
var email = $('input[name="email"]').val();