jQuery Passing Checked Input Text to Different Input

I am trying to pass the text in the list item for selected values in my list to a hidden field value on form submission, but I'm not sure of the best way to select and pass these values (emails) so they are captured with each form submission.

Provided are my form fields being interacted with:

<form action="/app/blog/create?_csrf={{csrfToken}}" method="post" enctype="multipart/form-data" id="blogSubmission">

<div class="member-tag-container">

    <ul class="list-group checked-list-box">

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[0]" value="1">John Doe (john.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[1]" value="2">Jane Doe (jane.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[2]" value="3"> (example@gmail.com)</p>

        </li>

        <input type="hidden" class="member-tag-hidden" name="memberTagEmail">

    </ul>

</div>

<button type="submit" id="create-blog-button"></button>

</form>

Here is the jQuery:

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 

        $("input.member-tag-hidden:checked").each(function() {

            memberEmail.push(regExp.exec($(this).parent()))

        })

});

Here is what I'm looking to achieve:

Checked checkboxes = name="memberTag[0]", name="memberTag[2]"

Hidden field updated = <input type="hidden" class="member-tag-hidden" name="memberTagEmail" value="john.doe@gmail.com, example@gmail.com">

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

add a comment |

Provided are my form fields being interacted with:

<form action="/app/blog/create?_csrf={{csrfToken}}" method="post" enctype="multipart/form-data" id="blogSubmission">

<div class="member-tag-container">

    <ul class="list-group checked-list-box">

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[0]" value="1">John Doe (john.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[1]" value="2">Jane Doe (jane.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[2]" value="3"> (example@gmail.com)</p>

        </li>

        <input type="hidden" class="member-tag-hidden" name="memberTagEmail">

    </ul>

</div>

<button type="submit" id="create-blog-button"></button>

</form>

Here is the jQuery:

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 

        $("input.member-tag-hidden:checked").each(function() {

            memberEmail.push(regExp.exec($(this).parent()))

        })

});

Here is what I'm looking to achieve:

Checked checkboxes = name="memberTag[0]", name="memberTag[2]"

Hidden field updated = <input type="hidden" class="member-tag-hidden" name="memberTagEmail" value="john.doe@gmail.com, example@gmail.com">

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

add a comment |

Provided are my form fields being interacted with:

<form action="/app/blog/create?_csrf={{csrfToken}}" method="post" enctype="multipart/form-data" id="blogSubmission">

<div class="member-tag-container">

    <ul class="list-group checked-list-box">

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[0]" value="1">John Doe (john.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[1]" value="2">Jane Doe (jane.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[2]" value="3"> (example@gmail.com)</p>

        </li>

        <input type="hidden" class="member-tag-hidden" name="memberTagEmail">

    </ul>

</div>

<button type="submit" id="create-blog-button"></button>

</form>

Here is the jQuery:

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 

        $("input.member-tag-hidden:checked").each(function() {

            memberEmail.push(regExp.exec($(this).parent()))

        })

});

Here is what I'm looking to achieve:

Checked checkboxes = name="memberTag[0]", name="memberTag[2]"

Hidden field updated = <input type="hidden" class="member-tag-hidden" name="memberTagEmail" value="john.doe@gmail.com, example@gmail.com">

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

Provided are my form fields being interacted with:

<form action="/app/blog/create?_csrf={{csrfToken}}" method="post" enctype="multipart/form-data" id="blogSubmission">

<div class="member-tag-container">

    <ul class="list-group checked-list-box">

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[0]" value="1">John Doe (john.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[1]" value="2">Jane Doe (jane.doe@gmail.com)</p>

        </li>

        <li class="list-group-item">

            <p><input type="checkbox" class="member-tag-checkbox" name="memberTag[2]" value="3"> (example@gmail.com)</p>

        </li>

        <input type="hidden" class="member-tag-hidden" name="memberTagEmail">

    </ul>

</div>

<button type="submit" id="create-blog-button"></button>

</form>

Here is the jQuery:

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 

        $("input.member-tag-hidden:checked").each(function() {

            memberEmail.push(regExp.exec($(this).parent()))

        })

});

Here is what I'm looking to achieve:

Checked checkboxes = name="memberTag[0]", name="memberTag[2]"

Hidden field updated = <input type="hidden" class="member-tag-hidden" name="memberTagEmail" value="john.doe@gmail.com, example@gmail.com">

jquery

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

edited Nov 26 '18 at 1:56

asked Nov 26 '18 at 1:50

cphill

1,69463780

asked Nov 26 '18 at 1:50

cphill

1,69463780

asked Nov 26 '18 at 1:50

cphill

1,69463780

add a comment |

1 Answer
1

active

oldest

votes

If I understand you, I would

Grab the values

Add them to the hidden field

Code: (untested)

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 



        // Get all of the checkboxes checked

        $("input.member-tag-checkbox:checked").each(function() {

            var result = regExp.exec($(this).parent().text());

            if (typeof result[1] !== 'undefined') { // if has value

              memberEmail.push(result[1]);

            }

        })



        // Add to hidden

        $('.member-tag-hidden').val(memberEmail.join(', '));

});

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473817%2fjquery-passing-checked-input-text-to-different-input%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If I understand you, I would

Grab the values

Add them to the hidden field

Code: (untested)

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 



        // Get all of the checkboxes checked

        $("input.member-tag-checkbox:checked").each(function() {

            var result = regExp.exec($(this).parent().text());

            if (typeof result[1] !== 'undefined') { // if has value

              memberEmail.push(result[1]);

            }

        })



        // Add to hidden

        $('.member-tag-hidden').val(memberEmail.join(', '));

});

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

add a comment |

If I understand you, I would

Grab the values

Add them to the hidden field

Code: (untested)

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 



        // Get all of the checkboxes checked

        $("input.member-tag-checkbox:checked").each(function() {

            var result = regExp.exec($(this).parent().text());

            if (typeof result[1] !== 'undefined') { // if has value

              memberEmail.push(result[1]);

            }

        })



        // Add to hidden

        $('.member-tag-hidden').val(memberEmail.join(', '));

});

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

add a comment |

If I understand you, I would

Grab the values

Add them to the hidden field

Code: (untested)

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 



        // Get all of the checkboxes checked

        $("input.member-tag-checkbox:checked").each(function() {

            var result = regExp.exec($(this).parent().text());

            if (typeof result[1] !== 'undefined') { // if has value

              memberEmail.push(result[1]);

            }

        })



        // Add to hidden

        $('.member-tag-hidden').val(memberEmail.join(', '));

});

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

If I understand you, I would

Grab the values

Add them to the hidden field

Code: (untested)

$('#blogSubmission').submit(function(){

        var regExp = /(([^)]+))/;

        var memberEmail = 



        // Get all of the checkboxes checked

        $("input.member-tag-checkbox:checked").each(function() {

            var result = regExp.exec($(this).parent().text());

            if (typeof result[1] !== 'undefined') { // if has value

              memberEmail.push(result[1]);

            }

        })



        // Add to hidden

        $('.member-tag-hidden').val(memberEmail.join(', '));

});

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

answered Nov 26 '18 at 2:05

Chris Happy

4,65811234

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg