Close Bootstrap Modal On Submit with Django - javascript

I have been through pretty much every post on this forum and have not been successful at getting my modals to close after submission. data-dismiss does not work since it stops the submission before it starts. Using JavaScript code within the base html page also has not worked. Examples of posts that I have tried are here and here.
My code is below. Any recommendations are appreciated. Submission is working. Modal just will not close. See modal "getAPI" below for example.
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="spacer">
</div>
<div style="padding-left:20px;">
<button type = "button" class="btn" data-toggle="modal" data-target="#filetypeModal">Get Device Data</button>
</div>
<!-- File Type Modal -->
<div class="modal fade" id="filetypeModal" tabindex="-1" role="dialog" aria-labelledby="filetypeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form action="" method="post">
{% csrf_token %}
<div class="modal-header" style="background-color: darkblue; color: white">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: white">×</button>
<h4 class="modal-title" id="filetypeModalLabel">File Types</h4>
</div>
<div class="modal-body" style="text-align: center;">
Choose file type to download.<br>
<br>
<label class="radio-inline"><input type="radio" name="choices" value="Excel" checked>Excel</label>
<label class="radio-inline"><input type="radio" name="choices" value="CSV">CSV</label>
</div>
<div class="modal-footer" style="background-color: darkblue;">
<input type="submit" class="btn btn-primary" id="getAPI" value="OK" name="getAPI"></input>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$("#getAPI").submit(function() {
$("#filetypeModal").modal("hide");
});
</script>

Something that might be of benefit:
Create button as proposed:
<button type="button" id="closeModal" class="btn btn-danger" data-dismiss="modal">Close</button>
and use
$("#getAPI").submit(function() {
$("#closeModal").click(event =>{
alert('Success');
});
});

You should declare form id on form element not in button and it should work.
<form id="getAPI">
[...]
</form>
And declare button type to submit to declare it as submit button to catch submit event.
<button type="submit" .....>Save</button>
In JavaScript, you should prevent default form submission.
<script>
$("#getAPI").submit(function(event) {
$.ajax({
url: '/', // your url endpoint
type: 'POST',
data: $('#getAPI').serialize(), // gather form data
success: function(data) {
console.log(data);
$("#filetypeModal").modal("toggle"); // Use toggle to close modal
} // end success callback
}); // end ajax call
event.preventDefault(); // prevent default submission
});
</script>
If you are handling form submit using jQuery event, form method type and action url in <form> element is redundant unless you are using DOM somewhere.

Related

How to create a confirm box?

