Re: Looping through elements, to find textbox, and get values - JavaScript Discussion Boards

Sandip.Nascar22-Aug-12 11:03

22-Aug-12 11:03

Are you kidding man?
You told, "Why don't you guys make free website for me?"

This is a spam message. Need immediate action.

Looping through elements, to find textbox, and get values

jkirkerx8-Aug-12 13:12

jkirkerx

8-Aug-12 13:12

This is all Javscript, some Jquery,

I created a blank list with an empty container. you fill out the container, and click to add another. You can make as many as you need, or delete the ones you don't want.

----------------------
name: textbox |
code: textbox |
----------------------

So let's say I have 5 of them

I can get the count which is 5, and make an element array of all the containers

Now I want to loop through each container, and get the name and code.

I thought this would work, but it bombed huge. perhaps I jumped the gun, and should make another array of the textboxes inside the loop, or maybe I'm using the $elements[i] incorrectly.

I'm clueless here, and information on this is slim. This is my first time on this.

var iCount = dynamicCart_Element1.idx;
var jCount = parseInt($("._element1").length);

   var $elements = $("._element1");
   for (i = 0; i <= jCount - 1; i++) {
       var name = $elements[i].find("_name_Field").val(); <-Bombs here
       var code = $elements[i].find("_code_Field").val(); <- and here
       alert(name);

   }

The dynamicCart_Element1 is a global on the page, I thought I could use it to build an array of all the values, then convert it to JSON for storage, and send it to the server to write out the XML file for it.

Re: Looping through elements, to find textbox, and get values

jkirkerx8-Aug-12 18:13

jkirkerx

8-Aug-12 18:13

Well I ended up with this

Guess you have to create a true array, and iterate the elements using each, and then loop through the values

var iCount = dynamicCart_Element1.idx;
        var panelCount = parseInt($("._element1").length);
        var nameCount = parseInt($("._name_Field").length);
        var codeCount = parseInt($("._code_Field").length);

        var nameArray = [];
        $("._name_Field").each(function () { nameArray.push($(this).val()) });

        var codeArray = [];
        $("._code_Field").each(function () { nameArray.push($(this).val()) });

        for (i=0; i<=nameCount - 1; i++) {
            var name = nameArray[i];
            var code = codeArray[i];

            alert(name + ", " + code);
            
        }

Re: Looping through elements, to find textbox, and get values

Andrei Straut9-Aug-12 4:41

Andrei Straut

9-Aug-12 4:41

Yeah, it's a good idea when you have a lot of elements of the same type (textboxes, comboboxes, etc) to give them the same class and iterate using jQuery.each. Iterating through them by ID is way overkill (as those IDs are dynamically generated I assume, you have to save the pattern, and then re-compose it back to get the array of IDs, or simply save the IDs in an array, both of which are more complicated than simply iterating by class).

Now, I don't know how fast this is (usually searching by class is slower than searching by ID), but I think it's the cleanest way to do it.

Also, have a 5 for figuring it by yourself AND posting the solution back.

Full-fledged Java/.NET lover, full-fledged PHP hater.
Full-fledged Google/Microsoft lover, full-fledged Apple hater.
Full-fledged Skype lover, full-fledged YM hater.

Re: Looping through elements, to find textbox, and get values

jkirkerx9-Aug-12 6:27

jkirkerx

9-Aug-12 6:27

Yeah that was a mind bender. I wanted to use ID, but it was hard to compose in jquery, and then I wanted to use my original array, and tossed that out the window as well.

Finding help on the subject only led to simple basic information.

Ended up with this, including the new array, so I can package the data to send to a web service, and create the xml for it on the server. Can't give myself a 5, but thanks for verifying my code. I appreciate you critiquing my save function.

var elements = [];

var nameCount = parseInt($("._name_Field").length);
var codeCount = parseInt($("._code_Field").length);

// Create Arrays to hold the values
var nameArray = [];
$("._name_Field").each(function () { nameArray.push($(this).val()) });

