I need some help in jQuery generated dynamic table rows with input fields and select option.
I want when I select option js input field id fee-2 will disable and when I select option php input field id fee-1 will disable and so on more rows inserted for
different from select option on different rows. at last need some of all rows inserted by field id fee-1
example is in image
My fiddle demo is here
http://fiddle.jshell.net/softfiddle/cSbbK/2/
Thanks
Change your HTML to:
<td><input type="text" id="fee-1" class="fee" name="js-fee"></td>
<td><input type="text" id="fee-2" class="fee" name="php-fee"></td>
Then use this Javascript:
$("#mytable").on("change", "select", function() {
var feeid = "#fee-" + $(this).val(); // Get ID of DIV related to selected item
$(".fee").prop('disabled', true); // Disable all the other DIVs
$(feeid).prop('disabled', false); // Enable the related DIV
// Now calculate the total
var total = 0;
$(".fee").each(function() {
total += parseInt($(this).text(), 10);
});
// And display it somewhere
$("#totaldiv").text(total);
});
Related
I have a form where users can create recipes. I start them off with one ingredient field (among others) and then use .append() to add as many more as they want to the div container that holds the first ingredient. The first input field has an id of IngredientName1 and dynamically added input fields are IngredientName2, IngredientName3, etc.
When they start typing in the input field, I pop a list of available ingredients filtered by the value they key into IngredientNameX. When they click on an ingredient in the list, it sets the value of the IngredientNameX field to the text from the div - like a search & click to complete thing. This all works very well; however, when you add IngredientName2 (or any beyond the one I started them with initially) clicking on an available ingredient sets the values of every single IngredientNameX field. No matter how many there are.
I hope this is enough context without being overly verbose, here's my code (I've removed a lot that is not relevant for the purpose of posting, hoping I didn't remove too much):
<div id="ingredientsContainer">
<input type="hidden" id="ingredientCounter" value="1">
<div class="ingredientsRowContainer">
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName1" placeholder="Ingredient" id="IngredientName1" data-ingID="1"><span class="focus-border"></span></div>
</div>
<input type="hidden" name="Ingredient1ID" id="Ingredient1ID">
</div>
<script>
$(document).ready(function(){
$(document).on('keyup', "[id^=IngredientName]",function () {
var value = $(this).val().toLowerCase();
var searchValue = $(this).val();
var valueLength = value.length;
if(valueLength>1){
var theIngredient = $(this).attr("data-ingID");
$("#Ingredients").removeClass("hidden")
var $results = $('#Ingredients').children().filter(function() {
return $(this).text() === searchValue;
});
//user selected an ingredient from the list
$(".ingredientsValues").click(function(){
console.log("theIngredient: "+theIngredient);//LOGS THE CORRECT NUMBER
var selectedIngredientID = $(this).attr("id");
var selectedIngredientText = $(this).text();
$("#IngredientName"+String(theIngredient)).val(selectedIngredientText);//THIS IS WHAT SETS EVERYTHING WITH AN ID OF IngredientNameX
$("#Ingredient"+String(theIngredient)+"ID").val(selectedIngredientID);
$("#Ingredients").addClass("hidden");
});
$("#Ingredients *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} else {
$("#Ingredients").addClass("hidden")
}
});
$("#AddIngredient").click(function(){
var ingredientCounter = $("#ingredientCounter").val();
ingredientCounter++;
$("#ingredientCounter").val(ingredientCounter);
$('#ingredientsContainer').append('\
<div class="ingredientsRowContainer">\
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName'+ingredientCounter+'" placeholder="Ingredient" id="IngredientName'+ingredientCounter+'" data-ingID="'+ingredientCounter+'"><span class="focus-border"></span></div>\
</div>\
<input type="hidden" name="Ingredient'+ingredientCounter+'ID" id="Ingredient'+ingredientCounter+'ID">\
');
});
});
</script>
[UPDATE] I realized the problem is happening because the function is running multiple times. I assume this happening because I'm calling a function on keyup of a field whose id starts with IngredientName so when one has a key up event, all existing fields run the function. How do i modify my:
$(document).on('keyup', "[id^=IngredientName]",function () {
to only run on the field with focus?
I have an HTML form built with PHP that basically shows a list of records, this list of records has a FORM because it has a Checkbox filed next to each record which allows me to mass do actions on a set of records.
My issue is I recently added in a comments section under each record and that comment section allows for a quick comment post, so it has it's own FORM for each records comment section, this of course broke my checkbox form as the comment forms close </form>
At the bottom of the list of records is a drop down form field which list actions I can do with the Selected checkboxes records. This is the part that no longer works as it cannot have access to the checkboxes records list anymore as that is now part of a different <FORM>
So my thought on a quick solution, using JavaScript, if I can somehow copy hte checkbox form fields array to my new form at the bottom of that page to do mass record updates.
My checkbox fields next to each record look like this now...
<input id="cb-select-1" type="checkbox" name="record_update[]" value="' . $dbresult->id . '">
So using JavaScript is it possible to copy the contents of record_update[] to another new form field in a different Form on the page?
Here is a better example in very basic form to show what I need to accomplish....
<form name="Form-A" id="form-a">
<input id="cb-select-1" type="checkbox" name="record_update[]" value="355">
<input id="cb-select-1" type="checkbox" name="record_update[]" value="455">
<input id="cb-select-1" type="checkbox" name="record_update[]" value="555">
...lots more Database records with a checkbox to select the item for a mass record change
</form>
<form name="Form-B" id="form-b">
<!-- This hidden field should have an array of all the ID's from form-a that have CHECKED checkboxes ONLY -->
<input type="hidden" name="record_update_ids">
<input type="submit" name="" id="doaction2" class="button" value="Update Records">
</form>
UPDATED code that mass selects and de-selects my checkboxes on the page now...
<script type="text/javascript">
function checkAll(bx) {
var cbs = document.getElementsByTagName("input");
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
cbs[i].checked = bx.checked;
}
}
}
</script>
when you check a check box, adds an hidden input to the second form:
$("input[name='record_update[]']").click(function(){
var chkId = $(this).attr('id');
var chkVal = $(this).val();
if ($(this).is(':checked'))
$('<input>').attr({
type: 'hidden',
id: 'input_'+chkId,
name: 'input_'+chkId,
value: chkVal
}).appendTo('#secondForm');
else
//if isn't checked removes it
$('#input_'+chkId).remove();
});
when you click in the 'Check All' button, adds all to the text area:
$("#chkAl").click(function(){
$("input[name='record_update[]']").click(function(){
//skips the already checked
if (!($(this).is(':checked')))
$(this).click();
});
});
You can use http://api.jquery.com/clone/
http://jsfiddle.net/MA3x4/1/
In document ready do the following
$('#form-a').find('input:checkbox[name="record_update[]"]').each(function () {
$(this).clone().appendTo('#form-b');
});
I have a dynamically generated tables the foot of the table contain some text fields when click on save i want to add the value of text fields to the body of that table .
here is the table
<table border="1" class="entity_table">
<tfoot>
<tr>
<td>
<div class="pane1"></div>
<div class="pane2">
<input type="text" id="name"><br>
<select id="data">
<option value="1">int</option>
<option value="2">tinyint</option>
</select>
<br><span id="save">save</span>
</div>
</td>
</tr>
</tfoot>
<tbody class="table-body" id='myid'></tbody>
</table>
i did this but this is id specific ..i want to update that specific table on which it is clicked and edited .
var myName = document.getElementById("name");
var data = document.getElementById("data");
var Mtable = document.getElementById("myid");
var rowCount = Mtable.rows.length;
var mrow = Mtable.insertRow(rowCount);
var mcell = mrow.insertCell(0);
mcell.innerHTML = myName.value;
var mcell1 = mrow.insertCell(1);
mcell1.innerHTML = size.value;
i want to update each dynamically generated table with values that is entered in its table's foot section
You can use below jQuery :
$(function(){
$('#save').click(function(){
$(this).closest('table').find('tbody').append('<tr><td>'+$('#name').val()+' and '+$('#data').val()+'</td></tr>');
});
});
Demo
EDIT - to eliminate input and select box id dependency use below code :
$(function(){
$('#save').click(function(){
var name = $(this).closest('tr').find('input[type=text]').val();
var data = $(this).closest('tr').find('select').val();
$(this).closest('table').find('tbody').append('<tr><td>'+name+' and '+data+'</td></tr>');
});
});
Demo
So if I understood this right, you dont want to use element's ID to select it.
You have some else options if you dont want to work with elements IDs:
1) You can add them some data- attribute, for example: data-id. And based on this you select your element like this:
myElement.querySelector("[data-id='X']") where myElement is some parent element of your tables and X is their ID which you generated before (lets say it will start from 0 and will increment with every next table).
2) If possible, work with objects. When you create your tables, you either create them with raw text with defining html elements or you create new elements with calling createElement("table") on document keyword. If second option is your option, you can save this elements to some array (myTables in this case) and then approach this elements in a standard way - lets say:
myTables[0].getElementsByTagName("input")
Hope it helps your issue. Hope I understood issue you were asking about.
I've read many blogs and posts on dynamically adding fieldsets, but they all give a very complicated answer. What I require is not that complicated.
My HTML Code:
<input type="text" name="member" value="">Number of members: (max. 10)<br />
Fill Details
So, a user will enter an integer value (I'm checking the validation using javascript) in the input field. And on clicking the Fill Details link, corresponding number of input fields will appear for him to enter. I want to achieve this using javascript.
I'm not a pro in javascript. I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields.
You could use an onclick event handler in order to get the input value for the text field. Make sure you give the field an unique id attribute so you can refer to it safely through document.getElementById():
If you want to dynamically add elements, you should have a container where to place them. For instance, a <div id="container">. Create new elements by means of document.createElement(), and use appendChild() to append each of them to the container. You might be interested in outputting a meaningful name attribute (e.g. name="member"+i for each of the dynamically generated <input>s if they are to be submitted in a form.
Notice you could also create <br/> elements with document.createElement('br'). If you want to just output some text, you can use document.createTextNode() instead.
Also, if you want to clear the container every time it is about to be populated, you could use hasChildNodes() and removeChild() together.
<html>
<head>
<script type='text/javascript'>
function addFields(){
// Generate a dynamic number of inputs
var number = document.getElementById("member").value;
// Get the element where the inputs will be added to
var container = document.getElementById("container");
// Remove every children it had before
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
Fill Details
<div id="container"/>
</body>
</html>
See a working sample in this JSFiddle.
Try this JQuery code to dynamically include form, field, and delete/remove behavior:
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>
I have a table with id="selector".
Each row's cell has a corresponding input to it.
<td class="cell1"><b>Cell 1</b></td>
<input type="text" name="cell1" id="cell1">
What I need to do is to capture the whole row and assign certain cells to the inputs (not all cells will be assigned to inputs). In this example it would just be cell1.
<script type="text/javascript ">
$('#selector tr').click(function() {
var values = ($(this).html()); // this is the whole row
// no idea what to do now
$("#cell1").val($(this)) // don't know how to select cell1
});
</script>
EDIT: #sub1 -> #cell1
There is no need to "capture the whole row" via html().
$('#selector tr').click(function() {
$("#sub1").val( $(this).find("td").get(0).text() );
});