couldn't get my input value of inputbox via javascript

Question

this is my more of my page body code, a table and a form tag,table use bootgrid plugin, although I have used modal-body class to select input tag,It didn't work.

<div id="listdata" style="overflow-y:scroll;">
        <table id="grid" class="table table-condensed table-hover table-striped">
            <thead>
                <tr>
                    <th data-column-id="SN" data-type="numeric" data-order="asc" data-identifier="true">序号</th>
                    <th data-column-id="UserName" data-order="asc">姓名</th>
                    <th data-column-id="UserAccount">账号</th>
                </tr>
            </thead>
        </table>
    </div>
    <form>
        <div id="editmodal" class="modal hide">
            <div class="modal-body">
                <div class="form-horizontal form-container">
                    <div class="form-group">
                        <label for="UserName" class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" id="UserName" name="UserName" class="form-control" placeholder="姓名" value="" />
                        </div>
                    </div>  
                </div>               
            </div>
        </div>
    </form>

function saveData() { //if (!validate()) return;

        var items = $("form:first .modal-body input");
        var json = [];

        $(items).each(function (index, item) {
            if (item.type == "text") {
                json.push({ "name": item.id, "value": item.value });
            } else if (item.type == "checkbox" || item.type == "radio") {
                json.push({ "name": item.id, "value": item.checked ? "true" : "false" });
            }
        });
    }

Please edit your question to show your JS in context. Where is the JS called from? — nnnnnn
– nnnnnn, Commented May 6, 2016 at 3:26
the above code seems fine,You should be able to get data using what you are trying with jQuery. Please see if you have duplicate IDs in your complete page. — Saurabh Tiwari
– Saurabh Tiwari, Commented May 6, 2016 at 5:38
but the IDs in table head was gennerated by bootgrid plugin script, and it was not rendered as explicit Id but data-column-id="UserName" — vicshen
– vicshen, Commented May 9, 2016 at 3:30

Banwari Yadav · Accepted Answer · 2016-05-06 06:34:26Z

1

$(document).ready(function(){
   var val1=$("#UserName").val();
alert(val1);

var val2=$("#UserAccount").val();
alert(val2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="form-group">
     <label for="UserName" class="col-sm-2 control-label">姓名:</label>
     <div class="col-sm-10">
         <input type="text" id="UserName" name="UserName" class="form-control" placeholder="姓名" value="test" />
     </div>
</div>
<div class="form-group">
    <label for="UserAccount" class="col-sm-2 control-label">账户名:</label>
          <div class="col-sm-10">
              <input type="text" id="UserAccount" name="UserAccount" class="form-control" placeholder="账户名" value="test2" />
          </div>
</div>

Working fine ...:)

answered May 6, 2016 at 6:34

Banwari Yadav

5061 gold badge3 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vicshen Over a year ago

maybe my html page is more complex than yours, it realy didn't work like this, my page has both table and form tag

vicshen Over a year ago

I'm sorry I have failed to post my full page much times,but I have edited , the body strcture is above just lack of some form items,the form content will be showed when opendialog button was clicked,and then editting input text and submitting, However I still got the empty value.

vicshen · Accepted Answer · 2016-05-11 02:22:49Z

0

Finally I find the answer, it was resulted from this line of code '', It was affected by the 'hide' class. More over, I didn't use the bootbox plugin properly, the part named 'editmodal' should be write as a param when dialog was created like this bootbox.dialog({message: 'dialog html string'}) instead of writting it in body in advance. I'm sorry for not having described my question clearly, I'm very glad to share my result with those intered in bootgrid or bootbox open source plugin.

answered May 11, 2016 at 2:22

vicshen

14 bronze badges

Collectives™ on Stack Overflow

couldn't get my input value of inputbox via javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related