var codeArray = [];
$("._code_Field").each(function () { codeArray.push($(this).val()) });

// Gather the Data from the Element Containers from valid elements
var jdx = 0
for (i = 0; i <= nameCount - 1; i++) {
  if ((nameArray[i] != "") && (codeArray[i] != "")) {
     elements[jdx] = [];
     elements[jdx]["name"] = nameArray[i];
     elements[jdx]["code"] = codeArray[i].toUpperCase();
     
     jdx++;
  }
}

Re: Looping through elements, to find textbox, and get values

Andrei Straut9-Aug-12 9:37

Andrei Straut

9-Aug-12 9:37

Now, I'm no JavaScript guru, but...

JavaScript

if ((nameArray[i] != "") && (codeArray[i] != ""))

Here I would also add a jQuery.trim() on nameArray[i]. You may have values that are simply spaces, and checking for empty string will return false

Also, in the for you could dump nameCount and codeCount. Maybe you didn't post the full function, but nameCount is used only for upper bound limit (which could be replaced with parseInt($("._name_Field").length)), and codeCount isn't used at all.

Other than that, seems to be fine. Also, it's good that you are commenting your code. I've been through some situations in my (relatively short) career when I banged my hand on a wall for not commenting my code a few months earlier.

And if it works for you the way you want it, it's all good. I may get burned for this, but I have a saying:
Make it work. Then do it better

Wrapping it all up, the final function would be:

JavaScript

var elements = [];
 
// Create Arrays to hold the values
var nameArray = [];
$("._name_Field").each(function () { nameArray.push($(this).val()) });
 
var codeArray = [];
$("._code_Field").each(function () { codeArray.push($(this).val()) });
 
// Gather the Data from the Element Containers from valid elements
var jdx = 0;
for (i = 0; i <= parseInt($("._name_Field").length) - 1; i++) {
  if ($.trim(nameArray[i]) != ""
	&& $.trim(codeArray[i]) != "") {
     elements[jdx] = [];
     elements[jdx]["name"] = nameArray[i];
     elements[jdx]["code"] = codeArray[i].toUpperCase();
     
     jdx++;
  }
}

Full-fledged Java/.NET lover, full-fledged PHP hater.
Full-fledged Google/Microsoft lover, full-fledged Apple hater.
Full-fledged Skype lover, full-fledged YM hater.

Re: Looping through elements, to find textbox, and get values

jkirkerx9-Aug-12 10:18

jkirkerx

9-Aug-12 10:18

Your right, you have to tighten up the code to allow for input errors, been bit by the space before.

Just like in c++, you have to conserve resources, so I dumped the namecount, I thought about it, just didn't do it.

Glad the code is readable, know anything about consuming the eArray in a Web Service?, I posted it in the asp.net disscussion

// Create Arrays to hold the values
    var nameArray = [];
    $("._name_Field").each(function () { nameArray.push($(this).val()) });

    var codeArray = [];
    $("._code_Field").each(function () { codeArray.push($(this).val()) });

    // Gather the Data from the Element Containers from valid elements
    var jdx = 0
    for (i = 0; i <= parseInt($("._name_Field").length) - 1; i++) {
        // Only collect populated containers via jdx
        if ((nameArray[i].trim() != "") && (codeArray[i].trim() != "")) {
            elements[jdx] = [];
            elements[jdx]["name"] = nameArray[i].trim();
            elements[jdx]["code"] = codeArray[i].trim().toUpperCase();
            jdx++;
        }
    }

    var eArray = "";
    for (e = 0; e <= elements.length - 1; e++) {
        eArray = eArray + "{\"name\" : \"" + elements[e].name + "\", \"code\" : \"" + elements[e].code + "\"}";
        if (e <= elements.length - 2) { eArray = eArray + "," };
    }                               

    // Build the JSON Array
    var send_Data =
    "{" +
    "\"template_Name\" : \"" + template_Name + "\", " +
    "\"template_Array\" : [" + eArray + "]" +
    "}";

    alert(send_Data);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "productEditor.asmx/create_DynamicCart_Template",
        data: send_Data,
        dataType: "json",
        error: function (xhr, status, error) {

            exitCode = 2;
            alert(xhr.responseText);

        },
        success: function (responseText) {

            try {
                eval('(' + responseText.d + ')');
            }
            catch (err) {

            }

            alert(responseText.d);

            var objB = jQuery.parseJSON(responseText.d);
            exitCode = objB.template_ExitCode;

        }
    });

});

