CODEWITHSUNDEEP
jquerytwitter-bootstrap
user3566769
user3566769

Reputation: 267

Cannot update attribute inside a modal section by onclick function

Hi I am trying to update a image inside a modal function. However, I am not able to do it. Here is my HTML code:

<div class="startorder">

<span class="btn btn-lg btn-block btn-success startorderbtn" data-toggle="modal" data-target="#verification" onclick="GetNewCaptcha()" >StarOrder   </span>
            </div>


        <!-- Div for user input table_id and captcha -->
        <div id="verification" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">请输入您的口令</h4>
              </div>
              <div class="modal-body">
                 <form class="form-horizontal" role="form">


                   <div class="form-group"> 
                        <!--get captcha pic-->
                     <div class="col-xs-12">
                        <img class="captcha-img" onclick="GetNewCaptcha()" src="" />
                     </div>
                   </div>
                   <div class="form-group"> 
                     <div class="col-xs-12">
                       <button type="submit" class="btn btn-block btn-info" onclick="SubmitVerification()">提交</button>
                     </div>
                   </div>
                 </form>
              </div>
            </div>

          </div>
        </div>

When I click "starorder" in the top, the modal "verification" will show up. I am trying to load a image which is inside the modal. The class of image is "captcha-img"

Here is my JS code:

function GetNewCaptcha() {
    $('.captcah-img').data("src", "http://127.0.0.1:8000/static/order/img/1.png");
}

Looks like the GetNewCaptcha() function is not triggered.Is there anything special about modal?

Upvotes: 0

Views: 124

Answers (1)

John R
John R

Reputation: 2801

Please check the spelling of your class name. I think it must be captcha-img not .captcah-img

function GetNewCaptcha() {
    $('.captcha-img').data("src", "http://127.0.0.1:8000/static/order/img/1.png");
}

You can also use attr method.

function GetNewCaptcha() {
    $('.captcha-img').attr("src", "http://127.0.0.1:8000/static/order/img/1.png");
}

Upvotes: 1

Related Questions