How can I getting textarea value using javascript - javascript

I want to make submit event depend textarea value. cause i want to check textarea is vaild. so when I was using javascript function getElementByid, it result was placeholder value.
I just want to know how can I fix it.
<div class="clearfix">
<div class="input">
<textarea name="comment" id="comment" placeholder="<?php _e("Your Comment Here", "bonestheme"); ?>" tabindex="4" style="border:1px solid #cbcbcb; resize:none"></textarea>
</div>
</div>
<div class="form-actions">
<input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" />
</div>
<?php endif; ?>

You can use .value. Here's a demo:
var textarea = document.getElementById('test');
var result = document.getElementById('result');
function updateResult() {
result.textContent = textarea.value;
}
textarea.addEventListener('keyup', updateResult);
<textarea id="test" placeholder="Some placeholder"></textarea>
<p id="result"></p>

A little unclear as to what you need to do but if you just want to validate that the textarea value is something other then the placeholder text, you could add a handler to call on click of the button, something like:
<input class="btn-commnet" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e("Submit Comment","bonestheme"); ?>" onclick="return ValidationEvent()"/>
then have a javascript function that checks the value prior to submitting..
function ValidationEvent() {
commentElm = document.getElementById('comment');
if(commentElm.value === commentElm.placeholder)
return false;
return true;
}
This could be greatly simplified using Jquery.

Try below example. It's very easy. It doesn't return placeholder value it returns content that is written in textarea either you write static or dynamic. I just specify how to get simply textarea value instead of placeholder. If you want to set any validation then show me your java script code, so that i can give you better result.
<html>
<head>
<script type="text/javascript">
function abc()
{
var getTextArea = document.getElementById("txtArea");
var value = getTextArea.value;
alert(value);//It will show you text area value
}
</script>
</head>
<body>
<textarea id="txtArea" placeholder="hello">
</textarea>
<input type="submit" onclick="abc()"/>
</body>
</html>

Related

How to solve validation using multiple buttons in a form