Re: Looping through elements, to find textbox, and get values

Andrei Straut9-Aug-12 10:35

Andrei Straut

9-Aug-12 10:35

jkirkerx wrote:
know anything about consuming the eArray in a Web Service?,

I don't have that much experience with json in .NET, as my development work in it has been mostly desktop and DB.

For the few occasions I've needed json, I've used JSON.NET[^] and was ok with it, did its job well. Now, if other members know of better libraries than this, I believe all suggestions are welcome.

Full-fledged Java/.NET lover, full-fledged PHP hater.
Full-fledged Google/Microsoft lover, full-fledged Apple hater.
Full-fledged Skype lover, full-fledged YM hater.

Re: Looping through elements, to find textbox, and get values

Andy Brummer9-Aug-12 10:26

Andy Brummer

9-Aug-12 10:26

Your other solution worked. You could also have done $($elements[i]).find("_name_Field").val() because the jquery indexer returns the dom element not the jquery wrapper to the dom element.

Curvature of the Mind now with 3D

Re: Looping through elements, to find textbox, and get values

jkirkerx9-Aug-12 16:54

jkirkerx

9-Aug-12 16:54

Oh this is getting exciting now!

var name = $elements[i].find("_name_Field").val(); <-Bombs here

So the first one worked?, yes I know it was working, I just couldn't figure out how to access the name. And I couldn't find any information on it that night, and just wanted to move forward.

I tried many different ways using alert as a test, thought name[i].val() would do the trick. I have no clue what the structure of name looks like. I sure would like know, I thought my first post was clean and simple.

Oh, I saw the hammer next to your name, and knew you were one of the big guns here on the CJ.

Any of the wisdom you choose to share with me would be appreciated. Thanks for reading my post!

Re: Looping through elements, to find textbox, and get values

Andy Brummer10-Aug-12 4:56

Andy Brummer

10-Aug-12 4:56

You were close, but not quite there.

var name = $($elements[i]).find("_name_Field").val();

Notice the extra $() around the element you are accessing. That's because $elements[i] is a raw DOM object not a jQuery object and doesn't have a find method.

jkirkerx wrote:
Oh, I saw the hammer next to your name, and knew you were one of the big guns here on the CJ.

Thanks for the flattery, but I just did a favor for Chris about 10 years ago to get that little icon, nothing really special there.

Curvature of the Mind now with 3D

Re: Looping through elements, to find textbox, and get values

jkirkerx10-Aug-12 6:31

jkirkerx

10-Aug-12 6:31

Oh I get it now. I was thinking about the wrapping it again, but was more focused on the name.

Thanks, That was still big gun help there!

Get value from textbox created with createElement

jkirkerx6-Aug-12 15:48

jkirkerx

6-Aug-12 15:48

Well I'm getting bolder here with Javascript.

This eludes me, I can create a element and set the value no problem, I can get the value via Jquery no problem if the element is pre-dom, but if I create an element with createElement, I was thinking since my element is new in the DOM, it would be easy to retrieve the value via function. I'm missing something really basic here in principal, and this is the first time I have created a textbox this way.

It's written to be compatible with IE and Firefox browsers at the same time, in a single version.

I keep getting 'undefined' as the value of the code textbox. The function works, I just can't the appendCode from the textbox.

