How to set a value of hyperlink text from a hyperlink to a hidden field on a jQuery dialog pop-up when user clicks on that hyperlink?

Question

I'm using PHP, Smarty, jQuery(jquery-1.7.1.min.js), Javascript, AJAX, etc. in my website. Now there are multiple hyperlinks containing different question ids are present on my webpage. For instance I'm showing the HTML code for one hyperlink as follows:

<a class="que_issue" href="#">QUE38552</a>
<!--There are many other hyperlinks are present on the same page with different question ids.-->

Now I've HTML code for a dialog pop-up on the same web page which is set to style="display:none;" in a div when page loads. This is done to hide the dialog box when the page loads. When user clicks on any of the hyperlinks the dialog pop-up appears. The script for this functionality is working fine. The HTML of the dialog pop-up is as follows:

<div id="searchPopContent" class="c-popup" style="display:none;">
  <div id="pop-up">
  <div class="error_msg" id="report_error" style="text-align:center; margin-top:5px;">

    </div>
    <div class="clear"></div>
    <form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="question_issue.php">
      <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
      <input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
      <input type="hidden" name="op" id="op" value="question_issue"/>
      <input type="hidden" name="question_id" id="question_id"/>

      <table class="trnsction_details" width="100%" cellpadding="5">
        <tbody>    
          <tr>
            <td></td>
            <td>
              <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>             
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
          </tr>
          <tr>
            <td></td>
            <td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="submit" value="Submit" class="report_question_issue" class="buttonin"/></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>

Now my issue is I'm not able to set the value of question id clicked to a hidden field(having id="question_id" ) on a dialog pop-up. I tried following script for doing it but it didn't worked. Following is the Javascript code I tried:

$(document).on("click","a[class='que_issue']", function (e) {
var x = this.innerHTML;
  var str = x.substring(3);
document.getElementById("question_id").value = str;
});

Following is the jQuery code I tried:

$('.que_issue').click(function(e){
 e.preventDefault();
 $('#question_id').val($.trim($(this).text()).substring(3));
});

Both of the above code didn't wor for me. But when I removed the line style="display:none;" from the dialog pop-up's div the dialog pop-up displays at the bottom of the page and when I click on specific question id, the question id also gets set to the hidden field at the form appearing at the bottom of the page. But still the hidden field on a dialog pop-up the value didn't set. I'm totally clue-less after trying every possible thing and googling. Can anyone please help me in this regard please? Thank you so much for spending some of your valuable time and understanding my issue. Thanks once again. If you want some more information regarding my issue I can provide you the same.

Answer 1

设置ID之前，请将其传递给var。

Answer 2

If you want to add the value attribute, then use:

$('.que_issue').click(function(e){
    e.preventDefault();
    $('#question_id').prop("value", $.trim($(this).text()).substring(3));
    console.log($.trim($(this).text()).substring(3));
    console.log($('#question_id').val());
});

Check the console to make sure the value is being printed twice. Fiddle