Hot to get value from bootstrap popup to main page and set the value into a input element

Question

5.00/5 (1 vote)

See more:

Please excuse me, I'm an absolute beginner in MVC/HTML/bootstrap/JQuery and need help. I have found many articles on the Web, but I did not manage to solve my problem. I want to open a popup, where i can write a small text, close the popup with the "save" button, read the value and put it into the textfield in the main page.
I appreciate any help. here is my code:

HTML

<script src="~/Scripts/jquery-2.1.4.js"></script>

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function (e) {
        //get value from #myPopupInput and set the value to #myMainPageInput
    })
</script>

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">open popup</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                input in popup:
                <input type="text" class="form-control" id="myPopupInput" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close (do nothing)</button>
                <button type="button" class="btn btn-primary">Save changes (but popup does not even close)</button>
            </div>
        </div>
    </div>
</div>
<br />

input in main page: 
<input type="text" class="form-control" id="myMainPageInput" />

Posted 3-Jun-15 4:48am

petroT

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-06-03T05:15:00

A Bootstrap modal is part of the same page, so you should be able to do something like this:

JavaScript

$('#myModal').on('hidden.bs.modal', function (e) {
    var value = $('#myPopupInput').val();
    $('#myMainPageInput').val(value);
});

NB: If you only want the code to run when the "Save changes" button is clicked, then you'll want to attach the handler to the click event of that button instead:

JavaScript

$('#myModal').on('click', '.btn-primary', function(){
    var value = $('#myPopupInput').val();
    $('#myMainPageInput').val(value);
    $('#myModal').modal('hide');
});