I want to create a confirm box before insert any information on my database
I want to get a confirm message on clicking Add. If the user selects 'Ok' then Add is done, else if 'Cancel' is clicked nothing happens.
this is my html5 code
<script>
var option = "êtes-vous sûr de vouloir ajouter ce RDV?";
$('#btnAdd').on('click', function(e){
confirmDialog(option, function(){
//My code to Add
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add RDV</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED --><div class="modal-body">
<form method="post" id="insert-form">
<label>Nom</label>
<input type="text"id="name" class="form-control" required/>
<label>Prenom</label>
<input type="text"id="lname" class="form-control" required/>
<label>Date</label>
<input type="text"id="date" class="form-control" required/>
<label>Heure</label>
<input type="text"id="heure" class="form-control" required/>
</form>
</div>
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnAdd"> Add</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"style="background-color:green;color:white;text-align:center">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" >Confirmation!</h4>
</div>
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="confirmOk">Ok</button>
<button type="button" class="btn btn-danger" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
my php code is in the same page with my html and javascript code how shall i pricise to javascript which code need to execute
You aren't adding the event listeners:
$("#confirmOk").one('click', onConfirm);
It should be:
$("#confirmOk").on('click', onConfirm);
Also, onConfirm function is undefined.

bootstrap modal disappearing

I am having issues creating a module where it displays if the submission is valid (based on factors outside of the code- ex. the length of a string is acceptable).
When everything passes the test submits and then the modal pops up but disappears in about .5 seconds. Is there a way to make it stay longer?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button>
</div>
</form>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" 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" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>
Load jquery(.min).js before bootstrap(.min).js.
As a rule of thumb, don't expect files from different versions of the same library/plugin to work well together. You are using Bootstrap .css from v.3.7.7 and .js from version v3.1.0.
Working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">
Your changes have been submitted and updated!
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
</button>
</div>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Submit
As you can see, I'm using your code in the above example, linking the required dependencies in their correct order and the modal doesn't go away.
If this doesn't help you, you'll need to reproduce the bug here so we could pinpoint its source.
Edit, based on addition to question: Your modal does not disappear. It is dumped by browser, together with the page, because you are submitting a form simultaneously with displaying the modal. Submitting the form causes your page to refresh the page in its entirety. You need to:
Prevent conventional form submission:
$('form#user').submit( function(e){
e.preventDefault();
// send your data here in an $.ajax()
})
send the data async (via $.ajax()) and parse the result into your existing page.
For help on how to do that, see this question - and its answers.
Below is the solution with the explanation.
HTML Form Submission has a set process that cannot be modified. We can stop the default form submission action and use our script instead.
HTML Form Submission Process
HTML Form has an Action file defined with the form itself in action along with method and other attributes.
This ensures that once the form is submitted, the browser will move to the action file and process based on the HTML Form Input values. Since the browser is moving away from the Form page, therefore any UI object on the Form page will end immediately.
In your case, you are not supposed to move away from the page. Instead you have to prevent the default Form Submit action and use Ajax call to process user input via an external file and then show the result. Below is the code that works and also displays the entered Username in the Modal Title.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="faviconmoney.ico"/>
<meta charset="utf-8">
<title>Employee Info</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul class="nav nav-pills">
<li role="presentation" class="active">Expenses</li>
<li role="presentation">Employee Data</li>
<li role="presentation">Logout</li>
</ul>
<hr />
</div>
<div>
<form role="form" method="post" id="user">
<div class="col-md-4">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username" value="${user.uUserName}">
</div>
<div class="form-group">
<label for="first name">First Name:</label>
<input type="text" class="form-control" id="first name" name="firstname" value="${user.uFirstName}">
</div>
<div class="form-group">
<label for="last name">Last Name:</label>
<input type="text" class="form-control" id="last name" name="lastname" value="${user.uLastName}">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" value="${user.uEmail}">
</div>
<!-- <button type="submit" class="btn btn-default" id="modelSubmit1" a href="#myModal" data-toggle="modal" datatarget="#myModal">Submit</button> -->
<button type="submit" class="btn btn-default" id="modelSubmit1">Submit</button>
</div>
</form>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" 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" id="myModalLabel">
Username Entered is <strong><span id="username_value">UserName</span></strong>.
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$('form#user').submit( function(e){
e.preventDefault();
var username = $('#username').val();
var dataString = "username="+username;
// $('#myModal').modal({ show: false});
$.ajax({
type: "POST",
url: "form-submission.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#username_value").html(html);
$('#myModal').modal('show');
}
});
});
</script>
</body>
</html>
Note that I have used <span id="username_value"> to display the entered text in the middle of an HTML text.
Below is the code of external PHP file that you can use to process data entered. Which means, the modal will only show once the entry is processed successfully.
<?php
if ($_POST) {
$username_value = $_POST['username'];
echo $username_value;
}
?>
Hope this helps.

Varying modal content based on trigger button

I am using http://getbootstrap.com/javascript/#modals-related-target, however, when I use the code in my own project the function does not work. I am very new to this so it is probably something simple.
Here is my code: http://hastebin.com/comikucidi.xml
Thank you.
Edit:
Just created a brand new document and copied the bootstrap page. The function still is not working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap - Prebuilt Layout</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
You're trying to attach the handler to a non existing id, try to use the id of your modal :
$('#delete').on('show.bs.modal',
instead of #exampleModal.
EDIT:
You should also add
$(document).ready(function () {
//your code here
});
around your code, to attach your handler after the element is properly created.
Put the script at the end of jQuery library calls likes this:
jQuery (necessary for Bootstrap's JavaScript plugins)
[here]
$('#exampleModal').on('show.bs.modal', function (event) {...}
If you do this, it works!

How to display an Alert in Bootstrap Modal

$(window).load(function(){
$('.alertbox').click(function(){
alert('You Clicked on Click Here Button');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<div>
<a class="alertbox" href="#clicked"> Click Here</a>
</div>
I want the alert to be displayed in the bootstrap Modal.
Create the error div in modal body. and set error
$(document).ready(function(){
$('#alertbox').click(function(){
$("#error").html("You Clicked on Click here Button");
$('#myModal').modal("show");
});
});
<!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.2.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" id="alertbox">Click here</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 id="error"></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>
Probably I didn't understood your question correctly, but you can't use the alert function to display a message insidea a page element. Alert displays a system alert outside the page dom.
If you want to display a message inside a modal you have to include (or inject) the modal markup in your page html, then you simply show/hide the modal via bootstrap functions.
You have a very good example here

Taking Text from a modal input field and placing it into a table

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

Categories