I don't know why I get this error: Uncaught ReferenceError: username is not defined
The idea behind the functions is to create input elements and then append them to a form and overlay
const signup_nav = document.querySelector(".signUp");
//create elements
//The first function create an element input type
function createInput(variableNames, inputType, inputClass, inputPlaceholder) {
let variableNames = document.createElement("input");
variableNames.type = " ' " + inputType + " ' ";
variableNames.placeholder = " ' " + inputPlaceholder + " ' ";
variableNames.className = inputClass;
return variableNames;
}
//The second one create the inputs
//create inputs
function createForm() {
createInput(username, text, username_input, Username);
createInput(email, email, email_input, Email);
createInput(password, password, password_input, Password1);
createInput(retype_password, password, retype_passwordInput, Password2);
createInput(submit_signup, submit, submit_signup, Submit);
return createInput();
}
//And the last one append everything to a form and finally to an overlay
//append element to parent element
function createFull() {
//create overlay div
const overlay = document.createElement("div");
overlay.className = "overlay";
document.querySelector("body").appendChild(overlay);
//create div element
//append it to the main overlay
const overlayWrapper = document.createElement("div");
overlayWrapper.className = "overlayWrapper";
overlay.appendChild(overlayWrapper);
//create form
//append it to wrapper div
const form_signup = document.createElement("form");
form_signup.className = "form_signup";
overlayWrapper.appendChild(form_signup);
//append inputs to the form
form_signup.appendChild(createForm());
return overlay;
}
//click event - display overlay
//call the last function on click event
signup_nav.addEventListener("click", (ev) => {
let evObject = ev.target;
ev.preventDefault();
if(evObject.className === "signUp" && evObject.tagName === "A") {
console.log(evObject);
createFull();
}
});
The functions are really easy, but I have no idea what is wrong
In
function createForm() {
createInput(username, text, username_input, Username);
You are using Username with capital "U", in other places you only seen to reference lowercase only for fields AND variables. Maybe it's a typo?
I have a tablesorter table that is generated dynamically with javascript and ajax. There are inputs for the user to change values, and when they click a button to go to the next or previous record, it needs to save the information in the table to a MySQL table. I have looked at many of the posts on here and tried numerous examples, and I still can't get any of the data in the table to post to my PHP page to save it.
Here is a sample of the first row of my table:
$("#guides").append('<tr><td id="amCodeOld">'+data.amCodeOld+'</td><td><input type="text" class="qty" id="amOldQty"/></td><td>'+data.amOldPrice+
'</td><td>'+data.am+
'</td><td>'+data.amCodeNew+'</td><td><input type="text" class="qty" id="amNewQty"/></td><td>'+data.amNewPrice+
'</td><td><input type="checkbox" id="amS" '+
'"/></td><td><input type="checkbox" id="amR"'+'"/></td><td><input type="checkbox" id="amCall"'+
'"/></td><td><input type="text" id="amComm" value="'+
'"/></td></tr>');
There are more rows like this one, each for a different guide I am using. What I need to find is the value of the inputs with id of amOldQty, amNewQty etc, and the different checkboxes.
I have buttons for Next, Prev, and Print, and when the button is clicked I am trying to call a function called save() that will get the info, and send it via ajax to another PHP page to be saved.
save() looks like this:
function save() {
var amOldQty
$('#guides tr').each(function(){
alert("searching ");
amOldQty= $(this).find('#amOldQty').val();
if (amOldQty=='' || amOldQty== null) {
amOldQty = "Not Showing Number";
}
console.log(amOldQty);
});// END OF EACH FUNCTION
I have tried:
var amOldQty;
$('#guides tbody tr').each(function() {
amOldQty = $(this).find('td:nth-child(1) input').val();
});
console.log(amOldQty);
and the log shows undefined. I have also tried a more direct approach by using
$('#guides tbody tr').each(function() {
amOldQty = $(this).find('#amOldQty').val();
});
and still have nothing. I am getting the alert of Searching, but in the console.log(amQtyOld) all it shows me is "Not Showing a number". I have even tried to have the input populated when the table first is created, and it still does not find that number.
Update if I add td to:
$(guides tr td).each(function(){...
It does not even give me the alert of "Searching".
How do I get all the data out of this table so I can save it? it seems that everything I am trying should be working.
If your users use browsers that support contenteditable elements, then you can check out the contenteditable widget I have available for my fork of tablesorter.
If you don't want to use contenteditable elements, then you can try the following code (copied and modified from the contenteditable demo, but not tested)
var $table = $('table');
$table.children('tbody').on('change', 'input', function(event){
var $input = $(this),
$cell = $input.closest('td'),
newContent = $input.val(),
cellIndex = $cell[0].cellIndex, // there shouldn't be any colspans in the tbody
rowIndex = $this.closest('tr').attr('id'); // unique row id
// update tablesorter
$table.trigger("updateCell", [$cell]);
$.post("mysite.php", {
"row" : rowIndex,
"cell" : cellIndex,
"content" : newContent
});
});
Hopefully, you're also using an input parser for that column.
The final answer seems to be to just hardcode the value of the inputs $("#amOldQty:).val() and pass them as data through ajax to my php file to save the information. Here is the completed code in case anyone has a similar issue:
function save() {
function GuidesSave(){
this.update();
}
GuidesSave.prototype.list = ['am','fol','tich','book','neb','ster','c','byte','ing'];
GuidesSave.prototype.update = function(){
for( var i = 0 ; i < this.list.length ; i++ ){
var guide = this.list[i];
this[ guide + 'S' ] = $("#" + guide+'S' ).is(":checked") ? 1 : 0;
this[ guide + 'R' ] = $("#" + guide+'R' ).is(":checked") ? 1 : 0;
this[ guide + 'Call' ] = $("#" + guide+'Call' ).is(":checked") ? 1 : 0;
}// end of for loop
}
var guides = new GuidesSave();
$.ajax({
type: "POST",
url: "poSave.php",
dataType: "json",
data: ({po: $('#po').val(),isbn:$("#isbn13").val(),amOldQty:$("#amOldQty").val(),amNewQty:$("#amNewQty").val(),amS:guides.amS,amR:guides.amR, amCall:guides.amCall,amComm:$("#amComm").val(),
folOldQty:$("#folOldQty").val(),folNewQty:$("#folNewQty").val(),folS:guides.folS,folR:guides.folR, folCall:guides.folCall,folComm:$("#folComm").val(),
tichOldQty:$("#tichOldQty").val(),tichNewQty:$("#tichNewQty").val(),tichS:guides.tichS,tichR:guides.tichR, tichCall:guides.tichCall,tichComm:$("#tichComm").val(),
bookOldQty:$("#bookOldQty").val(),bookNewQty:$("#bookNewQty").val(),bookS:guides.bookS,bookR:guides.bookR, bookCall:guides.bookCall,bookComm:$("#bookComm").val(),
nebOldQty:$("#nebOldQty").val(),nebNewQty:$("#nebNewQty").val(),nebS:guides.nebS,nebR:guides.nebR, nebCall:guides.nebCall,nebComm:$("#nebComm").val(),
sterOldQty:$("#sterOldQty").val(),sterNewQty:$("#sterNewQty").val(),sterS:guides.sterS,sterR:guides.sterR, sterCall:guides.sterCall,sterComm:$("#sterComm").val(),
cheggOldQty:$("#cOldQty").val(),cheggNewQty:$("#cNewQty").val(),cheggS:guides.cS,cheggR:guides.cR, cheggCall:guides.cCall,cheggComm:$("#cComm").val(),
byteOldQty:$("#byteOldQty").val(),byteNewQty:$("#byteNewQty").val(),byteS:guides.byteS,byteR:guides.byteR, byteCall:guides.byteCall,byteComm:$("#byteComm").val(),
ingOldQty:$("#ingOldQty").val(),ingNewQty:$("#ingNewQty").val(),ingS:guides.ingS,ingR:guides.ingR, ingCall:guides.ingCall,ingComm:$("#ingComm").val(),
qty1: $('#topqty').val(),price1: $('#topVal').html(),comp1:$('#topCo').html(),
qty2: $('#secqty').val(),price2: $('#secVal').html(),comp2: $('#secCo').html(),
qty3: $('#thrqty').val(),price3: $('#thrVal').html(),comp3: $('#thrCo').html()}),
success: function(data){
}
});
}// END OF SAVE FUNCTION
The GuideSave function loops through all the check boxes (27 different ones) to see whichones are checked so I can save them as either a 1 or 0 and then have them checked or not when the record is recalled.
It is not really clear what or how you are wanting to present the data. However, here is a JSFiddle that does what it appears you desire.
The function createRowsForTesting() just creates the rows in the table and populates the <input> fields to make testing easier.
The function getDataFromTable() walks the rows of a <table>, or all <tables>, sending the data you said you wanted to the console. From your own answer to this question it became clear that you really wanted to access many more <input> elements than was mentioned in your question. Thus, this this function now builds an array of Objects which contain key:value pairs for the data in <input> fields. There is one Object in the array for each row. The array is returned to the calling function.
The function wrapGetDataFromTable() wraps getDataFromTable() providing the table ID, that we are only looking in rows within the <tbody> tag and that we want output to the console. The array returned by getDataFromTable() is output so we can see the data structure. The function is set up to run each time you press the [print to console] button.
For a table that looks like (with header row):
The output is:
amOldQty=amOldQty0_text amNewQty=amNewQty0_text amS=on amR=off amCall=off amComm=amComm0_text
amOldQty=amOldQty1_text amNewQty=amNewQty1_text amS=off amR=on amCall=off amComm=amComm1_text
amOldQty=amOldQty2_text amNewQty=amNewQty2_text amS=off amR=off amCall=on amComm=amComm2_text
The array of row input data objects is:
[0] Object { amOldQty="amOldQty0_text", amNewQty="amNewQty0_text", amS="on", more...}
amOldQty: "amOldQty0_text"
amNewQty: "amNewQty0_text"
amS: "on"
amR: "off"
amCall: "off"
amComm: "amComm0_text"
[1] Object { amOldQty="amOldQty1_text", amNewQty="amNewQty1_text", amS="off", more...}
amOldQty: "amOldQty1_text"
amNewQty: "amNewQty1_text"
amS: "off"
amR: "on"
amCall: "off"
amComm: "amComm1_text"
[2] Object { amOldQty="amOldQty2_text", amNewQty="amNewQty2_text", amS="off", more...}
amOldQty: "amOldQty2_text"
amNewQty: "amNewQty2_text"
amS: "off"
amR: "off"
amCall: "on"
amComm: "amComm2_text"
JavaScript:
/**
* Runs through a table getting the values from <input> fields.
* It only looks in the <tbody>, not the <thead>
* #param tableId
* The DOM ID of the table from which we desire to obtain the
* input values.
* If tableId is not a string, then look in all table rows in all tables.
* #param keyAttr
* The attribute of the <input> which contains the value which will
* be used as the key for the key:value pair within the Object returned.
* This needs to be a value which is unique, wihin the table row.
* A normal use would be "id".
* If a value is duplicated a message is sent to the console and only
* the last value is kept.
* The default is "id".
* #param justBody
* If true, look only within the <tbody> tag, not any other part of
* the table (e.g. <thead>).
* The default is true.
* #param includeBlank
* Boolean indicating if the returned array should contain an entry for
* rows which are found to be blank.
* The default is true.
* #param consoleOutput
* Send a line to the console with the key:value pairs separated by
* tabs for each row.
* The default is false.
* #return Object
* Returns an Array of Objects with key:value pairs for the rows.
* If there were no <input>
* Copyright 2014 by Makyen.
* Released under the MPL 2.0. http://mozilla.org/MPL/2.0/.
*/
function getDataFromTable(tableId, keyAttr, justBody, includeBlank, consoleOutput) {
//This assumes that within the row each input has a unique attribute keyAttr.
//Set defaults:
var tableSelector = (typeof tableId === "string") ? "#" + tableId : "table";
keyAttr = (typeof keyAttr === "string") ? keyAttr : "id";
includeBlank = (typeof includeBlank === "boolean") ? includeBlank : true;
justBody = (typeof justBody === "boolean") ? justBody : true;
consoleOutput = (typeof consoleOutput === "boolean") ? consoleOutput : false;
var bodySelector = (justBody) ? " tbody" : "";
var toReturn = [];
var selector = tableSelector + bodySelector + ' tr';
$(selector).each(function () {
var inputs = {};
$(this).find('input').each(function () {
//Get the value for all inputs on this line.
var attrValue = $(this).attr(keyAttr);
if (typeof inputs[attrValue] !== "undefined") {
console.log("Warning: When attempting to get data from the table id=" //
+ tableId + " the value of the key attribute, " + keyAttr //
+ ", was not unique for value=" + attrValue);
}
//Get the value of the <input>.
if ($(this).is(':checkbox')) {
//Special case the checkboxes because .val() does not return
//the correct informaiton for them.
//First indicate that all checkboxes are off.
inputs[attrValue] = "off";
//Specifically determine if the current one is checked.
if ($(this).is(':checked')) {
inputs[attrValue] = "on";
}
} else {
//Add this input to the object
inputs[attrValue] = $(this).val();
}
});
var inputKeys = Object.keys(inputs);
if (inputKeys.length > 0) {
//There were <input> tags on this row.
var outputText = "";
if (consoleOutput) {
inputKeys.forEach(function (value) {
outputText += value + "=" + inputs[value] + "\t";
});
console.log(outputText);
}
toReturn.push(inputs);
} else {
//No <input> tags on this row
if (includeBlank) {
if (consoleOutput) {
console.log("A row without <input> tags was found.");
}
toReturn.push(inputs);
}
}
});
return toReturn;
}
function wrapGetDataFromTable() {
//This wraper is so the getDataFromTable() function remains
// generic. The wrapper merely defines which table from which to
// get the data,
// the attribute to use for unique keys = "id"
// to look only in the <tbody>
// to not include an object for the lines which are blank
// and output the row data to the console.
var toReturn = getDataFromTable("guides", "id", true, false, true);
if (typeof console.dir === "function") {
//Make sure console.dir() exists prior to using it.
console.log("The array of row input data objects is:");
console.dir(toReturn); //Let us see the Object in the console for checking.
}
return toReturn;
}
$('#to-console-button').click(wrapGetDataFromTable);
//The rest is setup for creating the table header and rows.
//It is only for testing.
function createRowsForTesting() {
const numRowsToCreate = 3;
var i;
var data = {
amCodeOld: "amCodeOld",
amOldPrice: "amOldPrice",
am: "am",
amCodeNew: "amCodeNew",
amNewPrice: "amNewPrice"
};
//Create the table
//First add a header.
$("#guides thead").append('<tr><th>amCodeOld_H</th>' //
+ '<th>amOldQty_H</th>' //
+ '<th>amOldPrice_H</th>' //
+ '<th>am_H</th>' //
+ '<th>amCodeNew_H</th>' //
+ '<th>amNewQty_H</th>' //
+ '<th>amNewPrice_H</th>' //
+ '<th>amS_H</th>' //
+ '<th>amR_H</th>' //
+ '<th>amCall_H</th>' //
+ '<th>amComm_H</th></tr>');
//Now the body rows.
for (i = 0; i < numRowsToCreate; i++) {
//From stackoverflow question: http://stackoverflow.com/questions/25998929/extract-data-from-a-tablesorter-table-with-javascript
$("#guides tbody").append('<tr><td id="amCodeOld">'+data.amCodeOld+'</td><td><input type="text" class="qty" id="amOldQty"/></td><td>'+data.amOldPrice+ //
'</td><td>'+data.am+ //
'</td><td>'+data.amCodeNew+'</td><td><input type="text" class="qty" id="amNewQty"/></td><td>'+data.amNewPrice+ //
'</td><td><input type="checkbox" id="amS" '+ //
'"/></td><td><input type="checkbox" id="amR"'+'"/></td><td><input type="checkbox" id="amCall"'+ //
'"/></td><td><input type="text" id="amComm" value="'+ //
'"/></td></tr>');
}
//*
//Fake having the table filled in, as I am tired of entering the input
//You have to try it without this, but with manual input in order to truly verify
var row = 0;
$('#guides tbody tr').each(function () {
$(this).find('#amOldQty').val("amOldQty" + row + "_text");
$(this).find('#amNewQty').val("amNewQty" + row + "_text");
$(this).find('#amComm').val("amComm" + row + "_text");
row++;
});
//*/
}
createRowsForTesting();
HTML:
<table class="tablesorter" id="guides">
<thead></thead>
<tbody></tbody>
</table>
<button type="button" id="to-console-button">print to console</button>
<!-- values to use to fill input:
amOldQty0_text
amOldQty1_text
amNewQty0_text
amNewQty1_text
amComm0_text
amComm1_text -->
Note: The selector ($("#guides").append('<tr>...) used in your line to add the table row to the table might be your problem. It currently adds your rows as the last elements in the <table>, not the last in the <tbody>. While the browser should compensate for this, it is possible that it is not doing so in your environment. Try $("#guides tbody").append('<tr>...
However, it appears more likely that the issue is a header row (or a row without input cells) in the <tbody>. The code now accounts for this possibility.
I have this line of code that exist in a partial view. Jquery code resides in the index page hosting the partial view
<div class="paythisamountbtn">#Html.ActionLink(T("Pay This Amount"), "InvoiceCheckout", null, new { #target = "InvoiceCheckout", #class = "amebtn" }): #String.Format("{0:C}", Model.TotalDue)</div>
I have a checkbox on every row of data. This is all within a webgrid. Here is what it looks like below
#{
var gridColumns = new List<WebGridColumn>();
gridColumns.Add(grid.Column(format: (item) =>
{
var s = "<input type=\"checkbox\" name=\"InvoiceNumber\" id=\"IN" + item.InvoiceNumber.ToString() + "\" value=\"" + item.InvoiceNumber.ToString() + "|" + item.AmountDue + "\"";
if (item.IsSelected) {
s += "checked=\"true\"";
}
s+= "/>";
return s;
}
, style: "box"));
...
...
...
}
function SetViewSelected(c) {
var s = 0;
for (i = 0; i < $("input[name='InvoiceNumber']:checked").length; i++) {
invoice_details = $("input[name='InvoiceNumber']:checked")[i].value;
invoice_amount = invoice_details.split("|")[1];
s += parseFloat(invoice_amount);
}
alert(s);
//$('.paythisamountbtn').val(s);
}
As I check and uncheck the checkboxes, I want to be able to show the total on the line below as they change. At the moment the alert(s) gets me the new total
<div class="paythisamountbtn">#Html.ActionLink(T("Pay This Amount"), "InvoiceCheckout", null, new { #target = "InvoiceCheckout", #class = "amebtn" }): #String.Format("{0:C}", Model.TotalDue)</div>
I tried doing $('.paythisamountbtn').val(s); but the totaldue does not change as I check and uncheck the check boxes.
How can I do this please?
Use .text for a div
$('.paythisamountbtn').text(s)
To update the attribute value what you must do is the following:
$('.paythisamountbtn').text(parseInt($('.paythisamountbtn').text())+5);
To update the value each time you click one of the checkboxes you could do something like this:
$('#checkbox1').change(function() {
if($(this).is(":checked")) {
UpdateValueNow();
}
});
I have a extended datatable, RICHFACES 3.3.3 with sorting and filtering enabled. The table is rendered dynamically. Based on the requirement, I need to disable certain rows(which contain editable fields) when the table is displayed.
I have that logic written in a Javascript function rowBlur(), and call it whenever the page is displayed. Hence, when the table is loaded the required rows are disabled as expected. The problem is whenever I filter/sort the table, the disabled rows get enabled again.
Is there any way I can call the javascript function whenever filter or sort happens?
Here is the code:
HtmlExtendedDataTable dynamicDataTable = new HtmlExtendedDataTable();
dynamicDataTable.setOnkeydown("filterAllOnEnter(event)");
function filterAllOnEnter(event) {
if(event.keyCode == 13) {
jQuery(".rich-filter-input").blur();
rowblur();
return false;
} else
return true;
}
// js code////////////
<script>
function show(){
val = '${myController.mergeWorkMap}';
}
</script>
<script>
function rowblur(){
for(var i=0;i<7;i++){
var firstCol = "myForm:dynamicTable:"+i+":col0" ;
var secondCol = "myForm:dynamicTable:"+i+":col1" ;
var merge =document.getElementById(firstCol).textContent;
var work =document.getElementById(secondCol).textContent;
var obj = JSON.parse(val).mergeWorkMap;
if(!(work == obj[merge])){
var col3 = "myForm:dynamicTable:" + i + ":col3";
var col4 = "myForm:dynamicTable:" + i + ":col4";
var col5 = "myForm:dynamicTable:" + i + ":col5";
var col6 = "myForm:dynamicTable:" + i + ":col6";
document.getElementById(col3).disabled = true;
document.getElementById(col4).disabled = true;
document.getElementById(col5).disabled = true;
document.getElementById(col6).disabled = true;
}
}
}
</script>
The rowblur() won't work properly on filtering, and on sorting the columns it won't work at all.
There are two things I would like help with please. I need help accessing the currently edited existing row in the Radgrid, as as well as the index of the Edit form when trying to add a new record to the table/
function OnClientSelectedIndexChanged(sender, eventArgs) {
var item = eventArgs.get_item();
// alert(item.get_value());
grid = $find("<%= rgSecurity.ClientID %>");
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems();
// alert("about to get to grid");
alert(selectedRows.length);
if (selectedRows.length > 1) {
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
alert(row);
inputField = MasterTable.getCellByColumnUniqueName(row, "Item")
alert(inputField);
if (inputField) {
inputFieldValue = inputField.value
break;
}
}
}
else
{
// alert(inputField);
}
window.radopen('<%=PopLink %>?sel=' + item.get_value() + "&avail=" + inputFieldValue, "UserRoleDialog");
return false;
}
The currently edited grid row can be retrieved on the server using the EditItems[0] collection of the master table or through the e.Item argument inside the EditCommand server event handler. The index of the edited row can be fetched from the ItemIndex property of the item referenced as explained in the first sentence.