Edit: Here is a screenshot: Modal Screenshot
Edit: I edited the code and I am no longer redirected to a new page when clicking the 'Search" button, but my output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My code isn't displaying anything in the modal window. When I click the 'Search' button, the modal window opens but immediately afterwards a new page is loaded with the query results.
How do change it so that the query results display in the modal window rather than a new page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
You can try this possible solution by following this changes
- Remove Form tag
- Add Onclick Listner on Search Button
- First put content in Modal and then show Modal
index.php
$(document).ready(function () {
$('.search').click(function () {
var q= $('#q').val();
// AJAX request
$.ajax({
url: 'search.php',
type: 'post',
data: {
q: q
},
success: function (response) {
// Add response in Modal body
$('.modal-body').html(response);
$('#mymodal').modal('show');
}
});
});
});
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<!-- Script -->
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<script src='bootstrap/js/bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
<input type="text" id="q" name="q" placeholder="Enter query"/>
<input type="button" class="search" name="search" value="Search">
</body>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I have a search bar for users to enter a query. Upon clicking 'Search', a modal should appear with the query results.
My output from index.php is still not showing in the modal. When I click 'Search', the modal pops up with an empty body. How do I get my output from index.php to show in the modal's body?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
I know this question has many solutions in SO.But still I cant spot my mistake.The following is my bootstrap modal form
<!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="assets/lib/bootstrap/css/bootstrap.min.css">
<script src="../asset/modal/js/jquery.min.js"></script>
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<? if(isset($_POST["sendmail"]))
echo "Form 1 have been submitted";
?>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<? echo $token; ?>
<!-- Modal content-->
<form class="form-horizontal" role="form" method="post" name="sendmail" >
<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">
<textarea rows="8" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" >Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
But whenever i submit the form it redirects to the index page of my project.Please Help me spotting my error.:-(
Yes its because you are not directing it anywhere...You need to write something like this:-
<form class="form-horizontal" role="form" method="post" name="sendmail" action="page_name_here.php" >
So you need to add action="page_name_here.php">
If you want to stay on the same page then just write action="#">
Update:-
<button type="submit" class="btn btn-default" name="send">Send</button>
Add a name to the button send then in the Php:-
<? if(isset($_POST["send"]))
echo "Form 1 have been submitted";
?>
This way when you click the send button everything in the form is submitted, since its a button of type=submit
Use this for the submit button. Your button has not been named as sendmail for the POST so the info will not pass.
<? if(isset($_SERVER['REQUEST_METHOD'] == 'POST' ))
echo "Form 1 have been submitted";
?>
Add empty action as shown for the same page
<form class="form-horizontal" role="form" method="post" name="sendmail" action="">
I have a problem in bootstrap modal. I want to add caption of an image using bootstrap model.
For the modal section I have done this,
<!-- Modal content Start-->
<form method="POST">
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
<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">Image Caption</h4>
</div>
<div class="modal-body">
<input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="btn_caption">submit</button>
Close
</div>
</div>
</div>
</div>
</form>
<!-- Modal End Here -->
For the ajax part I have done this,
$(document).ready(function(e) {
$("button#btn_caption").click(function(){
var postData = $(this).serialize();
alert(postData);
$.ajax({
type: "POST",
url: "process.php",
data: postData,
success: function(msg){
//alert('successfully submitted')
},
error: function(){
alert("failure");
}
});
});
});
For the process.php file I put these lines,
<?php
include('require/admin_header.php');
if (isset($_POST['caption'])) {
$caption=strip_tags($_POST['caption']);
$image_id=strip_tags($_POST['image_id']);
echo '<pre>';
print_r($_POST);
// Data base update code
echo 'Update Done';
}?>
Now, the problem is the database is not updating with the value. <?php echo $Array->image_caption;?> it print the value from the database in the modal. But when I do this alert(postData);, it alert nothing. Can any one help me that where I am making the mistake?
Thanks in advance for help.
Replace
var postData = $(this).serialize();
with
var postData = $("#form_id").serialize();
<form method="POST" id="form_id">
</form>
I solve the question like this way,
This is the modal part,
<!-- Modal content Start-->
<form id="contactForm1" action="process.php">
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $i;?>" role="dialog">
<input type="hidden" id="image_id" name="image_id" value="<?php echo $Array->image_id;?>" >
<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">Image Caption</h4>
</div>
<div class="modal-body">
<input type="text" id="caption" name="caption" placeholder="Caption" value="<?php echo $Array->image_caption;?>"/>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="btn_caption">submit</button>
Close
</div>
</div>
</div>
</div>
</form>
<!-- Modal End Here -->
This is the ajax part,
<script>
// Attach a submit handler to the form
$( "#contactForm1" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
id = $form.find( "input[name='image_id']" ).val(),
caption1 = $form.find( "input[name='caption']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { image_id: id, caption: caption1} );
// Put the results in a div
posting.done(function( data ) {});
});
</script>
And the PHP part is like this,
<?php include('require/admin_header.php');
if (isset($_REQUEST['caption'])) {
$caption=$_REQUEST['caption'];
$image_id=$_REQUEST['image_id'];
// Update SQL
echo 'Update Done';
}?>
Thanks for those who interest to solve the question. Thanks once again.
You can use this code, in your ajax code:
var postData = new FormData($("#form_id")[0]);
and in your open form tag, you must add enctype="multipart/form-data" to upload image.
<form method="POST" enctype="multipart/form-data" id="form_id">
<input></input>
</form>
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 am a newbie in Codeigniter. I cannot insert data into my table. I have used bootstrap files too.
These are lines from View - groups.php
<input type="text" name="group" id="group" placeholder="Group">
<button type="button" name="addgroup" class="btn btn-primary" id="add" data-dismiss="modal">Add</button>
Model - groups_model.php
function insert_groups($dbdata) {
$this->db->insert('groups', $dbdata);
}
Controller - groups_controller.php
public function group()
{
$this->load->view('groups');
$this->load->model('groups_model');
if(isset($_POST['addgroup']))
{
$userID= '2';
$groupname= $this->input->post('group');
//$this->load->model('groups_model');
$data=array(
'userID'=>$userID,
'groupname'=>$groupname
);
$this->groups_model->insert_groups($data);
//var_dump($this->db->last_query());
}
}
}
My full html form is pasted below. There are a lot of comments in there.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="<?php echo base_url(); ?>stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>stylesheets/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>stylesheets/bootstrap-theme.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<SCRIPT language="javascript">
// var person;
// var element;
//
// function add() {
// var e1 = document.getElementById('group').value;
// var e2 = document.getElementById('select');
// var o = document.createElement('option');
// o.value = "group_body.html";
// o.text = e1;
// e2.options.add(o);
//
// }
// function goto() {
// var index = document.getElementById('select').selectedIndex;
// if (index.value != "select") {
// location = index.value;
// }
// }
// function add()
// {
// //Create an input type dynamically.
// element = document.createElement("button");
// element.className='btn btn-default';
// var person = document.getElementById('group').value;
// var t = document.createTextNode(person);
// element.appendChild(t);
// element.id=person;
// //Assign different attributes to the element.
//// element.type = type;
//// element.value = type; // Really? You want the default value to be the type string?
//// element.name = type; // And the name too?
//
// element.onclick = function() { // Note this is a function
// //alert(element.id);
//// $(document).ready(function(){
//// $("#element").click(function(){
// $('body').load('group_body.html');
//// });
//// });
// };
//
// var foo = document.getElementById("fooBar");
// //Append the element in page (in span).
// foo.appendChild(element);
//// var d = document.getElementById('fooBar');
//// d.appendChild(i);
// }
//
// function copy()
// {
// var n1 = document.getElementById('addKeyword');
// var n2 = document.getElementById('getKeyword');
// n2.innerText = n1.value;
// }
</SCRIPT>
</head>
<body>
<form method="post" name="form1">
<div class="btn-group" id="fooBar">
<!-- <button type="button" class="btn btn-default">Marketing</button>
<button type="button" class="btn btn-default">Internet</button>
<button type="button" class="btn btn-default">Politics</button>-->
select a group:
<select class="form-control" id="select" onchange="javascript:location.href = this.value;">
<option selected value="select">select</option>
<!-- <option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>-->
</select>
<button type="button" class="btn btn-default" id="btnAdd" data-toggle="modal" data-target="#myModal">Add Group</button>
</div>
<!-- Modal -->
<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">Group Name</h4>
</div>
<div class="modal-body">
<h5>Please enter Group Name:</h5>
<input type="text" name="group" id="group" placeholder="Group">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" name="addgroup" class="btn btn-primary" id="add" data-dismiss="modal">Add</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="boxed">
<h4>Group:<span class="label label-default" id="span"><script>document.getElementById('group').innerText = document.getElementById('span').innerText</script></span>
<button type="submit" class="btn btn-default">Edit Name</button>
<button type="submit" class="btn btn-default">Disable</button>
<button type="submit" class="btn btn-default">Delete Group</button></h4>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your keyword" id="addKeyword">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="copy()">Add</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<h4>Keywords:</h4>
<!-- <div class="keyword" id="getKeyword"></div>-->
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url(); ?>javascripts/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>javascripts/bootstrap.js"></script>
</body>
</html>
try
public function group()
{
$this->load->model('groups_model');
if($this->input->post('addgroup'))
{
$userID= '2';
$groupname= $this->input->post('group');
$data=array(
'userID'=>$userID,
'groupname'=>$groupname
);
$this->groups_model->insert_groups($data);
}
$this->load->view('groups');
}
}
And add action to your form :
Change
<form method="post" name="form1">
To
<?= form_open('yourcontroller/action')?>
//anything HTML inside your form
<?= form_close()?>
And you must load form helper to do this. In autoload.php
$autoload['helper'] = array('form');
Hope it helps !
Why are you using button when it should be submit.
change this
<button type="button" name="addgroup" class="btn btn-primary" id="add" data-dismiss="modal">Add</button>
to
<button type="submit" name="addgroup" class="btn btn-primary" id="add" data-dismiss="modal">Add</button>
You have to submit the data, to get it in post
Basically you don't have action attribute in your form tag.
<form method="post" name="form1">
You can use this expressions:
<form action="yourcontroller/action" method="post" name="form1">
or use the Codeigniter form helper
$this->load->helper('form');
echo form_open("yourcontroller/action");
Hope it helps you.