I have a form, with a number of textboxes which a user can fill in. At the bottom of the form I have two buttons. One for canceling and one for submitting. Like the example below
<form action='bla.php' method='post'>
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
<input type='submit' name='submit'>
<input type='submit' name='cancel'>
</form>
And I have a js function that checks the fields for their data which I used to use for both buttons. I therefor refer to the js function in the form as below:
<form action='bla.php' method='post' name='form' onSubmit='return CheckFields()'>
The js function looks like this:
function CheckFields() {
var formname = "form";
var x = document.forms[formname]["someTextField1"].value;
var result = true;
var text = "";
if (x == null || x == "") {
text += "Dont forget about the someTextField1.\n";
result = false;
}
if(!result)
alert(text);
return result;
}
Now I want this js function to only run when using the submit and not the cancel button. When I try to move the call to the function to the submit button as below it doesn't work:
<input type='submit' name='submit' onClick='return CheckFields()'>
<input type='submit' name='cancel'>
Why? What is the smartest way of solving this? Should I leave the call to CheckFields() in the form and check within the script what button was clicked or should I remake the function to somewhat work with a button instead? Anyone have an idea or an example?
replace <input type='submit' name='cancel'> by <input type='button' name='cancel'>.Your Version actually has two submit-buttons, both of which will submit the form.
Watch this sample http://jsfiddle.net/355vw560/
<form action='bla.php' method='post' name="form">
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
<br/>
<input type='submit' name='submit' onclick="return window.CheckFields()">
<input type='submit' name='cancel' value="cancel" onclick="return false;">
anyway it's always better to use jquery or event listeners instead of managing events directly in the dom.
The function didnt worked because its scope was the element, if u specify window as context your function works.
First at all, it's not needed have submit button on a form if you want to use javascript to check all the fields before submitting.
I think the smartest way of doing it will be as follow:
Your form (without action, submit button, and method. Only identifing each component with id's):
<form id="formId">
<input type='text' id="text1">
<input type='text' id="text2">
<input type='text' id="text3">
<input type='button' id="accept">
<input type='button' id="cancel">
</form>
Your javascript (you have to have jQuery added):
jQuery("#formId").on("click", "#accept", function(){ //listen the accept button click
if(CheckFields()){ //here you check the fields and if they are correct
//then get all the input values and do the ajax call sending the data
var text1 = jQuery("#text1").val();
var text2 = jQuery("#text2").val();
var text3 = jQuery("#text3").val();
jQuery.ajax({
url: "bla.php",
method: "POST",
data: {
"someTextField1":text1, //In your example "someTextField1" is the name that the bla.php file is waiting for, so if you use the same here, it's not needed to change anything in your backend.
"someTextField2":text2,
"someTextField3":text3
},
success: function(){
//here you can do whatever you want when the call is success. For example, redirect to other page, clean the form, show an alert, etc.
}
});
}
});
jQuery("#formId").on("click", "#cancel", function(){ //here listen the click on the cancel button
//here you can clean the form, etc
});
function CheckFields() { //here I did a little change for validating, using jQuery.
var x = jQuery("#text1").val();
var result = true;
var text = "";
if (x == null || x == "") {
text += "Dont forget about the someTextField1.\n";
result = false;
}
if(!result)
alert(text);
return result;
}
I hope it helps you!
I handle it with this way , Hope it will help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form method="post" action="/">
<div class="container" style="background: #efefef; padding: 20px;">
<label>Encrypt and decrypt text with AES algorithm</label>
<textarea name="inputText" id = "inputText" rows="3" cols="100" placeholder="Type text to Encrypt..." maxlength="16" ></textarea>
<br>
<br>
<textarea name="inputKey" id = "inputKey" rows="1" cols="100" placeholder="Type key to Encrypt\Decrypt text with..." maxlength="16"></textarea>
<br>
<br>
<label>SBox :</label>
<div>
<div class="s-box-radios">
<ul class="sbox">
<li>
<label>SBox 1
<input id="sbox1" name="sboxOption" type="radio" value="option1" required/>
</label>
</li>
<li>
<label>SBox 2
<input id="sbox2" name="sboxOption" type="radio" value="option2" />
</label>
</li>
<li>
<label>SBox 3
<input id="sbox3" name="sboxOption" type="radio" value="option3" />
</label>
</li>
<li>
<label>SBox 4
<input id="sbox4" name="sboxOption" type="radio" value="option4" />
</label>
</li>
</ul>
</div>
<div class="s-box-display">
<textarea rows="5" cols="10"></textarea>
</div>
</div>
<div class="clear"></div>
<br>
<label>Result of Decryption in plain text</label>
<textarea name="inputCipher" rows="3" cols="100" placeholder="Encrypted Texts..." name="decrpyted"></textarea>
<br>
<input type="submit" value="Encrypt" name="Encrypt" id ="encrypt" onclick="valEncrypt()" />
<input type="submit" value="Decrypt" name="Decrypt" id ="decrypt" onclick="valDncrypt()" />
</div>
</form>
<script>
function valEncrypt()
{
var inputText = document.getElementById('inputText');
var inputkey = document.getElementById('inputKey');
if (inputText.value.length <16)
{
doAlert(inputText);
return false;
}
else
{
removeAlert(inputText);
}
if (inputkey.value.length <16)
{
doAlert(inputkey);
return false;
}
else
{
removeAlert(inputkey);
}
}
function valDncrypt()
{
var inputkey = document.getElementById('inputKey');
if (inputkey.value.length <16)
{
doAlert(inputkey);
return false;
}
alert('!Success');
}
function doAlert(element){
element.style.border = "1px solid #FF0000";
}
function removeAlert(element){
element.style.border = "1px solid #000000";
}
</script>
</body>
</html>

Javascript validation of text editor (ckeditor) is not working

I have made the coding of javascript validation for editor(i am using ckeditor).It is not working properly.i.e when i am going to submit the form at first the alert box is coming as the editor is empty but when i am adding some content and going to validate it ,still the alert box is coming.After it everything goes fine.But i want that the alert box will come once ,when the editor field is empty.So please suggest me.Below is my coding.Thank you.
<script type="text/JavaScript">
function validate()
{
var descrip = document.getElementById("description").value;
if(descrip == "") {
alert("Please Enter partner description");
document.getElementById("description").focus();
document.getElementById("description").style.borderColor="#fd00d6";
return false;
}
}
</script>
<script src="ckeditor/ckeditor.js"></script>
<form role="form" action="" method="post" enctype="multipart/form-data" onsubmit="return validate();">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Partner Description</label>
<textarea id="description" name="description" rows="10" cols="80" class="ckeditor" ><?php echo $_REQUEST['description']; ?> </textarea>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary" name="add_partner">Submit</button>
</div>
</form>
After reserching a lot ,finally i have found the solution for it.
Instead of using
var descrip = document.getElementById("description").value;
if we use
var get_desc = CKEDITOR.instances['description'].getData();
Then we can get the accurate result of that text editor associate field.
when editor is empty ,it will return null ,otherwise the the editor value it self.
Here we can simply get the (get_desc) ,according to which we can validate the field.
Its working fine.I have tested it .Thank you.

how we display the value form database in spacific span or div

i am trying to check my value form database it already enter or not before submitting the form
i have code its display the result in text box how it is possible that result is display in div or span.
my code is as under:
my first file category.php have script and html form
script
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id").keyup(function() {
$.ajax({
type : "POST",
url : "dbscript2.php",
data : "id=" + $("#id").val(),
success : function(html) {
$("#message").val(html);
}
});
});
});
</script>
html form is :
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="category" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="new" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
and last php file message dbscript2.php
<?php
include "config.php";
$id = $_POST['id'];
$q=mysql_query("select * from category where category ='$id'");
$num=mysql_num_rows($q);
if($num==0)
echo "";
else
{
echo "This Category already Entered";
}
?>
Since there are couple of errors in the actual code you shared and the answer you derived, let me put it across here
HTML form
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="id" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="message" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
The core code where you want the data to get inserted to the div
$("#mes").text(html);
Please note that you get the value returned from the php script, and not some html. Hence it is better to rename your expected return value as some other identifier say mydata
$("#mes").text(mydata);
Please let me know if you are looking for something else.
Updated based on OP's further query
Please read jquery API docs, It gives you an idea of the supported functions http://api.jquery.com/.
To your specific question, yes you can hide or show a particular div using the below calls:
//check your condition and show or hide the div accordingly
$("#mydiv").show();
or
$("#mydiv").hide();

