javascript - Change form input field value with jquery within a bootstrap modal - Stack Overflow

admin管理员组

文章数量:1304184

I have a form within a bootstrap modal. I would like the input fields to display the past values that the user entered the first time they filled out the form, which I am retrieving from a cloudant database. I would like these input fields to be editable so that the user can resubmit the form with any changes they may have. However, I am stuck when trying to display the past information in the input fields. I can't find any reason why these value of the input fields are not being changed.

The javascript that adds my buttons to my boostrap list-group:

var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
    {

        var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
        $('#iot-list').append(button);
    }
};

The html where my button will be placed within my list-group:

<div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
                <button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
                <p class="fancy-font dash-item-title">Your IoTs</p>
                <button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
                <div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>

            </div>...

The modal that pops up when clicking a button:

<div class="modal fade" id="quick-view-iot-modal">
  <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">&times;</span>
    </button>
    <h4 class="modal-title" id="quick-view-iot-h4"></h4>
  </div>
  <div class="modal-body">
        <form id="edit-iot-form" method="post">
        IoT Name: <br>
        <input type="text" name="iot-name" class="iot-value" required><br>
        Organization ID: <br>
        <input type="text" name="org-id" class="iot-value" readonly required><br>
        Authentication Method: <br>
        <input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
        API Key: <br>
        <input type="text" name="api-key" class="iot-value" readonly required><br>
        Authentication Token: <br>
        <input type="text" name="auth-token" class="iot-value" readonly required><br>
        </form>
        <button name="more" type="button" class="fancy-font page-button">More</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

The javascript that adds the content to modal. It is within a main method that is called when document is ready:

 $('.iot').click(
    function()
    {
        var iotName = event.target.name;
        getIots(loadIotQuickView, iotName);
        $('h4#quick-view-iot-h4.modal-title').text(event.target.name);


    });

The getIots() function: (it includes parameter variable=null because I also use it in another part of code where the varaible parameter is not used. This method sends an ajax post to a servlet, which then responds with an array of iot objects)

var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
     {
        iotsJSON = response;

        callback(response, variable);
     });

The loadIotQuickView() function: (This is where I believe I am getting problems)

var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;

for(var iot in iotsJSON)
{
    if(iotsJSON[iot].appID = iotName)
        currentIoT = iotsJSON[iot];

}
if(currentIoT == null)
    return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);


};

I've tried numerous jquery selectors but none of the input field values within the form will change. I've stepped through the code and all of my variables have the correct values that its just the last line that's not executing how I want. I am unsure if there is an issue with my jquery selector or if it is something else. Thanks in advance!

UPDATE: I've tried the following selectors:

$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]') 

I've also tried adding an id of "edit-iot-name" to my input field:

$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')

But none of these have worked, which leads me to believe that it must not be an issue with my selector.

UPDATE:

I've also tried using .val(currentIoT.appID) with all of the previous selectors. Still not working.

I have a form within a bootstrap modal. I would like the input fields to display the past values that the user entered the first time they filled out the form, which I am retrieving from a cloudant database. I would like these input fields to be editable so that the user can resubmit the form with any changes they may have. However, I am stuck when trying to display the past information in the input fields. I can't find any reason why these value of the input fields are not being changed.

The javascript that adds my buttons to my boostrap list-group:

var loadIotPanel = function(iotsJSON)
{
for(var iot in iotsJSON)
    {

        var button = $('<button/>').text(iotsJSON[iot].appID).addClass('list-group-item iot').attr({name:iotsJSON[iot].appID, "aria-label": "Quick View IoT", "data-toggle": "modal", "data-target": "#quick-view-iot-modal", type: "button"});
        $('#iot-list').append(button);
    }
};

The html where my button will be placed within my list-group:

<div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12 dash-col">
                <button name="edit-iots" aria-label="Edit IoTs" data-toggle="modal" data-target="#edit-iots-modal" type="button" class="icon"><span class="glyphicon glyphicon-edit gray"></span></button>
                <p class="fancy-font dash-item-title">Your IoTs</p>
                <button name="add-iot" aria-label="Add IoT" data-toggle="modal" data-target="#connect-iot-modal" type="button" class="icon"><span class="glyphicon glyphicon-plus gray"></span></button>
                <div class="list-group iot" id="iot-list"><!-- buttons will be placed here --></div>

            </div>...

The modal that pops up when clicking a button:

