i have modal using form selection ajax with submit button
modal code
<div class="modal-body">
<div class="row" id="modal-body">
<div class="col-md-12">
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="project-loa" class="col-sm-4 control-label">Select Project</label>
<div class="col-sm-8">
<select id="project-load-modal" class="form-control" name="proj_name" style="width: 100%">
</select>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Download</button>
</div>
my value selection option is fine
controller
public function generate(){
$proj_name = $this->input->get('proj_name');
echo $proj_name;
}
i want get value from my selection form using controller.
when the submit is click, i get nothing in my console. what i do wrong?
//give id to submit button button_id
$("#button_id").on('click', function () {
var proj_name = $("#project-load-modal").val();
$.post(base_url + 'generator_url'+proj_name, function (response) {
if (response.code == '1') {
//message if you want to show
} else {
//message if you want to show
}
});
}
//make route
$route['generator_url/(:any)']='ControllerName/generate/$1';
Add action and method attribute to form element
<form class="form-horizontal" action="<?php echo base_url().'C_MRCR_A/generate'; ?>" method="get">
Take submit button inside the form element.
<button type="submit" class="btn btn-primary">Download</button>
</form>
Related
My submit button suddenly stopped working. It submits data into a MySQL database.
While I was doing some design changes, it suddenly stopped working.
Are there any apparent errors/mistakes in the code below?
I'm a noob who's currently trying to learn some PHP and so on, so any help would be much appreciated. :)
<section id="moviesearch">
<!-- Section -->
<div class="subcribe2">
<div class="container">
<!-- Container -->
<div class="row">
<!-- Row -->
<div class="col-md-4">
</div>
<body ng-app="myApp">
<div ng-controller="MyCtrl" class="col-md-4">
<form class="form-watch-list-create">
<input required="required" placeholder="Movie title" type="text" class="form-control" typeahead="item.Title for item in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-min-length="2" typeahead-wait-ms="1000" typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html" ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</body>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query" style="width: auto;"></span>
({{match.model.Year}})
<!-- <img ng-src="{{match.model.Poster}}" width="120"> -->
</a>
</script>
<div ng-controller="MyCtrl">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
</section>
Edit
Here's the code that sends data into the MYSQL database:
function addWatchList() {
if (isset($_GET['addtowatchlist'])) {
$name = $_GET['name'];
$conn = dbmysql();
$query ="INSERT INTO watch_list values(null,'{$name}','{$_SESSION['user_id']}','NOW()')";
if (mysqli_query($conn,$query)) {
$last = "SELECT * FROM watch_list WHERE created_by = '{$_SESSION['user_id']}' order by id desc limit 1";
$data = mysqli_query($conn,$last);
while ($row = mysqli_fetch_assoc($data)) {
include "_view.php";
}
}else {
echo "An error occurred. Please try again.";
}
exit;
}
}
I am looking to your code, missing attribute action="somefile.php" and method="get" if you are planning on submitting it using the form, you should put it or if you are planning on submitting your code using javascript you can use <form onsubmit="myFunction()"> That is what you are missing. I am not seeing you addtowatchlist name from your input so that php can catch it to your isset.
The submit button isn't inside the form.
You're missing the </form> tag to end the <form>. But you have </div> that matches the <div> just before </form>, so it's implicitly closing the <form> tag as well. Then you have <input type="submit"> after it. Since the submit button isn't inside the form, and has no form tag associating it with the form, it doesn't know which form it should submit when you click on it.
Try this:
<form class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
This puts the form around both columns.
Use the method attribute in form tag and end the form tag properly
<form role="form" method="get" class="form-watch-list-create">
<div ng-controller="MyCtrl" class="col-md-4">
<input
required="required"
placeholder="Movie title"
type="text"
class="form-control"
typeahead="item.Title for item in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-min-length="2"
typeahead-wait-ms="1000"
typeahead-on-select="onSelected($item)"
typeahead-template-url="customTemplate.html"
ng-model="asyncSelected">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-block btn-sm btn-dark">Add to watchlist</button>
</div>
</form>
Am trying to submit data using modal bootstrap but i can't get it to work. The page will contain more than one modal to enable user to easily update their details.Here the code.
<div class="modal fade" id="overview-modal" 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">Overview</h4>
</div>
<form id="overview_form" action="neuro/update_profile.php" class="form-horizontal" >
<div class="modal-body">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Overview</label>
<div class="col-sm-10">
<textarea class="form-control" id="overview_input" cols="20" rows="10" name="overview_textarea">
</textarea>
<input type="hidden" name="url"/>
</div>
</div>
<div class="form-group">
</div>
</div>
<div class="modal-footer">
<div class="btn-group">
<input type="submit" id="save" class="btn btn-success" value="Save"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
This is the javascript that will handle the form submission to the php file
<script>
$(document).ready(function () {
$("#save").submit(function () {
var formData = $("form#overview_form").serialize();
var my_url = "neuro/update_profile.php";
$.ajax({
type: "POST",
url: my_url,
data: formData ,
success: function (msg) {
$("#overview-modal").modal('hide');
},
error: function () {
alert("Error encounted");
}
});
return false;
});
});
</script>
The php is in a folder called neoro/update_profile ,since i will be using more than one modal in the profile page i have decided to append a url on the form attributes so that it can be easily processed in the php
$profile = new Profile();
$url = $_POST['url'];
if (isset($url)) {
if ($id == "overview") {
$overview = $_POST['overview'];
$profile->save_overview($user_id, $overview);
return TRUE;
}
} else {
header("Location: ./profile.php");
}
This is full of errors
You are sending the form via GET method and accessing it via POST method
Your URL field is empty
you are using action field and also submit simultaneously
your jquery code is not correct
you are using $id variable in your php code which is undefined
Corrected code:
<form id="overview_form" class="form-horizontal" method="post">
<input type="hidden" name="url" value='yoururl'/>
Do this:
$('#overview_form').submit(// your code here);
Instead of on #save, since you are submitting form not button 😉
Or
Even you can achieve same thing on #save but with click function as below
$('#save').click( // here your code );
I'm very new to codeigniter.
here's my problem. when i load my MODAL LOGIN form and i press the submit button. It wouldn't do anything. What i would like to happen is just to go to these 4 views (student,instructor,adviser,admin) pages. I don't want to pass values for now. Focus only on switching views.
index.php (the modal part)
<!-- Modal Log in Form-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form action="" method="POST" id="form" role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter id no.">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<input type="Submit" value="LOG IN" class="btn btn-success btn-block">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
I didn't put anything on that action="". because of this.(to be dynamic) when the user want to sign in as student he/she go to student page. or as admin he/she go to admin page. and etc.
freelancer.js
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/studentsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn2").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/instructorsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn3").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/advisersignin'?>";
});
});
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/adminsignin'?>";
});
});
logbooks.php (from the controller)
class logbooks extends CI_Controller{
function __construct(){
parent::__construct();
}
function studentsignin(){
$this->load->view('student_view');
}
function instructorsignin(){
$this->load->view('instructor_view');
}
function advisersignin(){
$this->load->view('adviser_view');
}
function adminsignin(){
$this->load->view('admin_view');
}
}
but if i just input the relative path for example http://localhost/WEB/index.php/logbooks/studentsignin in the browser. I can view the student page.
PLEASE help. I don't know how to solve this problem.
Change your submit button to just button.
In click event after set "form action" you can use this too:
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
$("#form").attr('action',"<?php echo base_url('index.php/logbooks/adminsignin')?> ";
});
$("#form").submit();
});
The point is use $("#form").submit();
I hope It Work For you.
I have a commenting system that sits within a Bootstrap Modal, all works fine in terms of pulling data from the database, and the ability to enter data. the problem is on Submit.
This below is my code for the submit.
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: form.serialize(),
success: function(data){
console.log(data);
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
},
error: function(e){
alert(e);
}
});
});
});
myjobspage.php - this is the start of my modal on my main page, it's called from the Notes button
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>
I originally had the rest of the modal within the div above, but as I was having this issue of it closing the form and refreshing the page, I decided to move the modal onto another page, and have it called when the button is clicked, but still having the same issue
This is the modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--comment form -->
<form class="notesform" id="notesform" name="notesform" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid; ?>">
<input type="hidden" name="projno" value="<?php echo $projectno; ?>">
<input type="hidden" name="name" value="<?php echo $inputby; ?>">
<div class="col-md-12 ">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
<div class="col-md-8">
<textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<br>
<input type="submit" class="btn green" id="savenotes" name="submit" value="Submit Comment" />
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
One question on this though is that to call the jquery/Ajax code is done through my main page, is this right or should it be done through the page that the Model body is on?
When the Submit button id="savenotes" is clicked, the modal closes and refreshes the page losing all data within the main page.
How can I submit data to the database without the Modal closing?
I don't know if you've found an answer to this but at least for others who might need solutions just like I once did.
This is the modal page named modal.php:
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1"
data-
width="960">
<!-- div wrapper for modal dialog -->
<div class="modal-dialog">
<!-- div wrapper for modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<!-- I guess you wanted your body centered .justify-content-center
should fix that -->
<div class="modal-body justify-content-center">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<!-- I guess you wanted your form centered .justify-content-center
would fix that -->
<div class="row justify-content-center">
<!--comment form -->
<form class="notesform form-block" id="notesform" name="notesform"
method="post" action="projectnoteuploads.php">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid =
'propid'; //replace variable $propid ?>">
<input type="hidden" name="projno" value="<?php echo $projectno =
'projectno'; //replace variable $projectno ?>">
<input type="hidden" name="name" value="<?php echo $inputby =
'inputby'; //replace variable $inputby ?>">
<div class="form-group">
<label for="comment" class="control-label">Project Notes *</label>
<textarea class="form-control form-control-md" rows="3" cols="25"
name="comment" style="resize: none;" id="comment" placeholder="Type
your comment here...." required></textarea>
</div>
<input type="submit" class="btn btn-success" id="savenotes"
name="submit" value="Submit Comment" />
</form>
</div>
<!-- I can't find where your Comments are appended
to, so I placed them here using the
class name 'comment-block' as you used in your script -->
<div class="row justify-content-center">
<div class="comment-block"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-
default">Close</button>
</div>
</div>
</div>
</div>
Then this is your myjobspage.php where you will include the modal.php
<?php
include 'modal.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Myjobspage</title>
<link rel="stylesheet"
href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
<script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
<script src="path/to/bootstrap-
4.0.0/assets/js/vendor/popper.min.js">
</script>
<script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Some Code Here-->
<!-- Button to Launch Modal. Replace appropriately-->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#projnotes">
Launch Comments Modal
</button>
<!-- some other code -->
<!-- script to trigger your modal.php -->
<script src="modalScript.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
</body>
</html>
This is the script modalScript.js that will make the request to projectnoteuploads.php via the ajax method.
$(document).ready(function(){
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: $('form').serialize(),
success: function(data){
console.log(data);
//This I guess was where the error was in the previous code.
$('.comment-block').append(data).hide().fadeIn(800);
$('textarea').val(''); //This will wipe out the textarea after
//comment input
},
error: function(e){
alert(e);
}
});
});
});
Please take note, the codes have all being modified from the question, I tried it and it works.
I have some portlets here that has an ID for each of it. What I'm trying to do is to pass these IDs to a popup modal after pressing an Add button in the portlet.
Here is the portlet view:
#foreach($portlets as $portlet)
<div class="box span4">
<div class="box-header well" data-original-title>
<h2><i class="icon-th"></i> {{$portlet->portlet_title}} </h2>
</div>
<div class="box-content">
<div class="row-fluid">
// some contents over here
</div>
<div class="box-icon">
<i class="icon-plus-sign"></i>
</div>
</div>
</div>
#endforeach
Notice the Add New Link button at the bottom of the code, when I press that, a modal will appear. Here is the view of it:
<div class="modal hide fade" id="linkSettings">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add New Link</h3>
</div>
<form method="post" action="{{ URL::to('addlink') }}" >
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="focusedInput">Link Title:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_title" name="link_title" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Add A Link:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_url" name="link_url" placeholder="eg. http://www.example.com/" type="text">
</div>
</div>
</div>
<div class="modal-footer">
Close
<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
This modal has a form in it to be processed in the controller. But how do I send the portlet ID to this modal so that it can be stored in the database during processing in the controller? Because I want it to automatically know what portlet I want to add links in it. Any idea?
If anything, please let me know.
You could attach a jQuery event handler to clicking the "Add New Link" button, and use it to populate a hidden field in the modal view.
i.e. something like:
$("a.new_link").click(function(){
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});
And somewhere in the <form> for the modal:
<input type="hidden" name="portlet_id" class="my_hidden_field"/>
Then, you just need to get the portlet_id POST parameter with Laravel/PHP to determine the portlet ID that was used.
Edit
Revised handler based on the code you gave:
$('.btn-settingLink').click(function(e){
e.preventDefault();
$('#linkSettings').modal('show');
// get the portlet_id and modify the midden field
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});