How to clear text area with a button in html using javascript?

I have button in html
<input type="button" value="Clear">
<textarea id='output' rows=20 cols=90></textarea>
If I have an external javascript (.js) function, what should I write?
Change in your html with adding the function on the button click
<input type="button" value="Clear" onclick="javascript:eraseText();">
<textarea id='output' rows=20 cols=90></textarea>
Try this in your js file:
function eraseText() {
document.getElementById("output").value = "";
}
You need to attach a click event handler and clear the contents of the textarea from that handler.
HTML
<input type="button" value="Clear" id="clear">
<textarea id='output' rows=20 cols=90></textarea>
JS
var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');
input.addEventListener('click', function () {
textarea.value = '';
}, false);
and here's the working demo.
Using the jQuery library, you can do:
<input type="button" value="Clear" onclick="javascript: functionName();" >
You just need to set the onclick event, call your desired function on this onclick event.
function functionName()
{
$("#output").val("");
}
Above function will set the value of text area to empty string.
Your Html
<input type="button" value="Clear" onclick="clearContent()">
<textarea id='output' rows=20 cols=90></textarea>
Your Javascript
function clearContent()
{
document.getElementById("output").value='';
}
You can simply use the ID attribute to the form and attach the <textarea> tag to the form like this:
<form name="commentform" action="#" method="post" target="_blank" id="1321">
<textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
Enter your comment here...
</textarea>
<input type="submit" value="OK">
<input type="reset" value="Clear">
</form>

Putting specific element into variable

how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks
The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});
If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>​​​​​​​​​​​​​​​​​​​
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );​
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/

Categories