<div class="modal fade" id="quick-view-iot-modal">
  <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">&times;</span>
    </button>
    <h4 class="modal-title" id="quick-view-iot-h4"></h4>
  </div>
  <div class="modal-body">
        <form id="edit-iot-form" method="post">
        IoT Name: <br>
        <input type="text" name="iot-name" class="iot-value" required><br>
        Organization ID: <br>
        <input type="text" name="org-id" class="iot-value" readonly required><br>
        Authentication Method: <br>
        <input type="text" name="auth-method" class="iot-value" value="apikey" readonly><br>
        API Key: <br>
        <input type="text" name="api-key" class="iot-value" readonly required><br>
        Authentication Token: <br>
        <input type="text" name="auth-token" class="iot-value" readonly required><br>
        </form>
        <button name="more" type="button" class="fancy-font page-button">More</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

The javascript that adds the content to modal. It is within a main method that is called when document is ready:

 $('.iot').click(
    function()
    {
        var iotName = event.target.name;
        getIots(loadIotQuickView, iotName);
        $('h4#quick-view-iot-h4.modal-title').text(event.target.name);


    });

The getIots() function: (it includes parameter variable=null because I also use it in another part of code where the varaible parameter is not used. This method sends an ajax post to a servlet, which then responds with an array of iot objects)

var getIots = function(callback, variable=null)
{
var iotsJSON = null;
$.post("DashboardServlet", {loadIotPanel: "true"}, function(response)
     {
        iotsJSON = response;

        callback(response, variable);
     });

The loadIotQuickView() function: (This is where I believe I am getting problems)

var loadIotQuickView = function(iotsJSON, iotName)
{
var currentIoT = null;

for(var iot in iotsJSON)
{
    if(iotsJSON[iot].appID = iotName)
        currentIoT = iotsJSON[iot];

}
if(currentIoT == null)
    return;
$('.iot-value[name="iot-name"]').attr("value",currentIoT.appId);


};

I've tried numerous jquery selectors but none of the input field values within the form will change. I've stepped through the code and all of my variables have the correct values that its just the last line that's not executing how I want. I am unsure if there is an issue with my jquery selector or if it is something else. Thanks in advance!

UPDATE: I've tried the following selectors:

$('.iot-value[name="iot-name"]')
$('input[name="iot-name"]')
$('.iot-value')
$('#connect-iot-modal').find('input[name="iot-name"]') 

I've also tried adding an id of "edit-iot-name" to my input field:

$('#edit-iot-name')
$('#connect-iot-modal #edit-iot-name')

But none of these have worked, which leads me to believe that it must not be an issue with my selector.

UPDATE:

I've also tried using .val(currentIoT.appID) with all of the previous selectors. Still not working.

• javascript
• jquery
• ajax
• twitter-bootstrap
• bootstrap-modal

Share Improve this question Follow edited Aug 16, 2016 at 19:55 atjoedonahue 48477 silver badges1919 bronze badges asked Aug 15, 2016 at 19:03 Kennedy VoorheesKennedy Voorhees 8311 gold badge22 silver badges88 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I'm not sure why, but adding the id of the modal that my form is in, which is #quick-view-iot-modal, to my selector worked. However for some reason it only works when I use .val() and not when I use .attr(). So the final result is:

$('#quick-view-iot-modal #edit-iot-name').val(currentIoT.appID);

I'm not sure why it is required to add the id of the modal, and I'm not sure why it doesn't work like this:

$('#quick-view-iot-modal #edit-iot-name').attr("value",currentIoT.appID);

But it works! If anyone knows why it only works with this bination, please let me know!

try:

$('.iot-value[name="iot-name"]').val(currentIoT.appId);

Your selector is pretty weird as well. why not just refer to the input by name?

$('input[name="iot-name"]').val(currentIoT.appId);

In your code here:

$('.iot-value[name="iot-name"]')

"iot-name" is a string literal, and it will not evaluate to the value of your iot-name variable.

I'm guessing that you are looking to use the variable's value in your selector, which would look like this:

$('.iot-value[name="' + iot-name + '"]')

I have been struggling with this problem for 3 hours. The realisation that you must reference the object through the modal div is the winner.

I was trying to do 2 things:

1. populate the href in an <a> button on my modal
2. set the value of another field using an onChange()

so I end up with:

$("#modal-form #linkbtn").attr("href", url);
$('#modal-form #inputfield").val(newVal);

Thanks so much for this hint.

LISTEN! i've got a good solution for all of you guys!

$("#exampleModal").modal("show");

    $(function () {
  $("#exampleModal #ticket_id").val("your_value_variable");
});

try this way after you load your modal show it then use DOM ready event then set your value to it input text and amazingly it works! this is the easiest and simplest way from me

本文标签： javascriptChange form input field value with jquery within a bootstrap modalStack Overflow