I'm not familiar with Jquery in the slightest admittedly although it is in the task of things I need to learn. I currently have a project I am working on which requires an add / remove function similar to what is on an invoice.
I would like to be able to add a "Remove" function to the last item appended incase mistakes get made etc
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
$('#items').parents("br").remove();
});
//]]>
</script><div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
</body>
</html>
If anyone can show and / or explain to me how this is done it would be greatly appreciated.
Regards
I rapped the content of your form and the content you add with a <div>.
Then you can do $('#data > div').last().remove();
#data is the id of your form.
#data > div will select all the <div> that is a first child of your form.
.last() selects the last element.
Note if your would like to keep atleast 1 element in your form you can do this:
if ($('#data > div').length > 1) {
$('#data > div').last().remove();
}
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<div><br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br></div>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
if ($('#data > div').length > 1) {
$('#data > div').last().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script><div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
<div>
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>
</div>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
</body>
</html>
use some over all div like <div class="items">yourcode</div> .Then apply with $('.items').last().remove()
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br><div class="items">Product: <select class="form" name="Product' + currentItem + '" id="product' + currentItem + '" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine' + currentItem + '" id="nicotine' + currentItem + '"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty' + currentItem + '" id="qty' + currentItem + '" type="number" /><br></div>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
$('.items').last().remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
<div class="items">
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:
<input class="form3" type="number" id="qty1" name="qty1"></input>
<br>
</div>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
It would be better to wrap the added items in a div, say something like:
<div class="added-item"></div>
then when you click the remove button you will have to find all these added items
var added_items = $('.added-item');
and then remove the last element
added_items.last().remove();
Related
I want to check if a form has an option CAD (in 7th level), if it has, then get the form id.
// first level
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc">
//6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>
You can use the function querySelectorAll to get the options and the function closest to find the parent form.
Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
if (opt.textContent.trim() === 'CAD') {
console.log(opt.closest('form').getAttribute('id'));
return;
}
});
form {
display: none
}
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc"> //6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>
Select the form, then select the options inside it and iterate over them.
const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);
<form id="15" method="post" action="/open a new page" target="_blank">
<select name="docToSeize" style="width:150px" class="form1">
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</form>
How to reset the section of form after an ajax call ?
My code:
<div id="new2"> <label>Information : </label> <br>
Target: <br> <input type = "text" name="target" id="x"> <br>
Aspects: <br> <input type = "text" name="aspect" id="y" > <br>
<label>Overall Sentiment :</label>
<select name ="overall_senti" id="def" >
<option value="">None</option>
<option value="Neutral">Neutral</option>
<option value="Positive">Positive</option>
<option value="Negative">Negative</option>
</select> <br>
<input type="button" onclick="ajax('{{=URL('default','create_new')}}',['target','aspect','overall_senti'],':eval')" ; document.getElementById('x').reset() value="submit1">
</div>
I am trying to display the information below the form after you hit submit. Please help me figure this out. The submit button does not display anything. Can somebody please explain?
Here is my HTML code:
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" id="Name">
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states">
<option value="">Select a State</option>
</select>
<input type="submit" onclick="showInput();">
</form>
</div>
<label> Your input:</label>
<p><span id='display'>
</span></p>
Here is my JavaScript code:
function showInput() {
var output_info = document.getElementById("myform").value;
document.getElementById('display').innerHTML = output_info;
}
try this
<?php
if(isset($_POST["submit"]))
{
echo $_POST["Name"];
echo $_POST["countries"];
echo $_POST["states"];
}
?>
<form id="myform" role="form" action="" method="post">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name">
<label for="countries">Country:</label>
<select class="form-control" name="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" name="states">
<option value="">Select a State</option>
</select>
<input type="submit" name="submit">
</form>
Try include name attribute at input, select elements within form; use .querySelectorAll() with selector "input:not([type=submit]), select" chained to form to select form elements; for loop to iterate elements returned by .querySelectorAll()
<script>
function showInput(e) {
e.preventDefault();
var output_info = document.getElementById("myform");
var display = document.getElementById("display");
var data = output_info.querySelectorAll("input:not([type=submit]), select");
for (var i = 0; i < data.length; i++) {
display.innerHTML += "name:" + data[i].name + " value:" + data[i].value + "<br>"
}
}
</script>
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name" id="Name" />
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries" name="countries">
<option value="">Select a Country:</option>
<option value="abc" selected>abc</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states" name="states">
<option value="">Select a State</option>
<option value="123" selected>123</option>
</select>
<input type="submit" onclick="showInput(event);" />
</div>
</form>
<label>Your input:</label>
<p><span id='display'>
</span>
</p>
I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />
I am creating a table with one column consisting of select2 dropdowns. Refer fig below :
HTML code looks like this :
<table class="table table-hover table-borderless" id="tabpro">
<tbody class="list">
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>BR-2C-4567</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_1" action="/trucker/trucks/1/update_driver.1" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="c113UiPfI8Jk72/iivm9qJhIys8udhgaynEJUaMHjkTqpZIm+9R1VYbe1QN5+0jrGReMOb2E9w75fsvI37Mh/w==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option value="1">Shubham</option>
<option selected="selected" value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>sasadga</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_2" action="/trucker/trucks/2/update_driver.2" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="yy8hpB+cBT2bcyyYBn+ZmLHUT+nBVGg0QPwytmtZ8QVS18TQx5dTqnlClnn1fWzbMIsJH1KmhyBz8/AvF+1evg==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option selected="selected" value="1">Shubham</option>
<option value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
....
</table>
I'm able to search Vehicles using listjs plugin. But how to search drivers ?
I tried using this code but it doesn't work.(I'm javascript, jQuery beginner).
$('.searchDriver').keyup(function(){
var srchTerm = $(this).val(),
rows = $('tbody.list').find('tr'),
opt = $('.select2box').find('select option:selected');
if (srchTerm.length > 0) {
rows.stop().hide();
if($('.select2box').find('select option:selected').text().indexOf('x') == -1){
opt.closest('tr').stop().show();
}
}else {
rows.stop().show();
}
});
Please share a working example/ guide me to accomplish this task.