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>
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>
3 Answers
Reset to default 2First 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/yp9V6/
Enjoy web design work!
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?
<!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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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">×</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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745038602a4607674.html
评论列表（0条）