Click here to Skip to main content
15,910,358 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have googled the hell out of this one and I just cant get any further forward, I have a button sitting in an ASP Formview, that calls a Bootstrap Modal that contains 2 textboxs. When the user clicks on the Enter button on the Modal it should call javascript function to transfer those 2 values to 2 ASP:Textbox's sitting on the Formview.

The JavaScript function is as follows:-

<pre lang="Javascript">
        $('#myModal').on('click', '.btn-primary', function () {
            var value = $('#chqNumber').val();
            var value2 = $('#chqAmount').val();
            $('#paymentIDTextBox').val(value);
            $('#paidAmountTextBox').val(value2);
            $('#myModal').modal('hide');
        });


The Modal looks like

HTML
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
            </div>
            <div class="modal-body">

                    <div class="form-group">
                        <label for="recipient-name" class="form-control-label">Cheque Number:</label>
                        <input type="text" class="form-control" id="chqNumber" >
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="form-control-label">Cheque Value:</label>
                        <input type="text" class="form-control" id="chqAmount">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
                <button id="paramsOkay" type="button" class="btn btn-primary">
                    Enter
                </button>
            </div>
        </div>
    </div>
</div>


What I have tried:

I have put an alert box in the javascript function and that gets the right value, I have attempted to reference the ASP:textbox by client.ID, but cant get it to even pass muster in intelisense 

<pre lang="Javascript">
mytextbox = document.getElementById("<%= paymentIDTextBox.ClientID %>");


It complains that paymentIDTextBox is not declared and may not be accessible due to its protection. I have been at this for 24 hours and really need some help ...
Posted
Comments
Richard Deeming 27-Mar-18 12:17pm    
Try setting ClientIDMode="Static" on the paymentIDTextBox and paidAmountTextBox controls.
Member 10111160 28-Mar-18 6:54am    
Richard

Thanks for this, I had totally forgotten about this, I am struggling getting this accepted by intelisense though, I have set the two controls as static and used the following in the JavaScript :-

$('<%= paymentIDTextBox.ClientID %>').val(value);

But intelisense complains that paymentIDTextBox is not declared, JavaScript really is not my strong point, so I am guessing Syntax is wrong all though I have googled other examples that seem to use the same ...
Member 10111160 28-Mar-18 7:00am    
I also tried referencing it by its rendered name :-

$('ctl00$MainContent$FormView1$paymentIDTextBox').val(value);

Still no dice on updating the target textbox
Richard Deeming 28-Mar-18 13:42pm    
The field name isn't a valid jQuery selector. You'd either need to use the ID - $("#paymentIDTextBox") - or search for the element by name - $("input[name='ctl00$MainContent$FormView1$paymentIDTextBox']")
Member 10111160 28-Mar-18 8:48am    
So I am at n impasse here the JavaScript handler now looks like



function clickHandler() {

var value = $('#chqNumber').val();
var value2 = $('#chqAmount').val();
alert(value);
alert(value2);
document.getElementById('#paymentIDTextBox').val(value);
alert("hi");
document.getElementById('#paidAmountTextBox').val(value2);
document.getElementById('#testbox').val(value2);
alert(document.getElementById('#paidAmountTextBox').val);
$('#exampleModal').modal('hide');
}



The first 2 alert(); show the correct values that were entered into the modal's 2 textboxes, still nothing dumped into the 2 target Textboxes though, odly anything after document.getElementById('#paymentIDTextBox').val(value); in the handler fails to execute. alert("hi"); does not come up at all!

I put a textbox outside the Formview and moved the code alert(document.getElementById('#paidAmountTextBox').val); up to just below the first 2 alert() and that didn't work.

I am totally lost on what I thought would be so simple ....

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900