In a php form, I want to use summernote textaera. I manage to display the text correctly but when I validate the form, I can not recover the data entered. Here is my code Thank you for your help
My code :
<form action="<?php echo $action; ?>"method="post" onsubmit="return postForm()">
<div class="col-lg-6 col-md-2">
<div class="form-group" ">
<label>Date</label>
<input type="text" name="date_pub" class="form-control" id="date_pub" size="10" value="<?php echo $date_article ?>" placeholder="Date de la Publication"/>
</div>
<div class="form-group">
<label>Titre Publication</label>
<input class="form-control" name="titre_pub" type="text" size="25" value="<?php echo $titre_article ?>" placeholder="Titre de la Publication"/>
</div>
<div class="control-group">
<label class="control-label" for="summernote">Article</label>
<div class="controls">
<textarea id="summernote" name ="summernote" rows="10" value="<?php echo $contenu_article; ?>">
</textarea>
</div>
</div>
<div class="control-group">
<br>
<input type="submit" class="btn btn-primary" value="<?php echo $lib_btn ?>">
</div>
</div>
</form>
<script>
$( function() {
$( "#date_pub" ).datepicker( $.datepicker.regional[ "fr" ] );
} );
// Summernote
$(function () {
$('#summernote').summernote(
{
height: 600, // set editor height
focus: true // set focus to editable area after initializing summernote
}
)
});
//var html = $('#summernote').summernote('code');
</script>
<script type="text/javascript">
$(document).ready(function(){
var postForm = function() {
var content = $('textarea[name="summmernote"]').html($('#summernote').code());
}
});
</script>
I tried to do as for other textaera but it doesn’t work
Related
I am not that much good at programming. i am working on one feature, that is form hiding after the submit of form data. Here number of forms created dynamically. i need to hide the form once we submit the form data, to prevent multiple submission of form. here i used form inside div i also tried for div hiding. it is not working please let me know the solution.
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
function frmsubmit()
{
var frm = document.getElemetsByName('formdata')[0];
frm.submit();
frm.reset();
return false;
}
$('#submit_0').click(function() {
$.ajax({
url:"section.php?status=result",
data:$('#f_0').serialize(),
success:function(data)
{
alert(data);
$('#f_0')[0].reset();
}
});
});
// Haven written same code for submit_0 to submit_10
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Enter the values:</h3><br>
<ul class="nav nav-tabs">
<?php
foreach($clasarr as $temp)
{
?>
<li><a href="#<?php echo $temp; ?>"> <?php echo $temp; ?> </a </li>
<?php
}
?>
</ul>
<div class="tab-content">
<?php
$y=0;
foreach($clasarr as $temp)
{
?>
<div id="<?php echo $temp; ?>" class="tab-pane fade">
<form name="formdata" action="" method="post" class="form-horizontal" id="f_<?php echo $y; ?>">
<div class="col-md-offset-2 col-md-10">
<h3> CLASS: <?php echo $temp; ?></h3>
</div>
<input type="text" name="idr" id="idr" value="<?php echo $id; ?>" hidden>
<input type="text" name="clss" id="clss" value="<?php echo $temp; ?>" hidden>
<div class="form-group">
<label class="control-label col-sm-2" for="totalb">Budgeted #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="totalb" id="totalb" value="<?php echo $totalarr[$y]; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="received">Received #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="received" id="received_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="deleted"> Deleted data #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="deleted" id="deleted_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/ >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="csvno"> CSV Number #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="csvno" id="csvno_<?php echo $y; ?>" onload="getupload(<?php echo $y; ?>)">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duplicate"> Duplicate #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="duplicate" id="duplicate_<?php echo $y; ?>" onblur="getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)" onclick="getupload(<?php echo $y; ?>)"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="upload"> Upload #:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="upload" id="upload_<?php echo $y; ?>">
</div>
</div>
<br><br>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2">
<input class="btn btn-info" type="submit" name="submit" id="submit_<?php echo $y; ?>" value="submit" onclick="frmsubmit()">
<input class="btn btn-info" type="reset" name="Reset" value="Reset">
</div>
</div>
</form>
</div>
<?php
$y++;
}
You may not need both input type = "submit" and onclick event handler, the submit input will be enough.
Also there is a need to prevent default behaviour of the submit button since ajax is used to submit the form data.
Replace the input type "submit" with this
<input class="btn btn-info" type="submit" name="submit" id="someId" value="submit">
Also while dynamically creating the form use a class instead of id(presuming id is also dynamic so every new form creating will change the id)
<form name="formdata" action="" method="post" class="form-horizontal someFormClass"
id="someDynamicId">
// rest of the code
</form>
To prevent the default behaviour add event.preventDefault();.Inside the ajax success delegate the event of hiding the form from body
$('#submitButtonId').click(function(e) {
e.preventDefault();
var form = $(this).parents('form.someFormClass');
$.ajax({
//Rest of the code
success:function(){
$('body').find(form).hide()
}
})
});
Hopefully this pseudo code will be useful
A ridiculously simplified version of what you're trying to do. A form, in a div, with a jQuery on click hook that will hide the div on submit click.
$('#submit').click(function() {
$('#f_0').hide();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="f_0">
<form name="formdata" action="" method="post" class="form-horizontal" id="f_1">
<input class="btn btn-info" type="submit" name="submit" id="submit" value="submit">
<input class="btn btn-info" type="reset" name="Reset" value="Reset">
</form>
</div>
#AvinashT But is the ajax call being made or not?
#gurvinder372 ajax is called and form data is entring into table
successfully
Based on above discussion, you just need to add this line in the success handler to hide the form
$('#submit_0').closest( "form" ).hide()
Here number of forms created dynamically. i need to hide the form once
we submit the form data, to prevent multiple submission of form.
Form is being submitted multiple times, because you have two handlers (one is via onclick and other via submit click event handler).
You need to remove the onclick="frmsubmit()" from the form tag since submit click event handler is already taking care of form-submission.
I am trying to hidden/show image file upload section if dropdown list is select option "2", if user select option "1" it should be display image upload option.
So for example is user select as category "Ponuda" it should display image file upload, if user select potraznja it should hidden image file upload.
createpostview.php
<h2><?= $title;?></h2>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
</script>
<?php echo form_open_multipart('posts/create/');?>
<?php echo validation_errors();?>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label>Mjesto Polaska</label>
<input type="text" class="form-control" name="mjestoPolaska" placeholder="Mjesto Polaska">
</div>
<div class="form-group">
<label>Mjesto Odredista</label>
<input type="text" class="form-control" name="mjestoOdredista" placeholder="Mjesto Odredista">
</div>
<div class="form-group">
<label>Datum Polaska</label>
<input type="date" id="datepicker" min=<?php echo date('Y-m-d');?> class="form-control" name="datumPolaska" placeholder ="Datum Polaska" >
</div>
<div class="form-group">
<label>Datum Povratka</label>
<input type="date" id="datepicker1" min=<?php echo date('Y-m-d');?> class="form-control" name="datumPovratka" placeholder="Datum Povratka">
</div>
<div class="form-group">
<label>Cijena</label>
<input type="text" class="form-control" name="cijena" placeholder="Cijena">
</div>
<div class="form-group">
<label for="select">Broj slobodnih mjesta</label>
<select class="form-control" id="select" name="brojMjesta">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<label for="kategorije">Kategorija</label>
<?php
echo '<select class="form-control" id="kategorije" name="category_id">';
foreach($categories as $category) :
echo '<option value="' . $category['id'] . '">' . $category["name"] . '</option>';
endforeach;
echo '</select>';
?>
</div>
<div class="form-group">
<label>Postavi sliku:</label>
<input type="file" name="userfile" size="20">
</div>
<div class="form-group">
<label>Opis:</label>
<textarea class="form-control" rows="5" id="comment" name="opis"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
JavaScript
<script>
var element = document.getElementById("category_id");
element.onchange = function(){
var hiddenDiv = document.getElementById("showMe");
hiddenDiv.style.display = (this.value=="")?"none":"block";}
</script>
You should try something like blew
get select value on change using javascript/jquery
<div class="form-group" id="img_upload">
<label>Postavi sliku:</label>
<input type="file" name="userfile" size="20">
</div>
$('#kategorije').on('change', function(){
var value = $(this).find(":selected").text();
if (value == 1) {
$("#img_upload").hide();
} else {
$("#img_upload").show();
}
});
Base from the html you provided, write a javascript like this:
$(function(){
$('#kategorije').on('change', function(){
var selected = $(this).val();
if (selected == 1) {
// hide the parent element of input
$('input[name=userfile]').parent().show();
} else {
// show the parent element of input
$('input[name=userfile]').parent().hide();
}
});
});
I have a form in while loop which activates when I click on Reply button. This I can do simply but its in while loop and requires a unique ID. With my code its working till now but it works only for the first result. When I click on the other results nothing happens. Even though I have already assigned a unique ID its not working. My code is given below:
jQuery part:
$(document).ready(function() {
$("#reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
PHP HTML part:
<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
<div id="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="<?php echo $cmt_id?>" style="display:none;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="cmt_form_id_<?php echo $cmt_id?>">
<input type="hidden" name="status_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id?>" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_<?php echo $cmt_id?>"></textarea>
</form>
</div>
<?php } ?>
Please help with jQuery/Ajax.
HTML
<div class="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="1" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_1">
<input type="hidden" name="status_id" value="1" id="cmtsid_1" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_1"></textarea>
</form>
</div>
<div class="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="2" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_2">
<input type="hidden" name="status_id" value="2" id="cmtsid_2" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_2"></textarea>
</form>
</div>
javascript
$(document).ready(function() {
$(".reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
jsbin is listed in comments above.
hi how to keep bootstrap modal active after clicking submit button. In my case after clicking submit button it refresh the page so it close the modal. In my modal form i have a textboxes that when you click submit it will save the data in database. Now i have a php code that check the textboxes if their empty it will show/say the error and if not empty it will says success.
Thanks in advance who will help.
This is my code
<div class="modal fade" id="addtopic" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Add Topic</h4>
</div>
<form method="POST" action="index.php" role="form" id="saveform">
<div class="modal-body">
<div class="form-group">
<label for="cCategory">Category</label>
<input type="text" class="form-control" id="cCategory" name="category" value="<?php if (!empty($categ)) { echo $categ; } ?>">
</div>
<div class="form-group">
<label for="cTitle">Title</label>
<input type="text" class="form-control" id="cTitle" name="topicTitle" value="<?php if (!empty($topicTitle)) { echo $topicTitle; } ?>">
</div>
<div class="form-group">
<label for="cDesc">Description</label>
<textarea class="form-control custom-control" rows="3" style="resize:none" name="desc" value="<?php if (!empty($desc)) { echo $desc; } ?>"> </textarea>
</div>
<div class="form-group">
<label for="cDesc">Created By</label>
<input type="text" class="form-control" id="cDesc" name="createdby" value="<?php if (!empty($created)) { echo $created; } ?>">
</div>
</div>
<div class="modal-footer">
if($insert = $db->query("
INSERT INTO pncontent (category, title, description, createdby, dateadded)
VALUES ('$categ', '$topicTitle', '$desc', '$created', NOW() )
")) {
echo "<p class='pull-left'> Topic Save! </p>";
}else {
echo "<p class='pull-left'>Failed to Save</p>";
die($db->error);
}
}else {
echo "<p class='pull-left'>All Fields are required</p>";
$desc = $_POST['desc'];
$categ = $_POST['category'];
$topicTitle = $_POST['topicTitle'];
$created = $_POST['createdby'];
}
}
?>
<button type="submit" name="Sbt" class="btn btn-primary" >Save changes</button>
<button data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</form>
</div>
</div>
</div>
Where you return
echo "<p class='pull-left'>All Fields are required</p>";
Add this bit of code to open the modal on page load.
<script type="text/javascript">
$(window).load(function(){
$('#addtopic').modal('show');
});
</script>
i have embedded jquery and and it is working ..but there is a small problem with that query... when empty form is submitted , it shows errors with fieds and the form without error...i mean.. it shows double input field... what should be the main problem behind this...?
here is contoller Action:
public function add() {
if ($this->request->is('post')) {
if(!empty($this->data)){
$this->Post->create();
if ($this->Post->save($this->data)) {
if($this->RequestHandler->isAjax()){
$this->render('success','ajax');
}
else{
$this->Session->setFlash(__('Your post has been saved.'));
$this->redirect(array('action' => 'index'));
}
}
$this->Session->setFlash(__('Unable to add your post.'));
}
}
}
public function validate_form()
{
if($this->RequestHabdler->isAjax())
{
$this->data['Post'][$this->params['form']['field']]=$this->params['form']['value'];
$this->Post->set($this->data);
if($this->Post->validates()){
$this->autoRender=false;
}
else {
$error=$this->validateErrors($this->Post);
$this->set('error',$error[$this->params['form']['field']]);
}
}
}
here is validation js file:
$(document).ready(function (){
$('#title').blur(function(){
$.post(
'/cakephp/posts/validate_form',
{field:$('#title').attr('id'),value:$('#title').val()},
handleTitleValidation
);
function handleTitleValidation(error)
{
if(error.length>0){
if($('#title-notEmpty').length==0){
$('#sending').after('<div id="notEmpty" class="error-message">'+error+"</div>");
}
}
$('#title-notEmpty').remove();
}
});
$('#body').blur(function(){
$.post(
'/cakephp/posts/validate_form',
{field:$('#body').attr('id'),value:$('#body').val()},
handleBodyValidation
);
function handleBodyValidation(error)
{
if(error.length>0){
if($('#body-notEmpty').length==0){
$('#sending').after('<div id="notEmpty" class="error-message">'+error+"</div>");
}
}
$('#body-notEmpty').remove();
}
});
});
here is add.ctp
<!-- File: /app/View/Posts/add.ctp -->
<?php echo $this->Html->script('jquery',false);?>
<?php echo $this->Html->script('validation',false);?>
<div id="success" style="background-color: lightgreen;"></div>
<h1>Add Post</h1>
<?php
echo $this->Form->create('Post');
echo $this->Form->input('title', array('id'=>'title'));
echo $this->Form->input('body', array('rows' => '3','id'=>'body'));
echo $this->Js->submit('Save Post', array(
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->get('#sending')->effect('fadeOut'),
'update'=>'#success'
) );
?>
<div id="sending" style="display:none;">
<?php echo $this->Html->image('ajax-loader.gif', array('alt' => 'Loading...')); ?>
</div>
this is what i get... html source code:
<form id="PostAddForm" accept-charset="utf-8" method="post" action="/cb/cakephp/posts/add">
<div style="display:none;">
<input type="hidden" value="POST" name="_method">
</div>
<div class="input text required error">
<label for="title">Title</label>
<input id="title" class="form-error" type="text" required="required" value="" maxlength="50" name="data[Post][title]">
<div class="error-message">This field cannot be left blank</div>
</div>
<div class="input textarea required error">
<label for="body">Body</label>
<textarea id="body" class="form-error" required="required" cols="30" rows="3" name="data[Post][body]"></textarea>
<div class="error-message">This field cannot be left blank</div>
</div>
<div class="submit">
<input id="submit-1060465790" type="submit" value="Save Post">
</div>
<div id="sending" style="display:none;">
</form>
</div>
<h1>Add Post</h1>
<form id="PostAddForm" accept-charset="utf-8" method="post" action="/cb/cakephp/posts/add">
<div style="display:none;">
<div class="input text required">
<label for="title">Title</label>
<input id="title" type="text" required="required" maxlength="50" name="data[Post][title]">
</div>
<div class="input textarea required">
<label for="body">Body</label>
<textarea id="body" required="required" cols="30" rows="3" name="data[Post][body]"></textarea>
</div>
<div class="submit">
<input id="submit-1878163930" type="submit" value="Save Post">