0

Alright, I am a web-design noob. I am attempting to take a input field from a modal and adding that value to a table found on the main page and struggling to do so. My attempts were to write a script to this failed as I saw no result.

Here is the attempt: I've got this input field that is found in my modal(taken straight from bootstrap). I've assigned it the id="addHousemate"

<input type="text" class="form-control"  id="addHousemate" placeholder="Housemate's Name">

And here is the button I wish to submit it with.

<input type="button" class="btn btn-primary" name ="addHousemate">Submit</button>

And finally, this is the tbody in which i'd like the added input to be place.

<tbody>
   <div id="housemateTable"></div>
</tbody>

Now my attempt at writing a jquery function is as follows:

jQuery(function($){
  $('input[name="add"]').click(function() {
    value = $('input[name="addHousemate"]').val();
            $('td tr:last').after("<tr><td>" + value + "</td></tr>");
            $('input[name="addHousemate"]').val("");
   });
});

However I get no result. I also looked up using jquery append but still didn't get me anywhere. Please help!

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
  <script  language="javascript" type="text/JavaScript" src="js/jquery-1.11.0.min.js"></script>   
  <script  language="javascript" type="text/JavaScript" src="js/submit.js"></script>

<div class="container">
<div class="row">
  <div class="col-md-8">
    <div class="col-md-4">
      <div class= "table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>People of the House</th>
            </tr>
          </thead>
          <tbody>
             <div id="housemateTable"></div>
          </tbody>
        </table>
            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              Add a Housemate
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addHousemate" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add a Housemate</h4>
                  </div>
                  <div class="modal-body">
                    <form role ="form">
                      <div class="form-group">
                        <input type="text" class="form-control" id="addHousemate" name"addHousemate" placeholder="Housemate's Name">
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="button" class="btn btn-primary" name ="add" value="add">
                  </div>
                </div>
              </div>
            </div>             
      </div>
    </div>  

3 Answers 3

2

First to notice is the way you were using the selector for the input element had issues. You would want to retrieve the value from the first input element that actually holds the input text, rather than grabbing from the second input element, which is just a button.

So, I would adjust:

$('input[name="addHousemate"]').val();

to

$('input[id="addHousemate"]').val();

Plus, the way you set up the event listener was problematic:

$('input[name="add"]').click(function() {

Notice that there is no input element with the name "add". I believe that what you meant to do was:

$('button[name="addHousemate"]').click(function() {

By looking at the closing tab on the second input element:

Submit</button>

, I assume that what you meant to use was 'button' rather than 'input' for the second input element.

So, at the end, the jQuery code would look like:

$('button[name="addHousemate"]').click(function() {
    var value = $('input[id="addHousemate"]').val();
    $('tr td:last').after("<tr><td>" + value + "</td></tr>");
    $('input[id="addHousemate"]').val('');
});

Check out the working code at:

http://jsfiddle.net/yp9V6/

Enjoy web design work!

2
  • Thank sir! This worked perfectly. And thank for explaining it in layman's terms.
    – cjr
    Mar 5, 2014 at 3:08
  • However, just a slight issue and maybe just further understanding. How does it know to go into that specific table? What if I were to have multiple tables on a page?
    – cjr
    Mar 5, 2014 at 3:14
0

Problem may stem from using :last instead of :last-child in your selector

I would use the full syntax (.on()) for detecting the submission, and use submit instead of click. Then you take the value from the input and use .html to add it to the last row.

$(document).ready(function()
{

    $('input[name="addHousemate"]').on('submit',function()
    {
        var thisvalue = $('input#addHousemate').val();
        $('tr:last-child td').html(thisvalue);
    });

});

Also the code you provided for where you want the output differs massively from the code you supplied?

4
  • Even after these changes, I still so no result from clicking the submit button in my modal. Any suggestions?
    – cjr
    Mar 5, 2014 at 2:33
  • Noting that I have very little experience with this still but I think I may be doing the insert into the table wrong then? I am not sure how I even reference the table for the input. (As to your question, this is all located in 2 files, a index.html and a submit.js)
    – cjr
    Mar 5, 2014 at 2:39
  • Ah I missed that it was a button and not input type='submit', so there's no need for the e.preventDefault as it will have no default action. I'm no expert myself, but I fear there may not be enough information/context here for a specific answer
    – Luke S
    Mar 5, 2014 at 2:46
  • It may be a conflict with the name you've given the button and the id you've given the text box, as they are the same?
    – Luke S
    Mar 5, 2014 at 2:47
0

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.