I've tried 3 versions so far. Just thought I'd ask, tomorrow I will have a fresh hat on to think with.

The Element

var txt_Element_L1_Code_Field = document.createElement("input");
    txt_Element_L1_Code_Field.id = "_txt_Element_L1_Code_Field_" + dynamicCart_Element1.idx;
    txt_Element_L1_Code_Field.type = "text";
    txt_Element_L1_Code_Field.style.paddingLeft = "5px";
    txt_Element_L1_Code_Field.style.width = "90%";
    txt_Element_L1_Code_Field.style.backgroundColor = "rgb(255,255,255)";   
    td_Element_L1_Code_Field.appendChild(txt_Element_L1_Code_Field);

Version 1 function that is binded

txt_Element_L1_Code_Field.onkeydown = function () {
        var appendCode;
        if (txt_Element_L1_Code_Field.innerText != "") {
            appendCode = txt_Element_L1_Code_Field.value;
        }

        span_Element_L1_CPN_Field.innerText = appendCode;
        span_Element_L1_CPN_Field.innerHTML = appendCode;
    };

Version 2: function that is binded

txt_Element_L1_Code_Field.onkeydown = function () {
        var appendCode;
        if (txt_Element_L1_Code_Field.innerText != "") {
            appendCode = txt_Element_L1_Code_Field.innerText;
        }
        else if (txt_Element_L1_Code_Field.innerHTML != "") {
            appendCode = txt_Element_L1_Code_Field.innerHTML;
        }

        span_Element_L1_CPN_Field.innerText = appendCode;
        span_Element_L1_CPN_Field.innerHTML = appendCode;    
    };

Version 3:
I lost it, gone

Re: Get value from textbox created with createElement

BobJanova7-Aug-12 0:12

BobJanova

7-Aug-12 0:12

Just use textBox.value. innerText and innerHTML will typically be empty for an <input>, for obvious reasons if you think about the markup.

Re: Get value from textbox created with createElement

jkirkerx7-Aug-12 6:24

jkirkerx

7-Aug-12 6:24

It took a while to test, but ended up very simplistic using .value

Thanks for the extra eyes, been awhile since I've used pure Javascript to get values.

Re: Get value from textbox created with createElement

twseitex7-Aug-12 8:25

twseitex

7-Aug-12 8:25

Maybe this

