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>
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 have a code like this:
<tr>
<td>
<input type="checkbox" name="ordered[]" value="xxx"></input>
</td>
<td>
<input type="checkbox" name="inStock[]" value="yyy"></input>
</td>
</tr>
The code is repeated for each result in MySQL.
Also I'm using this code:
<script>
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
});
</script>
I need to select only one checkbox per row (per table tr). What should I change in javascript?
Thanks!
I think you need something like this
$( document ).ready(function() {
$('input[type="checkbox"]').on('change', function() {
var checkedValue = $(this).prop('checked');
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input[type="checkbox"]').each(function(){
$(this).prop('checked',false);
});
$(this).prop("checked",checkedValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
<td>
<input type="checkbox" name="inStock[]" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="inStock[]" value="yyy" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
</table>
I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.
Try applying selector based on element name:
$('input[name="ordered[]"]').on('change', function() {
Or you would probably want to add some other attribute to identify the specific element you wish to select.
Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:
$(this).siblings().first().prop('checked', false);
You can also do
$(this).siblings(".bar").eq(0).text()
You can use the eq method to reduce the matched set of elements to one at a specific index:
If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.
Hello all,
I need to create textbox dynamically(depending on condition), when user clicks on employee it should get added next to employee, if user clicks on another element, it should get added next to another element
I have tried following, but I am not able to get exact td and function by which i can append textbox to it.
$("#emlpyeetd").after('<s:textfield id="employeeVal" name="employeeView.policyOrQuoteNumber" maxlength="15" style="width: 200px;" class="hideForAnotherField" theme="simple"></s:textfield>');
<td width="25%">
employee
</td>
<td id="policytd" class= "anotherfield" width="25%"></td>
Try something like this, it will remove 1st textbox when you click on 2nd option.
Jquery code
<script>
$(document).ready(function(){
$(".radio_action").click(function(){
if($(this).val() == "E" ){
$("#other_text").html("");
$("#emp_text").html("<input type='text' >");
}
else if($(this).val() == "A" ) {
$("#emp_text").html("");
$("#other_text").html("<input type='text' >");
}
})
});
</script>
HTML code
<table>
<tr>
<td><input type="radio" name="radio_type" value="E" class="radio_action" /> Employee</td>
<td id="emp_text"></td>
</tr>
<tr>
<td><input type="radio" name="radio_type" value="A" class="radio_action" /> Another Element</td>
<td id="other_text"></td>
</tr>
</table>
Html
<div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val1</div>
<div class="editor-wrapper"></div>
</div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val2</div>
<div class="editor-wrapper"></div>
</div>
</div>
JS
$(document).ready(function() {
$('input[name="somename"]').click(function() {
$(this.closest('.container')).find('.editor-wrapper').html($('<input>'))
});
});
jsfiddle
I've got a table structure (see snippet below) and my goal is to hide a tr element once I click on the span that reads delete. I need the specific tr where that delete is contained.
I already got a listener for the click event on the last span, the one that says "delete" working.
I've got several tr elements, is it possible to hide the tr where the span is contained (and therefore, all the contents)?
$(".delete_pm").click(function () {
alert('hey');
$(this).closest( "tr" ).hide(); // tried this from answers below but no luck, as you can see here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
You can use .closest to search the parents. Provide it with tr as the selector, then simply hide it.
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
have you try this,
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
closest will give you the nearby parent with the matching selector.
hide will not remove the item from the DOM.If you want that also, you may chain the remove method call also.
$(".delete_pm").click(function () {
var _this=$(this);
_this.closest("tr").hide().remove();
});
Here is a working jsfiddle
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>'