append textbox value and checkbox value to a string

Question

I am having trouble figuring out how to append the values in the text field(exclude empty textboxes and corresponding checkboxes) and all the checked and unchecked values to a string in the order: name|T|F_name|F|F

I have this code, I have been trying to figure out how to make it into a single string. On submit I will send this string to my controller.

<input type="text" value="jim">
<input type="checkbox" checked="checked">
<input type="checkbox">
<input id="button_1" type="button" value="delete" ><br>
<input type="text" >
<input type="checkbox">
<input type="checkbox">
<input id="button_2" type="button" value="delete"><br>
<input type="text" value="deb">
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">
<input id="button_3" type="button" value="delete"><br>
<input type="submit">


$(':input[type="text"]').each(function() {
    if($(this).val() != "") { 
        nameString = $(this).val();

});

$(':checked').each(function() {

});

UPDATE

jsfiddle

David Thomas · Accepted Answer · 2013-03-20 18:59:53Z

2

I'd suggest:

var results = [], delimiter = '|', n, c;
$('input[type="text"]').each(function(){
    var that = $(this);
    n = this.value;
    if (n !== ''){
        c = that.nextUntil('input[type="button"]').map(function(){
            return this.checked == true;
        }).get().join(delimiter);
        results.push(n,c);
    }
});

console.log(results.join(delimiter));

JS Fiddle demo.

The above does rely, somewhat, on the structure of your HTML (specifically the radio elements coming before the button(s).

If you need the true/false to be T/F, then instead use:

var results = [], delimiter = '|', n, c;
$('input[type="text"]').each(function(){
    var that = $(this);
    n = this.value;
    if (n !== ''){
        c = that.nextUntil('input[type="button"]').map(function(){
            return (this.checked == true).toString().toUpperCase().slice(0,1);
        }).get().join(delimiter);
        results.push(n,c);
    }
});

console.log(results.join(delimiter));

JS Fiddle demo.

References:

edited Mar 20, 2013 at 18:59

answered Mar 20, 2013 at 18:54

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user525146 Over a year ago

in the jsfiddle example your code works excellent, but your code in my code doesn't print the value of the checkbox. I am confused what is happening

David Thomas Over a year ago

Then you need to work out the differences between your code and the linked demonstrations; are there any errors generated in the console? What're the differences in JavaScript, or the html?

user525146 Over a year ago

See the updated section. My actual html and your javascript function. The table is generated dynamically based on the resultset, so I am appending an integer at the end of the id to differentiate the item. For some reason the value of the checkbox is blank when I implement your code.

David Thomas Over a year ago

Within the map() method add a console.log(this, this.value, this.checked); this should be the input element, this.value should be on or off, this.checked should be either true or false. I'm unsure as to why the input[type="text"] selector should work, while the checkbox-es don't.

user525146 Over a year ago

I see it empty.. I don't think its even getting into the map function

|

Selvakumar Arumugam · Accepted Answer · 2013-03-26 14:14:54Z

1

+50

I used 2 for loops as I believe you want it results per line. check http://jsfiddle.net/s7JZF/7/

Note: I have added conditions to exclude row if the textbox is empty.

var results = [],
    delimiter = '|';

$('table tr').each(function () {
    var line = [];
    $(this).find('input').each(function () {
        if (this.type == 'text') {
            //exclue blank textbox
            if (this.value == '') return false;

            line.push(this.value);
        } else if (this.type == 'checkbox') {
            line.push(this.checked?'T':'F');
        }
    });

    if (line.length) {
        results.push(line.join(delimiter));
    }
});

alert(results.join('_'));

answered Mar 26, 2013 at 14:14

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

user525146 Over a year ago

Thanks so much... this works like a charm !. What was the mistake in the jsfiddle code ?

TJC · Accepted Answer · 2013-03-20 18:49:54Z

1

You're almost there, but there are a few minor changes you'll have to make if I understand your code correctly...

namestring = "";
$(':input[type="text"]').each(function() {
     if($(this).val() != "") { 
         namestring += $(this).val();
         $(this).find("input[type='checkbox']").each(function() {
             if($(this).is(":checked"))
                 checked = T;
             else
                 checked = F;
             namestring += checked;
         }
         namestring += "_";
     }
}
//<Send namestring places>

This code should do what you are looking for, but I have not tested it.

EDIT: http://jsfiddle.net/PuQ4r/

edited Mar 20, 2013 at 18:49

answered Mar 20, 2013 at 17:17

TJC

7273 silver badges12 bronze badges

11 Comments

user525146 Over a year ago

Its not attaching the checkbox value. I would be needing the checkbox value to be either T or F based on if it checked or unchecked

awbergs Over a year ago

I would recommend using $(this).is(":checked") instead of checking the attribute value.

user525146 Over a year ago

@TJC its returning false everytime for me, though the textbox is checked and I am getting the checkbox value as false for 6 times. I have 2 rows and the value is nameFFFFFF_nameFFFFFF_

TJC Over a year ago

do you ever close your input elements? i dont see any </input> tags in your code. this would throw off the code... also, i updated the if statement above.

user525146 Over a year ago

@TJC I see whats happening. In the example code, I have a total of 6 checkboxes, first row is empty and so are its corresponding checkboxes, the code returns the value of all the checkboxes.

|

Bart Calixto · Accepted Answer · 2013-04-01 17:31:44Z

0

if you set the same name for each of your inputs, values will be sent as a string array.

so your server side controller (you didn't say which technology is) should pick em right away.

checkbox without checked value wont be sent by default.

you can 'preview' this doing a GET instead of POST form, so if you have :

<input name="form1" value="yes" type="text" />
<input name="form1" type="checkbox" value="sure" checked />
<input name="form1" type="checkbox" value="noway" />

a GET form will give you :

someAction?form1=yes&form1=sure

which in turn will be a string array on your server.

I know is not a direct answer, but a proper use of HTML input elements that may help in your situation.

answered Apr 1, 2013 at 17:31

Bart Calixto

19.7k12 gold badges81 silver badges119 bronze badges

Collectives™ on Stack Overflow

append textbox value and checkbox value to a string

4 Answers 4

6 Comments

1 Comment

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related