Need text in input to not display user input once sent - javascript

Here is my jQuery, I have it working properly but once my row is added the user input in the inputs are still there and not cleared. How do I fix this?
// Removing menu rows
$('.menu-items').on('click', '.delete', function(){
$(this).closest('.menu-row').remove();
});
// HTML
var MENU_ROW_TEMPLATE = '<div class="menu-row"><span class="item-description">$description</span><div class="control-items"><span class="item-price">$price</span><span class="delete">X</span></div></div>'
// Adding menu rows
$('.menu-category').on('click', 'button', function(){
var $row = $(this).closest('.add-item');
var name = $row.find('input').first().val();
var price = $row.find('input').last().val();
var newRowHtml = MENU_ROW_TEMPLATE.replace('$description', name).replace('$price', price);
var $newRow = $(newRowHtml);
var $lastMenuRow = $row.closest('.menu-category').find('.menu-row').last();
$newRow.insertAfter($lastMenuRow);
});
Sorry for my poor explaining skills.

Clear the name and price after you get the values...
...
var name = $row.find('input').first().val();
var price = $row.find('input').last().val();
$row.find('input').first().val('');
$row.find('input').last().val('');
...

Related

I want to catch the argument whose checkbox is checked

I want to catch the argument whose checkbox is checked but if my tr is under form then he is giving me the whole tr. Please help me.
Here is my jQuery code:
$('#form').on('submit',function(e){
e.preventDefault();
if($('.checkbox').is(':checked')){
var selector = $(this).closest("tr")//get closest tr
console.log(selector)
//get select valus
var id = selector.attr('data-id');
alert(id);
var package_name = selector.find('.visa_type').val();
var prcs_type_price = selector.find("select[name=processing_type]").val();
var processing_type = selector.find("select[name=processing_type] option:selected").text();
var total = selector.find(".package_price").text(prcs_type_price).val()
var date = selector.find('.travel_date').val();
}
)};
Just run .each over the checked ones
$('#form').on('submit', function(e) {
e.preventDefault();
$('.checkbox:checked',this).each(function() {
const $row = $(this).closest("tr");
const id = $row.id;
const package_name = $row.find('.visa_type').val();
})
You CAN do this .on("input" and have the fields update on any change

Firebase Javascript: How to create list of value

This is the list of data in my firebase:
This is my source code:
var keys = firebase.database().ref().child('seller').once('child_added').then(function(datakey){
var makeList = firebase.database().ref('seller/' + datakey.getKey() +'/sellerName').once('value').then(function(snapshot){
var nama = snapshot.val();
var button = $(''+ nama + '');
button.appendTo('#sellerList');
});
});
My problem is, when I execute it, it only create a button element for Seller Name 'Miraak' only but not 'Khajiit'. Like this:
I want it to create a list of buttons based on the number of seller in my firebase. Like currently I have two seller, Miraak and Khajiit, I want both of them to appear as button list.
var keys = firebase.database().ref().child('seller/').once('value').then(function(datakey){
datakey.forEach(function(data){
var nama = data.val();
var button = $(''+ nama.sellerName + '');
button.appendTo('#sellerList');
});
});
Nevermind, I found the solution to my problem. Thank you.

How to get all selected child rows in DataTable

I currently quiet new in DataTable jquery .So I faced a big issue right now .I have a table that using a DataTable jquery to create a child rows.That data are get from database.
Every rows in table have a checkbox and will be submit all the selected child rows. My problem is when I want to submit the data ,it seems my code not working as I want if I changing the paginator.Thats meant ,when I select all rows in page 1 and page 2 ,there are only rows in page 2 are submitted .Please anybody help me .Below is my code for your reference. Any help will be appreciate.
All rows that are checked will be submited by click on button
$('#OthersSubmit2').on('click', function(e){
var type_of_invoice = $('#TypeInvoiceId2').val();
var program_id = $('#ProgramId2').val();
var sponsorship_id = $('#SponsorshipId2').val();
var result = [];
var data_filter = [];
data_filter = {'type_of_invoice': type_of_invoice,
'program_id':program_id,
'sponsorship_id':sponsorship_id};
var rowcollection = table.$("input:checked", {"page": "all"});
$.each($(rowcollection), function(index,rows) {
var data = $(this).parents('tr:eq(0)');
var transaction = [];
var data2 = [];
var stu_master_id = $(data).find('td:eq(0)').attr('id');
var a = $(data).parent().find('table[id='+stu_master_id+']');
console.log(a);
var sub_tbl = $(a).DataTable().$("input:checked", {"page": "all"});
$.each($(sub_tbl), function(index2,rows2) {
data2 = $(this).parents('tr:eq(0)');
var d = $(data2).find('td:eq(0)').attr('id');
transaction.push(d);
});
result.push({'stu_master_id':stu_master_id,
'transaction_id':transaction});
});
data_filter['data'] = result;
});

Using javascript Not able to disable textbox.It Immediatly enable after disabled. Can anyone give me solution?

I have One simple registration Form which is developed in C#.Net. This form also contain one Grid view which display data from database.In this,I want to disable Insert button when i select particular raw data. and i had develop this code in jquery. I used below code.
function DoStuff(lnk) {
debugger;
var grid = document.getElementById('GridView1');
var cell, row, rowIndex, cellIndex;
cell = lnk.parentNode;
row = cell.parentNode;
rowIndex = row.rowIndex;
cellIndex = cell.cellIndex;
var rowId = grid.rows[rowIndex].cells[0].textContent;
var rowname = grid.rows[rowIndex].cells[1].textContent;
var rowcontact = grid.rows[rowIndex].cells[2].innerHTML;
var rowaddress = grid.rows[rowIndex].cells[3].innerHTML;
var rowemail = grid.rows[rowIndex].cells[4].innerHTML;
var Id = document.getElementById('txt_Id');
var name = document.getElementById('txt_Name');
var contact = document.getElementById('txt_PhoneNumber');
var address = document.getElementById('txt_Address');
var email = document.getElementById('txt_EmailId');
Id.value = rowId;
name.value = rowname;
contact.value = rowcontact;
address.value = rowaddress;
email.value = rowemail;
document.getElementById('Button1').disabled = true;
};
But when i run that page it becomes disable and immediately enable automatically.....:(
Can anyone give me solution ???
You have to call this function after form is completely loaded.
Use below code to make it that happen if you are using jQuery.
$( document ).ready(function() {
DoStuff(lnk);
});

Jquery doesnt update in forms

I made the following code to replace form fields in a page that I can't edit but only manipulate. However, the code does nothing. In chrome console when I print a variable it works fine. The code is below:
//GET val from drop DROP DOWN
var office_id = FieldIDs["OfficeName"];//Gets the input id
var offices;//gets the value from the drop down
$("#FIELD_"+office_id).change(function(){
offices = $(this).val();
}).change();
//The below gets the id's of all the input fields
var address_id = FieldIDs["Address"];
var address2_id = FieldIDs["Address2"];
var city_id = FieldIDs["City"];
var state_id = FieldIDs["State"];
var zip_id = FieldIDs["Zip"];
var phone_4id = FieldIDs["Number4"];//phone
var phone_id = FieldIDs["Number1"];//fax
var pdfm4 = FieldIDs["pdfm4"];
var pdfm = FieldIDs["pdfm"];
if(offices == "SoCal Accounting"){
$('#FIELD_'+address_id).val("7421 Orangewood Avenue");
$('#FIELD_'+address2_id).val("");
$('#FIELD_'+city_id).val("Garden Grove");
$('#FIELD_'+state_id).val("CA");
$('#FIELD_'+zip_id).val("92841");
$('#FIELD_'+phone_4id).val("+1 714.901.5800");//phone
$('#FIELD_'+phone_id).val("+1 714.901.5811");//fax
}

Categories

Resources