i try to get dropdown text value from bootstrap modal, when i call val() it done nicely, but when i call text() to retrieve dropdown text, it is returning stack of dropdown text
this my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".category-modal">Select Category</button>
<!-- hidden fields to store modal result in -->
<div class="form-group">
<label for="main-pages" class="col-lg-4 control-label">this should contain index from page dropdown : </label>
<input type="text" id="main-pages">
</div>
<div class="form-group">
<label for="main-sub-pages" class="col-lg-4 control-label">this should contain text from sub-page dropdown : </label>
<input type="text" id="main-sub-pages">
</div>
<div class="modal fade category-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form method="post" action="" class="form-horizontal">
<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="myModalLabel">Category</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="text-center">
<h4>Pages</h4>
</div>
</div>
<div class="col-lg-4">
<div class="text-center">
<h4>Sub Pages</h4>
</div>
</div>
<div class="col-lg-4">
<div class="text-center"></div>
<h4></h4>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<select id="pages" name="pages" class="form-control" size="6">
<option value="1">Hello</option>
<option value="2">Kon'nichiwa</option>
<option value="3">Assalamualaikum</option>
<option value="4">Annyeonghaseyo</option>
<option value="5">Ciao</option>
</select>
</div>
<div class="col-lg-4">
<select id="sub-pages" name="pages" class="form-control" size="6">
<option value="1">Hello</option>
<option value="2">Kon'nichiwa</option>
<option value="3">Assalamualaikum</option>
<option value="4">Annyeonghaseyo</option>
<option value="5">Ciao</option>
</select>
</div>
<div class="col-lg-4">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login()">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val($("#sub-pages").text());
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages").val());
console.log('sub-page : '+$("#main-sub-pages").text());
});
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
note : you need to move the cursor on second text input to see dropdown text
Change
console.log('page : '+$("#main-pages").val());
console.log('sub-page : '+$("#main-sub-pages").text());
To This
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
solved!!
this is the solution
change this line
<script type="text/javascript">
//called when user clicks login
function login() {
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val($("#sub-pages").text());
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
to this
<script type="text/javascript">
//called when user clicks login
function login() {
var subPagesSelect = document.getElementById("sub-pages");
var selectedText = subPagesSelect.options[subPagesSelect.selectedIndex].text;
$("#main-pages").val($("#pages").val());
$("#main-sub-pages").val(selectedText);
$(".category-modal").modal("hide");
}
$('.category-modal').on('hidden', function() {
console.log('page : '+$("#main-pages :selected").val());
console.log('sub-page : '+$("#main-sub-pages :selected").text());
});
</script>
why i got all dropdown content, because what i call was an object not content of that object Correct me if im wrong
Related
all I am trying to show the calendar and input box when the user clicked on the radio button.
I have made one modal popup by using below code and
when I click on the send button it will open a modal popup with two radio buttons and when I click on the close popup with a reminder
button it will show calendar as well as input box.
Here is my code:
<!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">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</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">
<input type="radio" name="reminder">Close popup with reminder </br>
<input type="radio" name="reminder">Close popup without reminder
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone help me out how can I do that.
Here is the image reference
:
Make use of the bootstrap grid inside the modal then add change events to the radio button; if the radio button has a true value, it would show the .note div which contains the reminder, else hide it.
<!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">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</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">
<div class="row">
<div class="col-xs-6">
<input class="radio-reminder" type="radio" name="reminder" value="true" /> Close popup with reminder
</div>
<div class="col-xs-6 date" style="display:none;">
<input class="form-control" type="date" />
</div>
</div>
<div class="row note" style="display:none;">
<div class="col-xs-12">
<br>
<input class="form-control" placeholder="Reminder" />
</div>
</div>
<div class="row no-reminder">
<div class="col-xs-6">
<br/>
<input class="radio-reminder" type="radio" name="reminder" value="false" /> Close popup without reminder
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".radio-reminder").change(function() {
if ($(this).val() == "true") {
$(".note").show();
$(".date").show();
$(".newSelect").remove();
} else {
$(".note").hide();
$(".date").hide();
var newSelect = $("<div class='col-xs-6 newSelect'><br><select class='form-control'><option>1</option><option>2</option></select></div>")
$(newSelect).appendTo($(".no-reminder"));
}
});
});
</script>
</body>
</html>
At first, you have to include the input elements in the HTML. Then you can use jQuery to hide/show those elements based on the value of the clicked radio button.
Please note that how I have added value attribute to the radio buttons.
$('input[name=reminder]').click(function(){
if($(this).val() == "1")
$('#inputDate, #inputText').css({'display': 'block'});
else
$('#inputDate, #inputText').css({'display': 'none'});
});
input[type=date]{
float: right;
}
#inputDate, #inputText{
display: none;
}
<!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">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</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">
<input type="radio" name="reminder" value="1">Close popup with reminder <input type="date" id="inputDate"/>
<br>
<input type="text" id="inputText"/>
<br>
<input type="radio" name="reminder" value="2">Close popup without reminder
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
use below code snippet
$('input[type=radio]').on('change', function() {
if($(this).val() == 'calendar'){
$('#date-input').show();
$('#calendar').show();
$('#selectGroup').hide();
}else{
$('#date-input').hide();
$('#calendar').hide();
$('#selectGroup').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.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">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send</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">
<input type="radio" name="reminder" value="calendar"> Close popup with reminder
<input type="date" id="calendar" style="display: none;" />
<br/>
<input type="text" value="" id="date-input" style="display: none;" />
<br/>
<input type="radio" name="reminder"> Close popup without reminder
<br/>
<div class="form-group" id="selectGroup" style="display: none;">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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.
I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/
This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
Use bootstrap table instead of cols check this fiddle
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
function add_course()
{
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#modal_form').modal('show'); // show bootstrap modal
$('#modal_form').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen('destroy').chosen();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<button class="btn btn-success" onclick="add_course()"><i class="glyphicon glyphicon-plus"></i>Add Course</button>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Course Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="train_ID" />
<div class="form-body">
<div class="col-md-9">
<div class="side-by-side clearfix">
Select Department:
<select name="empdept[]" data-placeholder="Choose department..." class="chosen-select" multiple style="width:350px;" tabindex="4">
<option value="IT">IT</option>
<option value="Finance">Finance</option>
<option value="Production">Production</option>
<option value="HR">HR</option>
</select>
</div>
<span class="help-block"></span>
</div>
</div>
<!-- /.modal -->
<!-- End Bootstrap modal -->
Hi guys please help me to solve this.
I have a chosen select on a bootstrap modal it works fine
but after I choose an item it disappear .
Heres my screenshot when modal loaded
and heres what happened after I select it disappear
Heres my code :
It is working here but on my website it doesn't work ..
This question have many answers out there but none of those answers solved my problem. I have a modal with some <select> tags. I am trying to save the values from the select options. after they click Save the modal should close but not submit the result yet because the user still need to review stuff after they click save on the modal.
HTML
<!-- Modal -->
<div id="1" class="modal fade" 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">
//select tags go here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button>
</div>
</div>
JS
$('#save').click(function() {
$('#1').modal('hide');
});
Since my code is really long, I just copied a modal from google but I added my Save button, so this is the real Save button that my modal is using.
Thanks
EDIT
I changed the id number to letters so now the code doesn't include any id starting with number, thanks.
PS still need help =/
EDIT
I also tried this one and it did not work
$(document).ready(function(){
$('#save').click(function(){
$('#modal_1').modal('hide');//modal_1 is the id 1
});
});
HTML
<div id="someModalId" class="modal fade" 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">
<select id="exampleSelect">
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button>
</div>
</div>
JS
$('#save').click(function() {
$select_value = $("#exampleSelect").value();
$('#someModalId').modal('hide');
});
Give your select a name or id
Set the value of select to a global variable. Make sure to declare the variable at the top if you are getting an error.
I'm not sure the id=1 is fine, but you can use this code to simulate a click on the close button (or you can add an id or a class to it).
You may have to remove the onclick="save()"
data = {};
$("#save").on("click", function(e){
e.preventDefault(); // prevent de default action, which is to submit
// save your value where you want
data.select = $("#exampleSelect").value();
// or call the save function here
// save();
$(this).prev().click();
});
<button id="save" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details" onclick="save()" data-toggle="modal" data-target="#myModalList" data-dismiss="modal">Save</button>
this worked very well for me, and its a simple way to do it. after the onclick I used the data-toggle, data-target and data-dismiss
in the js function save() I didn't need to code anything but to save data into to my database
// Insere notas na base de dados
function save() {
console.log("func guardar");
if ($("#message-text").val() == "") {
alert("Texto vazio");
} else {
$(document).ready(function () {
$.ajax({
method: "POST",
url: "../portal/portalphp/notas.php",
data: {
num: num,
text: $("#message-text").val()
}
}).done(function (msg) {
if (msg == 1) {
//alert("Nota guardada com sucesso");
readyNotas(num);
console.log("func guardar done == 1");
} else {
alert("Erro: não foi possivel guardar");
}
});
texto.value = "";
});
console.log("func guardar ready");
}
}
First, you need to remove onclick="save()" from your button. You don't need that when you are using the on click function directly $('#save').click(function()...
As was pointed out in the comments by #Eshwaren, you can't use a number to start an id, so you need fix that as well.
To get the value from a select, you have to be able to identify it. A simple solution would be to give your select element an ID.
For example:
<div class="modal-body">
<select id="data_1">
</select>
</div>
In your code, you can then assign the value of the select element to a variable.
For example:
var data_1;
$('#save').click(function() {
data_1 = $("#data_1").value();
$('#modalid').modal('hide');
});
You can then use that variable elsewhere in your code.
There are many more possibilities for solving this, but the root of the issue is being able to identify the select elements in code and recording their respective values.
thats my modal window
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Column Preferences",
button: "save",
width: 750,
height: 620
});
try this to close or hide the window
$('#dialog').dialog('close');
I finally got this working with a hint from Ricardo Almeida:
<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>
# form fields entered here
<div class="actions">
<%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>
<script>
function submit_form() {
document.getElementById('friend_email_form').submit();
}
</script>
just add 'data-dismiss="modal"' when click save
example:
<!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.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<!-- Button trigger modal -->
<button type="button" id="test2" class="btn btn-primary" data-toggle="modal" data-target="#test">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="test" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>