All the examples if adding a form element to an existing form all use the document.getElementById method of grabbing the element that they want to attach the form element to or they are Jquery methods which I don't use and have no need to use Jquery.
This is the form I have
<form name="formname" action="javascript:return false;" enctype="multipart/form-data" method="post" onSubmit="processCart(this);">
<table>
<tr>
<td> </td>
<td>Number </td>
<td>Price </td>
<td>Quantity </td>
<td>Remove</td>
</tr>
<tr>
<td> <input type="checkbox" name="items" value="Item 1"></td>
<td># 1 </td>
<td>$<input type="text" name="price" size="12" value="1.00" readonly /></td>
<td><input type="text" name="quantities" value=""/></td>
<td> </td>
The button that Adds an element is called "Add Item" and when clicked it is supposed to add a form element after the existing one.
Any ideas on how to achieve this in Javascript will be appreciated. Clips of code so far
function insertFormElements(){
for(i in ele){
itm = 'item_'+i;
amt = 'amount_'+i;
qty = 'quantity_'+i;
// add a new Inputs
addElement(itm,"text","");
addElement(amt,"text","");
addElement(qty,"text","");
// add values
document.formname[ itm ].value = ele[i].items;
document.formname[ amt ].value = (ele[i].amount * ele[i].quantity);
document.formname[ qty ].value = ele[i].quantity;
}
return true;
}
The function addElement
function addElement(){
try{
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("name", arguments[0]);
element.setAttribute("type", arguments[1]);
element.setAttribute("value", arguments[2]);
document.formname.appendChild(element);
}catch(e){
alert( e );
}
}
I have not has an alert and I have not seen any elements get added, so can someone assist with what might be going wrong?
Related
I have a form, I want to initially have some normal fields and some readonly fields. Then a radio button with two options, if it's the default option nothing changes, if they select the second then the readonly fields become editable.
I need to do this without jquery.
Here's the form
<form name="newstock" action="newstock-save.php" method="post">
<input type="radio" name="individual" value="1" checked> Fruit<br>
<input type="radio" name="individual" value="0"> Veges<br><br>
<table>
<tr>
<td>Item name</td>
<td><input type="text" name="item_name"></td>
</tr>
<tr>
<td>Packing</td>
<td><input type="text" name="packing_name" readonly></td>
</tr>
<tr>
<td>Unit</td>
<td><input type="text" name="packing_unit" readonly></td>
</tr>
</table>
Please assist
First, add the IDs in your HTML.
<form name="newstock" action="newstock-save.php" method="post">
<input type="radio" name="individual" value="1" id="individual1" checked> Fruit<br>
<input type="radio" name="individual" value="0" id="individual0"> Veges<br><br>
<table>
<tr>
<td>Item name</td>
<td><input type="text" name="item_name"></td>
</tr>
<tr>
<td>Packing</td>
<td><input type="text" name="packing_name" id="packing_name" readonly></td>
</tr>
<tr>
<td>Unit</td>
<td><input type="text" name="packing_unit" id="package_unit" readonly></td>
</tr>
</table>
Then, get the elements with getElementById, and add EventListeners in your JS.
const individual1 = document.getElementById("individual1"),
individual0 = document.getElementById("individual0"),
packing_name = document.getElementById("packing_name"),
package_unit = document.getElementById("package_unit");
individual1.addEventListener("change", function(){
packing_name.value = '';
package_unit.value = '';
packing_name.readOnly = true;
package_unit.readOnly = true;
});
individual0.addEventListener("change", function(){
packing_name.readOnly = false;
package_unit.readOnly = false;
});
CodePen: https://codepen.io/anon/pen/vVyVGx
You can remove readonly for an element with the following two options,
Option 1:
document.getElementById('elementId').removeAttribute('readonly');
Option 2:
document.getElementById('elementId').readOnly = false;
Use any of the above code on change of the radio button.
For triggering the click event use the attribute onclick, add the below as an attribute to the input element.
onclick="callBack()"
And inside your JS,
function callBack() {
document.querySelector('input[name="individual"]:checked').value; // get the value and check it with an if condition.
}
Use document.querySelector to get selected radio value based on the value you can disable or enable any I/p field dynamically in JavaScript
For Getting Radio value
document.getElementById(“input[id=‘eleid’]:checked”).value
for enabling / disabling
document.getElementById(elem).disabled = true/false
I am trying to use jQuery to iterate through a table of input fields, taking each value and concatenating to a string. On click of the submit button, I would like to concatenate input fields that are :input and :select. I read up that jquery input selector also selects select fields as well, but that doesnt seem to be the case here. I have tried passing multiple types into find() but that didnt work either. Any tips?
Here is the jQuery
$("#SubmitButton").click(function(){
var Teams = $(".NewTeam").length; //working
event.preventDefault();
alert("clicked lets do ajax");
for (var i=0; i < Teams; i++){
$('.NewTeam').eq(i).find('input').each(function () {
alert(this.value); // "this" is the current element in the loop
});
}
});
HTML Markup
<div class = "teams">
<fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none">
<table class = "PlayerInfoTable">
<tr class = "PlayerRow">
<td><strong style = "vertical-align:top">Player Info: </strong></td>
<td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td>
<td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td>
</tr>
</table>
</fieldset>
<fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none">
<table class = "PlayerInfoTable">
<tr class = "PlayerRow">
<td><strong style = "vertical-align:top">Player Info: </strong></td>
<td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td>
<td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td>
<td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td>
</tr>
</table>
</fieldset>
</div>
As you have used event.preventDefault(); here, you should change $("#SubmitButton").click(function(){ to $("#SubmitButton").click(function(event){
while you use eventHandler, you should add up a parameter.
In Your HTML, you should also make a change, where you have utilized select box, which requires both the tags, start and end, you haven't started and ended the tag properly, here is that line
<select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option>
change to
<select class="teamInput" name = "player[]" placeholder="Male/Female" required><option>Male</option><option>Female</option></select>
And Additionally, you can utilize your Class selector, where you have .teamInput as common in every element.
So easily you can just add up, following jQuery to see it working.
$("#SubmitButton").click(function(event){
event.preventDefault();
$(".teamInput:input:visible").each(function() {
alert($(this).val());
});
});
Working Fiddle : https://jsfiddle.net/qffL6dsp/1/
Replace
$('.NewTeam').eq(i).find('input').each(function () {
with simply
$('.NewTeam').eq(i).find(':input').each(function () {
input selects only input tags, :input selects other form-input elements as well.
First you need to pass event as parameter to your click function and then you need to modify the selector for .each to also find select element as 'input' will only find input elements and not select elements :
$("#SubmitButton").click(function(event){
var Teams = $(".NewTeam").length; //working
event.preventDefault();
alert("clicked lets do ajax");
for (var i=0; i < Teams; i++){
$('.NewTeam').eq(i).find('input, select').each(function () {
alert(this.value); // "this" is the current element in the loop
console.info($(this).text() ); this will print in console in blue color the text of <option> as you have not assigned value attribute
});
}
});
I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!
you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>
I have a dynamic form that allows fields to be added and deleted dynamically with the help of jquery. The existing fields are autopopulated from values in mysql table. The add button adds a new input field while the delete button removes an input field. The fields loaded with values from the db are tagged with data-saved attributed. Now my dilemma is focused in the delete button. How can I delete new sections that are not tagged with data-saved attribute? EXAMPLE
JQUERY
$(document).ready(function () {
$('#btnAdd').click(function () {
var $clones = $('#input_table tr'),
num = $clones.size() + 1,
next_num = parseInt($clones.last().find('input[name^="person_id"]').val()) + 1,
$template = $clones.first(),
newSection = $template.clone().attr('id', 'pq_entry_'+num),
person_id = 'person_id_'+num;
person_fname = 'person_fname_'+num;
person_status = 'person_status_'+num;
newSection.removeAttr('data-saved');
// clear out all sections of new input
newSection.find('input').val('');
newSection.find('select').val([]);
newSection.find('input[name^="person_id"]').attr({
'id': person_id,
'name': person_id
}).val();
newSection.find('input[name^="person_fname"]').attr({
'id': person_fname,
'name': person_fname,
'placeholder' : 'Person #'+num+' First Name'
}).val();
newSection.find('select').attr({
'id': person_status,
'name': person_status
}).val(next_num);
newSection.find('input[type="button"]').attr('data-ident', next_num);
$('#input_table').append(newSection);
$('#btnDel').prop('disabled', '');
if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
});
$('#btnDel').click(function () {
var num = $('.clonedSection').length; // how many duplicate input fields we currently have
$('#pq_entry_' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled', '');
// if only one element remains, disable the "remove" button
if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
});
$('#btnDel').prop('disabled', 'disabled');
});
HTML
<tbody id="input_table" >
<tr id="pq_entry_1" class="clonedSection" data-saved="1">
<td><input type="text" name="person_id" value='1' readonly /></td>
<td>
<input id="person_id_1" name="person_id_1" type="text" value='1'/>
<input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
</td>
<td>
<select id="person_status_1" name="person_status_1"></select>
</td>
</tr>
<tr id="pq_entry_2" class="clonedSection" data-saved="2">
<td><input type="text" name="person_id" value='2' readonly /></td>
<td>
<input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
</td>
<td>
<select id="person_status_2" name="person_status_2"></select>
</td>
</tr>
</tbody>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>
From
$('#pq_entry_' + num).remove(); // remove the last element
Change into
var toDelete = $('#pq_entry_' + num).not('[data-saved]');
if (toDelete.length) {
// Last one wasn't a db-entry
toDelete.remove();
// enable the "add" button
$('#btnAdd').prop('disabled', '');
// if only one element remains, disable the "remove" button
if ($('.clonedSection:not([data-saved])').length == 0)
$('#btnDel').prop('disabled', 'disabled');
}
Working example: http://jsfiddle.net/az9LQ/
You can simplify it a lot:
Add a <script type="text/template"> element which can hold the HTML to be appended each time (it won't be visible on the page). I've substituted $1 for the row number which you are dynamically updating and all occurrences of $1 can be replaced in a single shot (and if you want to replace other values then you can extend this and use $2, $3, ... $n for multiple substitutions).
Set up various static variables outside the 'click' handlers including an addedRows array to store the rows as they are added.
In the 'add' handler:
Create the row from the template, replacing $1 with the row number;
Store the row in an addedRows array for later use in the 'delete' handler;
Dynamically update elements as needed; and
Update the buttons.
In the 'delete' handler:
The addedRows array stores all references to the dynamically added rows so just pop() the last row from the array and remove() it;
Update the buttons.
JSFIDDLE
HTML:
<table>
<tbody id="input_table" >
<tr id="pq_entry_1" class="clonedSection" data-saved="1">
<td><input type="text" name="person_id" value='1' readonly /></td>
<td>
<input id="person_id_1" name="person_id_1" type="text" value='1'/>
<input id="person_fname_1" name="person_fname" placeholder=" First Name" type="text" value='James'/>
</td>
<td>
<select id="person_status_1" name="person_status_1"></select>
</td>
</tr>
<tr id="pq_entry_2" class="clonedSection" data-saved="2">
<td><input type="text" name="person_id" value='2' readonly /></td>
<td>
<input id="person_id_2" name="person_id_2" type="text" value='2'/><input id="person_fname_2" name="person_fname" placeholder=" First Name" type="text" value='Cynthia'/>
</td>
<td>
<select id="person_status_2" name="person_status_2"></select>
</td>
</tr>
</tbody>
</table>
<input type='button' id='btnAdd' value='add another Person' />
<input type='button' id='btnDel' value='Delete New Field' /></br>
<script type="text/template" id="template">
<tr id="pq_entry_$1" class="clonedSection">
<td><input type="text" name="person_id" value="$1" readonly /></td>
<td>
<input id="person_id_$1" name="person_id_$1" type="text"/>
<input id="person_fname_$1" name="person_fname" placeholder="Person #$1 First Name" type="text" />
</td>
<td>
<select id="person_status_$1" name="person_status_$1"></select>
</td>
</tr>
</script>
JavaScript:
$(document).ready(function () {
var template = $('#template' ).html(),
$input_table = $( '#input_table' ),
addedRows = [],
num_saved_rows = $('#input_table tr').length;
$('#btnAdd').click(function () {
var row = $( template.replace( /\$1/g, num_saved_rows + addedRows.length + 1 ) )
.appendTo( $input_table );
addedRows.push( row );
$('#btnDel').prop('disabled', num_saved_rows + addedRows.length == 100 );
// Not sure what you are doing with the 'select' element but you can
// dynamically update the attributes of any element like this:
$( 'select', row ).val( '' );
});
$('#btnDel').click(function () {
if ( addedRows.length )
{
addedRows.pop().remove();
$('#btnAdd').prop('disabled', false);
$('#btnDel').prop('disabled', !addedRows.length);
}
});
$('#btnDel').prop('disabled', 'disabled');
});
Not sure what you are trying to do with the select element as it has no OPTION children.
Let me explain:
I have a table form and some fields are required and I am trying to create custom validation.
example:
<table>
<tr>
<td class="required">Description</td>
<td>
<input id="input1" />
</td>
<td>Phone</td>
<td>
<input id="input2" />
</td>
</tr>
<tr>
<td class="required">Location</td>
<td>
<select id="select1"/>
</td>
<td>Email</td>
<td>
<input id="input3"/>
</td>
</tr>
</table>
What I wanna do is find all elements with class required
which is pretty easy using:
var requiredElements = document.querySelectorAll(".required");
And then I want to find their closest control element and check if it's value is empty. The problem is I don't know if it's gonna be input or select. I was thinking of using the .closest() function but it could lead to unwanted results if two different inputs are equally close to a required (like in the example above).
Any help would be much appreciated.
You can select a control regardless of type with jQuery by using any one of a number of selectors and combining it with one or more additional selectors.
In the code snippet you provide, the controls you want to select (input1 and select1) are child elements of a table cell element that is a sibling of the cell with the class "required", so we can build a selection thus:
$(".required + td").child
which breaks down as:
Find the elements with the "required" class applied to them.
This will give us the 2 table cells:
<td class="required">Description</td>
and
<td class="required">Location</td>
For each element returned by 1. use the "next adjacent" selector + with td to get the next table cell:
<td><input id="input1" /></td>
and
<td><select id="select1" /></td>
For each element returned by 2. get the child element:
<input id="input1" />
and
<select id="select1" />
There is also a jsFiddle to illustrate actions on the targets (change border to dark red).
Edit
This works because the layout in your snippet consistently places the elements you want to target in the same position relative to the element with your selection criteria. You must have some consistent way of finding elements that are not marked with a class/id otherwise you can't achieve your objective.
Although I like Raad's answer I'd like to post this answer to say what I did to solve my problem.
First of all I added a custom attribute labelFor to every label td with value equal to the id of it's corresponding input as follows:
<table>
<tr>
<td class="required" labelFor="input1">Description</td>
<td>
<input id="input1" />
</td>
<td labelFor="input2">Phone</td>
<td>
<input id="input2" />
</td>
</tr>
<tr>
<td class="required" labelFor="select1">Location</td>
<td>
<select id="select1"/>
</td>
<td labelFor="input3">Email</td>
<td>
<input id="input3"/>
</td>
</tr>
</table>
Then I used the following Validation function:
function validateForm () {
var self = this;
var validationPassed = true;
//First I will gather every .required element in an Array
var requiredTags = document.querySelectorAll(".required");
//Then I will loop through the array
for (var i = 0; i < requiredTags.length; i++) {
//Get value of attribute "labelFor" which would be the controlId that this label refers to
var controlId = $(requiredTags[i]).attr("labelFor");
//Then I use this to check if that control's value is empty.
if ($("#" + controlId).val() == ('' || null)) {
validationPassed = false;
}
}
if (!validationPassed) {
alert("Please fill all the required fields");
}
return validationPassed;
}
This way I check if all required fields are not empty and return true, or return false and an alert to warn user.
I find that the problem Raad described in his Edit is the main reason why this approach could be more useful. You don't have to worry if your input element is always in the same position relatively to your label td element.