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">×</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>