I want that in newly created all options of select box to be present and I want to do it javascript. But I cant figure out how to do when there are too many options
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>
var itemCount = 0;
$(document).ready(function() {
var objs = [];
var temp_objs = [];
$("#add_button").click(function() {
var html = "";
var obj = {
"name" : $("#name").val(),
"gender" : $("#gender").val(),
}
$("#name").val('');
$("#gender").val(''),
objs.push(obj);
itemCount++;
html = "<tr>" +
"<td><INPUT type='text' name='txt1[]' value='" + obj['name'] + "'/></td>" +
"<td><select><option>" + obj['gender'] + "</select></option></td></tr>";
$("#newtable").append(html);
});
});
Just make it as simple. Use below Code. It will solve your issue.
<script type="text/javascript">
$(document).ready(function(){
$( "#add_button" ).click(function() {
var newVal=$("#name").val();
var s= document.getElementById('gender');
s.options[s.options.length]= new Option(newVal);
});
});
</script>
And your html will be as below:
<table id="newtable">
<tr>
<td>
<input name="name" type="text" id="name"/>
</td>
<td>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" id="add_button" value="Add"/>
</td>
<tr>
</table>
I believe clone() will be the best option for your example. You can copy the behavior of the button as well by using clone(true, true) (sets the options withDataAndEvents and deepWithDataAndEvents). Run the code below to check:
$(document).ready(function() {
$(".add_button").click(function() {
var currentRow = $(this).parents("tr");
var nr = currentRow.clone(true, true);
nr.find(".name").val('');
currentRow.after(nr); //instead of `$("#newtable").append(nr);`: it places the new row after the clicked row
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="newtable">
<tr>
<td>
<input name="name" type="text" class="name" />
</td>
<td>
<select name="gender" class="gender">
<option>Male</option>
<option>Female</option>
</select>
</td>
<td>
<input name="add_button" type="button" class="add_button" value="Add" />
</td>
</tr>
</table>
From your code, I needed to add a slash in the last <tr> to close it and also change the ids to classes (since there are going to be a lot of them).
Hope it helps!
Related
I have table with a button as following; I'm trying to get the values of td's using jQuery.
My table:
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
#Html.DisplayNameFor(model => model.Id)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="#item.Key" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="#item.Id" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
}
</table>
<button id="btnSave">Save</button>
then I'm trying to get the value using jquery:
$('#btnSave').click(function () {
$('#Tablesample tr').each(function () {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".keyvalue").text(); // Find the text
var keval = text.find("input").text();
alert(keval);
});
});
but I'm not getting any values.
I also tried something like this but it doesn't work either:
$("#Tablesample tr:gt(0)").each(function () {
var this_row = $(this);
var key = $.trim(this_row.find('td:eq(0)').html());
alert(key);
});
The issue is due to your DOM traversal logic. Firstly this is the tr element, so closest('tr') won't find anything. Secondly, you're getting the string value from the text() of .keyvalue, then attempting to find an input element in the text instead of traversing the DOM. Finally, you need to use val() to get the value of an input.
I'd strongly suggest you familiarise yourself with the methods jQuery exposes and how they work: http://api.jquery.com
With all that said, this should work for you:
$('#btnSave').click(function() {
$('#Tablesample tr').each(function() {
var keval = $(this).find(".keyvalue input").val();
console.log(keval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
Model
</th>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
</table>
<button id="btnSave">Save</button>
Note that the first value is undefined as your th element in the first row contains no input element. I'd suggest separating the table using thead/tbody if you want to exclude that row.
My function is
If I choose the first (second or last) option, the rest option will be disabled and reset as null and all values in the selected option will be enabled as my Javascript below.
Moreover, I would like to disable textboxs as the left-hand side below whenever the taxi option has been selected.
Demo
HTML:
<table>
<tr>
<td>
<input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="abc" value="car" />Car</td>
<td>
<input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
<input type="checkbox" />Taxi</td>
</tr>
</table>
Javascript:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});
do like this:
$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
$('.textbox').prop('disabled',true);
}
else
{
$('.textbox').prop('disabled',false);
}
});
Fiddle DEMO
Using your current function, you can actually remove a lot of the current code and just do the following:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
// your other code here ...
$('input[type="text"]').prop('disabled', valueSelected === 'taxi');
});
DEMO
Ive posted a few times but I'm still not coming right with this problem so below is the all the code, the problem is that the dynamically created elements are not appearing in _POST after submission. but I do see them in the modified source in firefox.
The Javascript inserts elements in between the following div,
<div id="p_scents">
</div>
but as mentioned do not show in in _POST
Below is the full source code so the problem can be replicated.
<html >
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').on('click', function() {
$('<p><label for="p_scnts"><input type="text" size="20" name="url' + i +'" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').on('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
},function(){
jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
});
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords()
{
$('#coords input').val('');
};
</script>
</head>
<body>
<table border=1 cellpadding="1" cellspacing="0" width=80%>
<form action="/index.php/create" method="post" accept-charset="utf-8"> <tr>
<td>
Select image
</td>
<td>
<input type="file" name="image"/>
</td>
</tr>
<tr><td colspan=2 align=center>
Add Another Input Box
</td>
</tr>
<tr><td>
Give your banner a unique name</td>
<td>
<input type="text" name="name" value="" id="name" autofocus /> </td></tr>
<tr><td>Specify email address or domain to brand</td>
<td>
<input type="text" name="domainName" value="" id="domain" /> </td></tr>
<tr><td>Status</td>
<td>
<select name="status">
<option value="enabled">Enabled</option>
<option value="disabled">Disabled</option>
</select> </td></tr>
<tr><td>Give you banner a default URL</td>
<td>
<input type="text" name="url" value="" id="url" /> </td></tr>
<tr><td valign=top>Alternate Urls
</td>
<td>
<div id="p_scents">
</div>
<input type=submit>
</form> </td>
</tr>
</table>
</body>
</html>
You have multiple nesting errors in your HTML. Your <form> tag is put immediately inside the <table> - that is incorrect! Also the enclosing tag of the form is put inside the last <td>. Your markup should look like this:
<form ...>
<table ...>
<tr ...>
<td ...>
...
</td>
...
</tr>
...
</table>
</form>
I am creating the below table dynamically using jQuery... After executing my code I get the table as below:
<table id="TableView" width="800" style="margin-left: 60px">
<tbody>
<tr>
<th>Module</th>
<th>Message</th>
</tr>
<tr class="item">
<td> car</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="5">
</td>
</tr>
<tr class="item">
<td> bus</td>
<td>
<input class="name" type="text">
</td>
<td>
<input class="id" type="hidden" value="9">
</td>
</tr>
I used to iterate the table like this:
$("tr.item").each(function() {
var quantity1 = $this.find("input.name").val();
var quantity2 = $this.find("input.id").val();
});
By using the above query I am getting values of first row cells only... help me with jQuery that will iterate through the whole rows of the table and get the row cell values in quantity1 and quantity2.
$(this) instead of $this
$("tr.item").each(function() {
var quantity1 = $(this).find("input.name").val(),
quantity2 = $(this).find("input.id").val();
});
Proof_1
Proof_2
Looping through a table for each row and reading the 1st column value works by using JQuery and DOM logic.
var i = 0;
var t = document.getElementById('flex1');
$("#flex1 tr").each(function() {
var val1 = $(t.rows[i].cells[0]).text();
alert(val1) ;
i++;
});
Hello every one thanks for the help below is the working code for my question
$("#TableView tr.item").each(function() {
var quantity1=$(this).find("input.name").val();
var quantity2=$(this).find("input.id").val();
});
You got your answer, but why iterate over the tr when you can go straight for the inputs? That way you can store them easier into an array and it reduce the number of CSS queries. Depends what you want to do of course, but for collecting data it is a more flexible approach.
http://jsfiddle.net/zqpgq/
var array = [];
$("tr.item input").each(function() {
array.push({
name: $(this).attr('class'),
value: $(this).val()
});
});
console.log(array);
I got it and explained in below:
//This table with two rows containing each row, one select in first td, and one input tags in second td and second input in third td;
<table id="tableID" class="table table-condensed">
<thead>
<tr>
<th><label>From Group</lable></th>
<th><label>To Group</lable></th>
<th><label>Level</lable></th>
</tr>
</thead>
<tbody>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
<tr id="rowCount">
<td>
<select >
<option value="">select</option>
<option value="G1">G1</option>
<option value="G2">G2</option>
<option value="G3">G3</option>
<option value="G4">G4</option>
</select>
</td>
<td>
<input type="text" id="" value="" readonly="readonly" />
</td>
<td>
<input type="text" value="" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-default generate-btn search-btn white-font border-6 no-border" id="saveDtls">Save</button>
//call on click of Save button;
$('#saveDtls').click(function(event) {
var TableData = []; //initialize array;
var data=""; //empty var;
//Here traverse and read input/select values present in each td of each tr, ;
$("table#tableID > tbody > tr").each(function(row, tr) {
TableData[row]={
"fromGroup": $('td:eq(0) select',this).val(),
"toGroup": $('td:eq(1) input',this).val(),
"level": $('td:eq(2) input',this).val()
};
//Convert tableData array to JsonData
data=JSON.stringify(TableData)
//alert('data'+data);
});
});
I have a bunch on elements with the same name that i am trying to remove at the same time with an onchange function.
Here is the javascript:
<script type="text/javascript">
function removeoldAccounts() {
var e = document.getElementById("account_table")
var accounts = document.getElementsByName("extraaccounts");
e.removeChildren(accounts);
}
</script>
(Not even sure if removeChildren is a real command) And my element that im giving the onchange action to:
<select id="piname" name="pi_name" onChange="removeoldAccounts" />
And the elements im trying to have removed:
<tbody id="account_table">
<tr>
<td>Account Number<span>*</span>:</td>
<td id="accounts">
<select id="accountnum" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="hidden" id="theValue3" value="81">
<input type="button" value="Add More" onclick="addaccount()">
</td>
</tr>
<tr id="80" name="extraaccount">
<td>
<select id="80" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="text" size="20" name="account_comment80">
</td>
<td>
<input type="button" onclick="removeaccount(80)" value="remove">
</td>
</tr>
<tr id="81" name="extraaccount">
<td>
<select id="81" name="account_number">
<option value="5636745946254">5636745946254</option>
<option value="23164847322">23164847322</option>
</select>
</td>
<td>
<input type="text" size="20" name="account_comment81">
</td>
<td>
<input type="button" onclick="removeaccount(81)" value="remove">
</td>
</tr>
</tbody>
Sorry if the html is a bit sloppy but basically, a tbody with a bunch of tds that have the same name ( extraaccount)
<script type="text/javascript">
function removeoldAccounts() {
var accounts = document.getElementsByName("extraaccounts");
var account;
var parent;
for (account in accounts) {
parent = account.parentNode;
parent.removeChild(account);
}
}
</script>
and...
<select id="piname" name="pi_name" onChange="removeoldAccounts();" />
Something like this:
if ( e.hasChildNodes() )
{
for(var i=0; i < e.childNodes.length; i++)
{
if(e.childNodes[i].nodeName == "extraaccounts") {
e.removeChild(e.childNodes[i]);
}
}
}
$('[name="extraaccounts"]').remove();
or if you want to change smthing before deleting then
$('[name="extraaccounts"]').each(function(index,value){
//do smthing
$(value).remove
});