I am creating my own custom chat bar all the related coding i have done, database and all the php functions working fine but when after submit the chat input message i am trying to append the input box data with jquery append function its not working at all.
html:
<div class="chat-bar-wrapper">
<div class="chat-bar-head">
<div class="chat-bar-icons-top">
<i class="fa fa-minus"></i>
</div>
<div class="chat-bar-title">
<p>Chat Online</p>
</div>
</div>
<div class="chat-bar-form">
<div class="chat-bar-text-display" id="messages_output"></div>
<form class="message-box" id="chat-form">
<div class="chat-bar-text-inputs">
<div class="chat-bar-text-input">
<input type="text" class="form-control" name="messages_input" placeholder="Enter your text here">
</div>
<div class="chat-bar-text-enter">
<input type="submit" class="btn btn-warning form-control" value="#">
</div>
</div>
</form>
</div>
</div>
js:
$(function(){
$("#messages_output").load('ChatMsgLoad.php');
$("#chat-form").submit(function(){
$.post('chatMsgPost.php', $('#chat-form').serialize(), function(data){
$('#messages_output').append(data);
});
return false;
});
});
Try this appendTo() instead of append().
$( data ).appendTo( "#messages_output");
And check in the console whether data variable contains something.
Read more here appendTo() in jQuery
Related
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>
I have a post and comment system. Something like facebook post and comment system. The post display properly but the comments only display for the first post i.e the post displayed at the top. Am on able to submit comment on all other posts except the first post.
The problem on which I need your assistance is as follows:
-The comments for each of the posts should display correspondently.
-To be able to submit comments for the other posts.
These what I have done.
View:
<div class="box-footer" style="display: block;">
<form id="com" class="com" method="post">
<div class="img-push">
<input type="hidden" class="status_id" id="status_id" name="status_id" value="<?php echo $post['spid']; ?>">
<textarea name="comment" id="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach;?>
Jquery:
$(document).ready(function(){
$(".commentbt").click(function(){
var comment = $(this).closest("div.img-push").find("input[name='comment']").val();
alert(comment);
});
});
All am getting is "Undefined"
I need to get the value of the input field and the textarea. Thanks
I can notice, initially, the next errors on your code:
1) You forgot the close div for <div class="box-footer" style="display:block;">
2) The attribute name of the input element is status_id, not comment
3) The usage of the same ID attribute for multiple elements.
4) On JQuery, I will replace the search of the input by matching by class. Also, I added the search of textarea value too.
So, try next modifications:
PHP
<?php foreach ($statuspost as $post): ?>
<div class="box-footer" style="display:block;">
<form class="com" method="post">
<div class="img-push">
<input type="hidden" class="status_id" name="status_id" value="<?php echo $post['spid'];?>">
<textarea name="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach:?>
JQuery
$(document).ready(function()
{
$(".commentbt").click(function()
{
var statusID = $(this).closest("div.img-push").find("input.status_id").val();
alert(statusID);
var comment = $(this).closest("div.img-push").find("textarea.comment").val();
alert(comment);
});
});
hii guys im new to web programing and im creating a website
in this website i want to add a contact us form in the footer of the page like this
<form action="footer_contactus1.php" method="post">
<div class="row">
<div class="form-grope col-lg-4">
<label><span class="glyphicon glyphicon-user"></span>Name</label><br>
<input name="cuname" type="text" class="form-cotrol">
</div>
<div class="form-grope col-lg-4">
<label><samp class="glyphicon glyphicon-envelope"></samp>Email</label><br>
<input name="cuemail" type="email" class="form-cotrol">
</div>
<div class="form-grope col-lg-4">
<label><i class="glyphicon glyphicon-earphone"></i>Phone Number</label><br>
<input name="cutele" type="tel" class="form-cotrol">
</div>
<div class="form-grope col-lg-12">
<br>
<label><span class="glyphicon glyphicon-paste"></span>Message</label><br>
<textarea name="cumessage" class="form-cotrol" rows="6" style="width: 100%;" ></textarea>
</div>
<div class="form-grope col-lg-12">
<br>
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
and when i click the submit button i want the php file to get executed so the inputs got inserted into the database
the php file
<?php
$pdo = new PDO('mysql:host=localhost;dbname=mywsite_db', 'root', '');
$req = $pdo->prepare('INSERT INTO message (id_message,nom,email,tele,message)
VALUES(null,?,?,?,?)');
$req->execute(array($_POST['cuname'],$_POST['cuemail'],$_POST['cutele'],$_POST['cumessage']));
header('Location: HomePage.php');
?>
i wanted this form to get submited without refreshing the page by ajax
i tried different tutorials and nothing worked can you plzz gives me the correct ajax script for my form so i can submit it to the php file and insert the data on the database then a message (alert) pop up telling me that the data has been inderted without refreshing the page plzz
<form action="footer_contactus1.php" method="post" id="myForm1">
...
</form>
<script type="text/javascript">
var frm = $('#myForm1');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('The data has been inserted');
}
});
ev.preventDefault();
});
</script>
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>
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.