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>
Related
first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>
So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>
First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>
I want to use value of a textarea element, but I am not able to get it
function postComment(element) {
const content = element.previousSibling.value;
console.log(content);
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="postComment(this)">Comment</button>
</div>
</form>
It gives undefined as output
Can you try the below code
function postComment(element) {
const content = element.parentNode.firstElementChild.value
console.log(content);
return false;
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="return postComment(this)">Comment</button>
</div>
</form>
function postComment(element) {
const content = element.previousElementSibling.value;
console.log(content);
}
<form action="" class="comment-editor">
<div class="form-group">
<textarea class="form-control" name="" id="someid" rows="4"></textarea>
<button type="button" class="btn btn-primary my-2" onClick="postComment(this)">Comment</button>
</div>
</form>
Your problem is that you use previousSibling when it should be previousElementSibling.
Since you already have an ID for the <input> field, i would have used the following instead:
function postComment() {
const content = document.getElementByID("someid").value;
console.log(content);
}
And no need for the parameter here:
onClick="postComment();"
You can fetch value by this modification in your code
const content = document.querySelector("#someid").value;
I have the following HTML Form displayed, and I would like to call the javascript function sendMail() when the user clicks on the Send button:
<script type="text/template" id="compose-view-template">
<form id="email-compose" class="form-email-compose" method="get" action="javascript:sendMail();">
<div class="form-group">
<input type="email" id="input-to" placeholder="To" class="input-transparent form-control"
value="<%= receiver %>">
</div>
<div class="form-group">
<input type="text" id="input-subject" placeholder="Subject" class="input-transparent form-control"
value="<%= subject %>">
</div>
<div class="form-group">
<textarea rows="10" class="form-control" id="wysiwyg" placeholder="Message"><%- body %></textarea>
</div>
<div class="clearfix">
<div class="btn-toolbar pull-xs-right">
<button type="reset" id="compose-discard-button" class="btn btn-gray">Cancel</button>
<button type="submit" id="compose-send-button" onclick="" class="btn btn-danger"> Send </button>
</div>
</div>
</form>
and the Javascript function:
function sendMail(){
console.log("submit new email");
}
</script>
but when I click on Send, I have the following error
Form submission canceled because the form is not connected
even if I mention an action to the form or to the button onclick I still have the same error.
anybody knows how I can solve this issue ?
Here is a sample of html page, which there is a button on it, and when u click on it, a javascrippt function shows up, and write a message on your page for you.
Notice:
To send a real email, you must make a backEnd code for it.
<script>
function sendRequest(){
console.log( "complete the function");
document.getElementById("data").innerHTML = "Email is sent!";
}
</script>
<!DOCTYPE html>
<html>
<body>
<button type="button" onClick="sendRequest()" >Click me </button>
<p id="data"> <p>
</body>
</html
I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
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);