I'm trying to copy value from an input field and send it to another onkeyup but it only extracts the value and does not send.
function populateSecondTextBox() {
document.getElementById('cepAddressRouteTransporter').value = document.getElementById('postal_code').value;
}
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code" onkeyup="populateSecondTextBox();">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
Replace function in head or in body worked for me.
function populateSecondTextBox() {
document.getElementById('cepAddressRouteTransporter').value =
document.getElementById('postal_code').value;
}
JSFiddle
Do the simplest thing
onkeyup="document.getElementById('cepAddressRouteTransporter').value = this.value;"
Change you onkeyup function call as above.
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">
the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.
look:
It only works with the first check, but the rest is not possible, any solution?
the script
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
the view
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
#foreach($ingredientes as $ingrediente)
<tr>
<td>{{$ingrediente->id}}</td>
<td>{{$ingrediente->nombre}}</td>
<td>{{$ingrediente->proveedor}}</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.
function showContent(el) {
var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
if (el.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>mnl</td>
<td>Test.....</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>222</td>
<td>xyz</td>
<td>Test..</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.
You are binding the event to the first box and then subsequently, the content to first instance of the id content and check, subsequent bindings are not taken into account.
To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
with
<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />
and again for the line <div class="dv" id="content" style="display:none;">
you can change this to
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
and then changing your showContent method to accept a parameter.
<script type="text/javascript">
function showContent(id) {
element = document.getElementById('content-' + id);
check = document.getElementById('check-' + id);
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Good luck :)
You are using duplicate id for checkbox and div content for all row.
You should add more specific info for div's id and pass argument for showConent() function
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
<script type="text/javascript">
function showContent(id) {
element = document.getElementById(id);
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
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.
My tr is defined inside the table tag like this:
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Now, I am using the following snippet to create the cloned above code, all work but the placement is not right, I want it to be creating underneath the tr tag before this <div class="nextitem"> tag, not sure what I am doing wrong here
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
console.log(obj);
obj.parents('table').append(clonedObj);
initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
If I understand your question, you want new cloned <tr> elements to be added BEFORE the element with the "new item" tag.
What we are going to do is utilize jQuery's built in .clone() method instead of doing it ourself. Once we have the cloned object we use your existing code to remove the New Item button and add the Remove button.
After we do that we'll utilize jQuery's .before() method to insert the new, cloned element before the original object. (You could use .after() if you wanted this to be inserted after the original object)
$('.createNewItemTag').click(function(){
var obj = $(this).parents('tr').first();
var clonedObj = obj.clone();
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function(){
$(this).parents('tr').first().remove();
});
obj.before(clonedObj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</div>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
You may also want to clear the inputs of the original object so that it is empty after the clone is created. (or clear the inputs of the cloned object, up to you).
References:
https://api.jquery.com/clone/
https://api.jquery.com/after/
Try below code
Use obj.parents('table').find("tr:eq(0)").after(clonedObj); instead of obj.parents('table').append(clonedObj);
$('.createNewItemTag').click(function() {
var obj = $(this).parents('tr').first(),
clonedObj = $(obj[0].outerHTML);
clonedObj.find(".select2-container").remove();
clonedObj.find('.createNewItemTag').remove();
clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0)';>Remove</a>");
clonedObj.find(".removeItem").click(function() {
$(this).parents('tr').first().remove();
});
//console.log(obj);
obj.parents('table').find("tr:eq(0)").after(clonedObj);
//initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="customerid">
</td>
</tr>
<tr>
<td>
<div id="stlineitems">
<label for="stlineitems">Item(s)</label>
</td>
<td>
<div class="onlyleft">
<select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
<option></option>
</select>
</div>
<div class="moveboxleft">
<input type="text" class="inputwidth form-control rates_input" name="rate_items" data-rule-required="true" data-msg-required="Provide Rate or if not, provide 0 value" />
</div>
<br/>
<div class="nextitem">New Item</div>
</td>
</tr>
</table>
Js Fiddle Demo : JSFiddle
Something like this?
$(document).on('click', '.createNewItemTag', function() {
var rw = $(this).parents('tr');
var ix = rw.index() +1; //remove +1 to insert above curr row
var obj= rw.clone();
obj.addClass('newcol').find('td:first-child').text('New Item');
$('table tr:nth-child('+ix+')').after(obj);
});
table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}
.newcol td{background-color:palegreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2"><input type="text" value="customerid"></td>
</tr>
<tr>
<td>
<div id="stlineitems"><label for="stlineitems">Item(s)</label></div>
</td>
<td>
<div class="onlyleft">
<select>
<option>Options go here</option>
</select>
</div>
<div class="moveboxleft">
<input type="text" value="Provide Rate" />
</div>
<br/>
<div class="nextitem">New Item
</div>
</td>
</tr>
</table>
Notes:
(1) Switched to using .on() to allow newly added rows to be cloned