I wrote this
<form method="post" id="create">
<div class="panel panel-success">
<div class="panel-heading">
<p>Create a new Wall Post</p>
</div>
<div class="panel-body">
<textarea cols="80" id="text" name="text" rows="10" style="visibility: hidden; display: none;"></textarea>
<script>
$('#text').wysibb(options);
</script>
<div class="pull-right">
<br>
<button onclick="$('#text').val($('#text').htmlcode())" type="submit" name="create" class="btn btn-success">Post</button>
<button type="reset" name="reset" class="btn btn-danger">Reset</button>
</div>
</div>
</div>
</form>
<?php
if (isset($_REQUEST['create'])) {
$p = WallPostManager::createWallPost($user, UserManager::isLoggedIn(), $_POST['text']);
if ($p != false) {
Utils::alert("News Post created", false);
header('refresh: 1');
}
}
But for some reason, im getting the 'text' in bbcode when im specifying it to be on .htmlcode(), what could be happening? am i doing something wrong?
$('#text').htmlcode()
Doesn't work since that is not a jQuery function, as #nthall mentioned. Try changing it to
$('#text').html()
Related
Basically, I write a text and send everything correctly. The problem is when I get this email sent, it comes typed type in HTML. For example ... if I write Thanks! ... and send the email ... while reading the email I sent ... it will be tagged ... I always get something like this: <p> Thanks! b> Thanks! </ b>. My objective is to only receive the text ... without the tags.
View
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
#using (Html.BeginForm("Index", "Email", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="box box-info">
<div class="box-body">
<div class="form-group">
<input class="form-control" type="email" name="Destinatário" placeholder="Para:">
</div>
<div class="form-group">
<input class="form-control" name="Assunto" placeholder="Assunto:">
</div>
<div class="form-group">
<textarea id="summernote" name="Mensagem" class="form-control" style="height: 200px" placeholder="Introduza a Mensagem..."></textarea>
</div>
<div class="form-group">
<div class="btn btn-default btn-file">
<i class="fa fa-paperclip"></i> Anexo
<input type="file" name="Attachments" multiple="multiple">
</div>
<p class="help-block">Max. 32MB</p>
</div>
</div>
<div class="box-footer">
<div class="pull-right">
<button type="button" onclick="location.href='#Url.Action("DashboardV1", "Home")'" class="btn btn-default"><i class="fa fa-pencil"></i> Voltar</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o" id="sendEmail"></i> Enviar</button>
</div>
<button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Limpar Tudo</button>
</div>
</div>
}
#section Scripts {
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script type="text/javascript">
var message = "#ViewBag.Message";
$(function () {
if (message != "") {
alert(message);
}
});
</script>
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
}
I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!
Is possible with one JavaScript function and a button send email an already printed html table ?
<table id="mytable">
</table>
I did a PHP function and i call everyware i need to send my results.
The call
<?php SendEmailForm("MyIdElementToSend"); ?>
and the function
function SendEmailForm ($MyIdElementToSend){
?>
<form id="EMailForm" action="SendMail.php?SendMail=true" method="post">
<div class="form-group">
<div class="row">
<div class="hide">
<input id="msg" type="text" class="form-control" name="msg" value="" />
</div>
<div>
<button id="sub" type="submit" class="btn btn-primary"><i class="fa fa-envelope" aria-hidden="true"></i> Send</button>
</div>
</div>
</div>
</form>
<script>
document.getElementById("msg").value = document.getElementById("<?php echo $MyIdElementToSend ?>").outerHTML;
</script>
I am trying to create a form such that the user can enter HTML code in the textarea which can be rendered when the Preview button is clicked and submitted to the database when the Submit button is clicked. But the data is being submitted when the preview button is clicked.
HTML Code:
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
The preview button is a submit button!
If you want it to be Just For JavaScript, add type="button".
You need to specify the button's type type="button". If you do not specify the type attribute of a button, it will default to submit, as such it is submitting your form.
MDN docs on button
In your preview button add a type="button" if you don't added by default the form will treat it as a submit button..
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
There is something you're missing, you haven't included your type which should be type="button", i.e
<button class="btn" type="button" onclick="parse()">Preview</button>.
You will need to include it between the preview button tag.
Which should make you new code look like the one below.
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" type="button" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
This should help you.
Change Button type in your code like:
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
<script>
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
</script>
I have this http://jsfiddle.net/NgEpS/1/ basically, I am getting the value of a textarea on each form and the appending the value to a child div, everything works.perfect after the first submit, but if you submit more than once the same form, my script is cloning all the previous replies, wondering if there is any way to avoid this.
HTML:
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 1..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply">1</div>
</div>
</form>
</div>
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 2..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply hidden"></div>
</div>
</form>
</div>
<div class="post-container">
<form class="reply-form">
<div class="reply-box">
<textarea placeholder="Reply box 3..." columns="10" rows="1" name="comment-input"></textarea>
<input type="submit" value="Send">
</div>
<div class="post-dropdown"></div>
<div class="post-dropdown-content">
<div class="post-dropdown-reply">1</div>
<div class="post-dropdown-reply">2</div>
<div class="post-dropdown-reply">3</div>
<div class="post-dropdown-reply">4</div>
</div>
</form>
</div>
p​
JavaScript:
function gettingReplyVal() {
$('.reply-form').submit(function(e) {
var post_clone = $('.post-dropdown-content').first().clone();
var textAreaValue = $(this).find('textarea').val();
$(post_clone).insertBefore($(this).f ind(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);
e.preventDefault();
});
}
gettingReplyVal();
On this line
$(post_clone).insertBefore($(this).find(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);
$(this).find(".post-dropdown-content") returns all the post-dropdown-content elements inside this. The first time you hit send, there is only one, so it behaves normally, but the second time it finds two, the third time it finds three, etc...
use $(this).find(".post-dropdown-content").first() instead
$(post_clone).insertBefore($(this).find(".post-dropdown-content").first()).find('.post-dropdown-reply').html(textAreaValue);