I have a form to enter the skills of an employee and below the form there is a link to add new skill.when clicking on the link the form has to be display again.
i have written code like this
<html>
<head>
<script type="text/javascript">
function newStyle()
{
document.getElementById('add').innerHTML="<html><body><table>
<tr>
<td>Skill</td><td><select name="skill">
<option>Select</option>
</select></td>
<td>percentage of knowledge</td>
<td><input type="number" name="percentage" min="1" max="100"/></td>
<td>No of years experience</td>
<td><input type="text" name="no_years_experience"></td>
<td>Highest level </td><td><select name="highest_level">
<option>Select</option>
</select></td>
</tr>
</table>
</body></html>";
}
</script>
</head>
<body>
<table>
<tr>
<td>Skill</td><td><select name="skill">
<option>Select</option>
</select></td>
<td>percentage of knowledge</td>
<td><input type="number" name="percentage" min="1" max="100"/></td>
<td>No of years experience</td>
<td><input type="text" name="no_years_experience"></td>
<td>Highest level </td><td><select name="highest_level">
<option>Select</option>
</select></td>
</tr>
</table>
<a onclick="newStyle()" >Add New Skill</a>
<div id="add"></div>
</body>
</html>
here the form do not display when i click the Add new skill .Can anybody help me to display the form
You have the following issues
JS Strings cannot have newlines. Although it is possible to change all newlines to nothing or escape the newline with \ it is not recommended and in here not necessary as you will see
If your string contains double quotes, you need to wrap it in single quotes or escape the double quotes \" but in your case we can simply clone your table
I gave your table an ID and the anchor an href and ID too
Plain JavaScript version - expects the source table to be wrapped in a container
Live Demo
window.onload=function() {
var srcTable = document.getElementById("srcDiv").innerHTML;
document.getElementById("addBut").onclick=function() {
document.getElementById("add").innerHTML += srcTable; // note append is +=
return false; // stop the click
}
}
jQuery version:
Live Demo
$(function() {
var $skillTable = $("#skilltable").clone(); // make a copy
$("#addBut").on("click",function(e) {
e.preventDefault();
$("#add").append($skillTable.clone());
});
});
If you want defaults, set them in the default table
<input type="number" name="percentage" min="1" max="100" value="50" />
or set them in code:
$(function() {
var $skillTable = $("#skilltable").clone(); // make a copy
$("#addBut").on("click",function(e) {
e.preventDefault();
var $newTable = $skillTable.clone();
$newTable.find('[name="percentage"]').val(50);
$("#add").append($newTable);
});
});
If you use Jquery try to wrap your code into $(document).ready to make sure that your html is loaded..
Next, pay attention to your quote, I think you have to use single quote first since you use double quote in your HTML tags like this:
document.getElementById('add').innerHTML='<html><body><table> ... </table> </body></html>'
Related
I'm attempting to change an Input label in my cshtml file by using my JS script, when any drop down selection is made. I've followed the documentation - but I'm not getting the intended result. There are no compile or runtime errors - and I have cut out anything that I didn't think was necessary for you all to see. Please let me know if I've left something out.
HTML:
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
JS:
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed')
}
I've removed the many table row tags, and the data source loads correctly as well. What I expect to happen is that when the drop down (#searchByInput) is changed, the text on the label (#entryFieldInputLabel) is changed to "Changed"
Use html selector instead of text (td has no text proprety ):
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').html('Changed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right">1234</td>
</tr>
</table>
It would be better if you use span inside your table td
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange)
})
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel span').html('Changed')
}
/*
or simply
$('#searchByInput').change(function(){
$('#entryFieldInputLabel').html('Changed');
})
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr><td id="entryFieldInputLabel" class="inputLabel" align="right"><span>123</span></td>
</tr>
</table>
You just need to add <table> Markup so jQuery can select your <td> tag ID
<table>
<tr>
<td id=""></td>
</tr>
</table>
$(document).ready(function () {
$('#searchByInput').change(searchByDropDownSelectionChange);
function searchByDropDownSelectionChange() {
$('#entryFieldInputLabel').text('Changed!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
<tr>
<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
</tr>
</table>
This issue is resolved, and can be closed. The solutions offered both reaffirmed that the issue was not in the code I provided. After experimentation, the solution was found in the order in which the "change" call was made in the JS ready function.
This particular call needed to be made after the page specific HTML was loaded, but before the kendo data was bound by ID.
I'm trying to post some data when visitors click on a "td".
Here is the code:
<form method="post" name="randoms">
<tr><td value="1" name="somedata">Click me 1</td></tr>
<tr><td value="2" name="somedata">Click me 1</td></tr>
<tr><td value="3" name="somedata">Click me 1</td></tr>
<tr><td value="4" name="somedata">Click me 1</td></tr>
</form>
What I want here is that if a visitor clicks at "Click me 1" it post the form and then I'll be able to grab the somedata with PHP.
<?php
$somedata = $_POST["somedata"];
?>
I've tried to solve this, but I cannot find a way to do this, I'm pretty sure there are lots of way to do it.
I've tried this JavaScript:
<script type="text/javascript">
function submitForm(sub) {
document.forms[sub].submit();
}
</script>
and then I've tried to use:
Somedata1
as mentioned above, your table is not formatted well, add opening and closing tags
name your form withban id or class <form id="myForm"... >
use data attribute on td like
<td data-id="1" data-some-data="somename">
add 2 hidden input fieod in the form:
<input type="hidden" id="myId" >
<input type="hidden" id="somedata" >
try something like
$( "#myForm td" ).click(function() {
$('#myId").val($(this).data('id'));
$('#somedata").val($(this).data('someData'));
$( "#myForm" ).submit();
});
and of course et up a form action url.
if you really wanna be safe check if data attr. exists like
if ($(this).data().hasOwnProperty( 'someData') ) { //do stuff }
ok if u wanna click specific td add a class to them like
<td class="clickable"......
an modif
$( "#myForm td" ).click(function()
to
$( "td.clickable" ).click(function() {
You cannot put a value attribute into a td, but you can use the id attribute to do something similar. Here is a full example that might help:
<?php
if ( isset($_POST['newdata']) ){
$val = $_POST['newdata'];
echo 'Received value: ' .$val;
die();
}else{
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('td').click(function(){
alert(this.id);
var myTD = this.id.split('_')[1];
var newFrm = '<form id="myNewForm"><input name="newdata" value="' +myTD+ '" /></form>';
$('body').append(newFrm);
$('#myNewForm').submit();
});
});
</script>
<style>
td{padding:3px 7px;border:1px solid #bbb;}
</style>
<form method="post">
<table>
<tr><td id="td_1">Click me 1</td></tr>
<tr><td id="td_2">Click me 2</td></tr>
<tr><td id="td_3">Click me 3</td></tr>
<tr><td id="td_4">Click me 4</td></tr>
</table>
</form>
<?php
}
?>
If you would like to POST the data (and perhaps update a database) behind the scenes, use AJAX. See the simple examples in this post for how easy it is:
AJAX request callback using jQuery
To answer your comment question: in order to restrict which TDs are clickable, add a class to the ones you want to make "clickable" and use that class to detect the user click:
<form method="post" name="randoms">
<tr><td value="1">Cant click me 1</td></tr>
<tr><td value="2" class="clickme">Click me 2</td></tr>
<tr><td value="3" class="clickme">Click me 3</td></tr>
<tr><td value="4">Cant click me 4</td></tr>
</form>
<script>
$(function(){
$('.clickme').click(function(){
alert(this.id);
});
});
</script>
You probably already know this, but for future readers: Note the ., which means "class=". An id attribute is represented by a #. When you use a class name in the jQuery selector $('.clickme').click(), every element with that class is monitored. But IDs must be unique -- only one element per page can have that specific ID. If more than one element has the same ID, terrible things will happen: earthquakes, famine, tsunamis, unpredictable code results. Don't go there.
Table data cells are not form controls. Use form controls.
<button type="submit" value="1" name="somedata"> Click me 1 </button>
No need for JS at all.
If you have tabular data (it doesn't look like you do) then you can put the button in a call, but note that a <tr> element cannot be a child element of a <form> element.
As Quention said, table data cells are not form controls.
If you want to make use of AJAX and have the td's clickable you could do something like this.
<script type="text/javascript">
var tds = document.getElementsByTagName('td');
tds.addEventListener('click', function() {
// DO XHR Request
});
</script>
<form>
<table>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
</table>
</form>
I have a table within a form with a dynamic number of rows that are added by clicking a button to add a new "dummy" row. I put a button at the end of each row that is supposed to delete the corresponding row, but I cannot get the delete button to do anything.
This is the enitre row with the button:
<tr id="dummyRow" class="hidden-print" style="display:none">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
And this is the function as I currently have it (which does not work)
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
The function is within the $(document).ready(function(){} and the other button to add the rows is in the same function and works fine. I have researched this for an entire day and have tried several different ways to do this but none of them work when the button is within the "dummy row." When it is outside of the row, it works fine, just not within the row.
Does anyone have any idea what I am doing wrong? I dont know if I am putting the button in the wrong spot or the function in the wrong spot or none of the above
Since it is hidden, may be can you try showing it once on screen and removing it?
$(function () {
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table>
<tr id="dummyRow" class="hidden-print">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
</table>
Also please try delegating function, if you are using .clone() by using .on(). And when you give the .clone(), please pass the two parameters as true:
.clone(true, true);
This is for cloning the events as well.
If you are using this row for clone purposes, than you have to bind future events to that button, and you need to use a class instead of an ID.
To bind and event to all DOM and future ones, which you crate with JS you should use .on()
$("body").on("click",".deleteRow",callBack);
For some reason this is not working on your table code, however check this code within this JSFiddle;
$('button.btn').on('click', function () {
var a = $(this).parent().parent().remove();
totalQuote();
return false;
});
ID's should be unique to a page "It must be unique to a document". If you plan on using the dummy row multiple times, I suggest placing a class on the button instead and then using event delegation to handle .delete-row
Here is a simple example of event delegation:
(function () {
// Event delegation:
$('#unique-table-id').on('click', 'button.delete-row', function () {
$(this).closest('tr').remove();
});
$('button.add-row').on('click', function () {
$('#unique-table-id').append($('<tr><td>' + $('#unique-table-id tr').length + '</td><td><button class="delete-row">Delete</button></td></tr>'));
});
})();
table td {
border: 1px solid black;
}
table {
border: 1px solid black;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-row">Add Row</button>
<table id="unique-table-id"></table>
#Burimi had it exactly right. this function worked perfectly.
$("#quoteForm").on("click", ".deleteBtn", function(e) {
$(this).parent().parent().remove();
totalQuote();
});
It also worked with .closest instead of .parent().parent()
Try to add in row id a unique value to identify.
$('#myTableRow').remove();
This works fine, if your row has an id, such as:
<tr id="myTableRow"><td>blah</td></tr>
I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks
There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>
Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');
You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle
This is my first code with jQuery, so be indulgent please. The code below is part of a table in which each row displays: a reload button (Reload.gif), and two comboboxes (cmb1 and cmb2). Here is the edited code for just one row:
<table>
<form name="myformname" form action="Handler.php" method="post">
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" src="Reload.gif" border="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</form>
</table>
Variables MyQuestion, cmb1 and cmb2 (user-selected) are passed to Handler.php (as all are in the same form), that search data in databases and reload the page with the new data. This is working OK.
But now I want to change the logic, cause I dont want to reload the whole page, but only the row that was clicked. I tried with jQuery something like this (OnClick added to Reload.gif!):
<table>
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" onclick="recp('0')" src="Reload.gif" border="0" name="MyQuestion" value="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</table>
And in the header I added this code (I took it from here)
function recp(id) {
$('#myStyle').load('data.php?id=' + id);
}
I got some results for the id, but here is my question:
In the
load('data.php?id=' + id)
, can I send multiple variables (id, cmb1 and cmb2)?
To send multiple variables you could use for example,
load('data.php?id=' + id + '&var1=' + var1 + '&var2=' + var2)
For more examples and other ways to do it, have a look in the jQuery manual for the load() function.
Why not use .serialize()?
$("#myStyle").load('data.php?' + $("form[name=myformname]").serialize());