IE 8 needs
var pointer=createElement(');
var pointer1=pointerOfObject.appendChild(pointer);
but not pointer1.type="here_the_kind_of_button";

Opera needs
var pointer=createElement('INPUT');
var pointer1=pointerOfObject.appendChild(pointer);
pointer1.type="here_the_kind_of_button";

innerText not possible for Mozilla.
Please use .innerHTML
.innerText contains only plain text.
.innerHTML contains e.g. HTML tags like

Re: Get value from textbox created with createElement

jkirkerx8-Aug-12 10:54

jkirkerx

8-Aug-12 10:54

I ended up writing this, but I do need to go back and see if IE can just use innerHTML. I'm still messing around between IE, Firefox, and I need to do opera as well.

onkeyup element is created with createElement('input');

var txt_Element_L1_Code_Field = document.createElement("input");
    txt_Element_L1_Code_Field.id = "_txt_Element_L1_Code_Field_" + dynamicCart_Element1.idx;
    txt_Element_L1_Code_Field.type = "text";
    txt_Element_L1_Code_Field.style.paddingLeft = "5px";
    txt_Element_L1_Code_Field.style.width = "90%";
    txt_Element_L1_Code_Field.style.backgroundColor = "rgb(255,255,255)";
    txt_Element_L1_Code_Field.style.border = "solid 1px rgb(255,228,225)";
    txt_Element_L1_Code_Field.maxLength = 8;
    td_Element_L1_Code_Field.appendChild(txt_Element_L1_Code_Field);

txt_Element_L1_Code_Field.onkeyup = function () {        
        var appendCode = txt_Element_L1_Code_Field.value;
        span_Element_L1_CPN_Field.innerText = partNumber.toUpperCase() + "-" + appendCode.toUpperCase();
        span_Element_L1_CPN_Field.innerHTML = partNumber.toUpperCase() + "-" + appendCode.toUpperCase();
    };

adapt datatable jquery to jee application

ahmadiss4-Aug-12 23:34

ahmadiss

4-Aug-12 23:34

CSS

I want to adapt this datatable: http://www.datatables.net/release-datatables/examples/server_side/row_details.html for use in my application jee

I spent a lot of time researching how to use it but always without result I managed to adapt this one: http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html the table but I have not succeeded expandable can you point me to a tutorial or clear me how

thank you very much

Re: adapt datatable jquery to jee application

Richard MacCutchan5-Aug-12 1:24

Richard MacCutchan

5-Aug-12 1:24

There are lots of Database articles here[^] on CodeProject.

One of these days I'm going to think of a really clever signature.

showmodaldialog return value undefined across domain

Amr M. K.4-Aug-12 23:24

Amr M. K.

4-Aug-12 23:24

Dear All,
I have problem , I am trying to use showmodaldialog javascript.
it always return undefined if you call page from out of domain,while if try to call page inside domain will return result

Yes. CreatiVity withOuT limiTs

Re: showmodaldialog return value undefined across domain

jkirkerx5-Aug-12 11:05

jkirkerx

5-Aug-12 11:05

Some Javascript and Jquery in same domain only, like $.AJAX

You would have to post code for a better anwser

Re: showmodaldialog return value undefined across domain

Amr M. K.6-Aug-12 22:05

Amr M. K.

6-Aug-12 22:05

could u check next reply

Yes. CreatiVity withOuT limiTs

Re: showmodaldialog return value undefined across domain

BobJanova5-Aug-12 23:43

BobJanova

5-Aug-12 23:43

You can't use AJAX across domains. If this script is using AJAX under the covers then it won't work with a cross-domain URL.

Re: showmodaldialog return value undefined across domain

Amr M. K.6-Aug-12 21:26

Amr M. K.

6-Aug-12 21:26

No I am just call from site ZZZ
var dlgResult = showModalDialog("YYYYY.aspx", '', "dialogWidth:880px;dialogHeight:400px;status:1");

In site YYYYY
YYYYY.aspx
return

function ExitPage(UserName,CardSerial)
       {
       var dlgResult = new Array();

           dlgResult["UserName"] = UserName;
                  window.returnValue = dlgResult;

           window.close();
       }

but alway return undefined
I test same procedure in pages in save domain ZZZ
,and return correct result

Yes. CreatiVity withOuT limiTs

Evalulating and passing RGB values from keydown

jkirkerx2-Aug-12 8:12

jkirkerx

2-Aug-12 8:12

I'm working on a color picker, to alter the canvas color of images uploaded.

So I have a manual RGB input, 3 textboxes

I wrote a program to evaulate the keydown, and can capture BS, DEL 0-9, but I also need to check that the whole number is 0-255.

I'd like to do it in one shot, but I'm not sure if it's possible, and where to implement it.

Just looking for suggestions.

$('[id*="_txt_Red"]').keydown(function (e) {
  return evaulateKeyDown_RGB(e);
});

function evaulateKeyDown_RGB(e) {

    // Delete = 46 | BS = 8 | 0 = 48 | 9 = 57 | < = 37 | > = 39
    // Delete = 46 | BS = 8 | 0 = 96 | 9 = 105 | < = 37 | > = 39 
    var charCode = e.keyCode || e.which;
    //alert(charCode);
    
    // Normal Keyboard
    if (charCode == 8 || charCode == 37 || charCode == 39 || charCode == 46 || ( charCode >= 48 && charCode <= 57 )) {
        return true;
    }
    // Numeric Keypad    
    else if (charCode >= 96 && charCode <= 105) {
        return true;
    }
    else {
        return false;
    }
}

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.