<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
<script>
CKEDITOR.replace( 'editor1' );
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else
{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
</script>
</body>
</html>
I have ckeditor 4 in one page. On page, submit button is by default disabled I want to put validation on ckeditor4 textarea on check whether it is empty or not if it is empty put button as disabled and if some text is in ckeditor textarea then button should be visible. So How can I Do it with Javascript?
Ckeditor Textarea code:
<textarea cols="10" id="editor1" name="editor1" rows="10" onchange="val()"></textarea>
Submit Button Code:
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
Javascript code:
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
You may try this.
var editor = CKEDITOR.replace('editor1', {});
editor.on("pluginsLoaded", function(event) {
editor.on('contentDom', function(evt) {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function(e) {
if (CKEDITOR.instances['editor1'].getData() == "") {
document.getElementById("nxtbtnwht1").disabled = true;
} else {
document.getElementById("nxtbtnwht1").disabled = false;
}
});
});
});
<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled />
Related
I need to design a text box textbox
As in the the above picture.
It should have two text box and if i edit one it should reflect in another(via versa).
Kindly help me on this.
Thanks in advance
Does this meet your requirements?
function showPopup() {
document.getElementById('2').style.display = "block";
}
function syncValueWith2() {
document.getElementById('2').value = document.getElementById('1').value;
}
function syncValueWith1() {
document.getElementById('1').value = document.getElementById('2').value;
}
<textarea onkeyup="syncValueWith2()" id="1"></textarea>
<br>
<textarea onkeyup="syncValueWith1()" id="2" style="display: none;"></textarea>
<input type="button" value="Show Popup" onclick="showPopup()">
#Keshav solution will update everytime you finish editing the text area
If you want to update it directly when you press the key, you can use jQuery and with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea-1" rows="4" cols="50">
test
</textarea>
<textarea class="textarea-2" rows="4" cols="50">
test
</textarea>
</body>
<script type="text/javascript">
var textarea1 = $('.textarea-1');
var textarea2 = $('.textarea-2');
textarea1.keyup(function() {
textarea2.val(textarea1.val());
});
textarea2.keyup(function() {
textarea1.val(textarea2.val());
});
</script>
</html>
Is this what you want?
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
var button = document.getElementById("button");
function Show(button) {
if (button.innerHTML = "Show") {
button.innerHTML = "Hide" ;
textarea2.style.display = "inline";
} else {
button.innerHTML = "Show" ;
textarea2.style.display = "none";
}
}
function change1() {
textarea2.value = textarea1.value;
}
function change2() {
textarea1.value = textarea2.value;
}
<textarea id="textarea1" onkeyup="change1();"></textarea>
<textarea id="textarea2" onkeyup="change2();" style="display:none"></textarea> <br />
<button onclick="Show(this)">Show</button>
I tried to get value of pop up window in textbox of parent window. But it's not worked. Could any one helped on this?
Parent.jsp
<style>
a:hover, a:active {
background-color:red ;
}
</style>
<form action="FirstTest" method="post" id="TestForm">
<input type="text" id="PrintHere"/ ><br><br>
<a target="_blank" onclick="SelectName('POST')"> Repository Link </a>
</form>
<script type="text/javascript">
function SelectName(methodType) {
var win=window.open("Popup.jsp", "thePopUp", "width=300,height=100, left=24, top=24, scrollbars, resizable");
win.focus();
}
</script>
Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var Textvalue;
Textvalue.value = document.getElementById("ddlNames").value;
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = Textvalue.value
}
window.close();
} </script>
Change your code like below on Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>
I am trying this link http://jsfiddle.net/QRj83/ to make it work on my phonegap app. The codes is working properly in the website but not in the phonegap app. There is no error shown and it's strange why is not working. Have someone encountered that problem in phonegap?
This is my code in js:
$('input').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
Html code:
<input type="textbox" />
<input type="textbox" />
<input type="textbox" />
Thank you.
<!DOCTYPE html>
<html>
<body>
<input type="textbox" id="text1" name="text1" />
<input type="textbox" id="text2" name="text2" />
<input type="textbox" id="text3" name="text3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var name="text";
var count=3;
$( document ).ready(function() {
setIndex();
});
function setIndex() {
for(var i=1;i<=count;i++)
{
document.getElementById(name+i).tabIndex = i;
document.getElementById(name+i).onkeypress = function(event) {
myFunction(event);
}
}
}
function myFunction(event) {
var x = event.which || event.keyCode;
if(x==13)
{
var item=event.target.id;
var tabIndex=parseInt(item.replace(name,""));
if(tabIndex==count)
{
document.getElementById(name+1).focus();
}
else
{
tabIndex=tabIndex+1;
document.getElementById(name+tabIndex).focus();
}
}
}
</script>
</body>
</html>
I would like to add code that allows me to use the enter key in addition to a cursor click to initialize a google map at the location that is submitted via a text box. I have the click part down, the enter key, not so much :(
<input id="address" type="text">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function search_func() {
var address = document.getElementById("address").value;
initialize();
}
</script>
Here is your solution:
<!DOCTYPE html>
<html>
<head>
<title>WisdmLabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="address" type="text" onkeypress="handle(event)" placeholder="Type something here">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function search_func(){
address=document.getElementById("address").value;
//write your specific code from here
alert("You are searching: " + address);
}
function handle(e){
address=document.getElementById("address").value;
if(e.keyCode === 13){
//write your specific code from here
alert("You are searching: " + address);
}
return false;
}
</script>
</body>
</html>
Feel free to ask any doubts or suggestions.
You would want to add a listener to your text box that fires search_func on keydown, when the key pressed is enter (13 is the keyCode for Enter):
<input id="address" type="text" onkeydown="key_down()">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function key_down(e) {
if(e.keyCode === 13) {
search_func();
}
}
function search_func() {
var address = document.getElementById("address").value;
initialize();
}
</script>
function search_func(e)
{
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search').click();
return false;
}
return true;
}
Can anyone please help me resolve this conflict with my javascript validation?
The form does not submit. But if I remove onsubmit="return btnSubmitPD_OnClick() it redirect the form correctly. But of course I need that function.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Submit').click(function() {
var emailVal = $('#email').val();
$.post('checkemail.php', {'email' : emailVal}, function(data) {
if(data=='exist') {
alert('in'); return false;
}else{
$('#form1').submit();
}
});
});});
</script>
<script type="text/javascript">
function appIsEmail(str){
var at="#";
var dot=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);
if (str.indexOf(at)==-1) return false;
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr) return false;
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr) return false;
if (str.indexOf(at,(lat+1))!=-1) return false;
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot) return false;
if (str.indexOf(dot,(lat+2))==-1) return false;
if (str.indexOf(" ")!=-1) return false;
return true;
}
function btnSubmitPD_OnClick(){
frmReg = document.getElementById("form1");
if (!appIsEmail(frmReg.email.value)){
alert("Please enter a valid email address!");
frmReg.email.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="view.php" onsubmit="return btnSubmitPD_OnClick()">
<p>
<input type="text" name="email" id="email" />
</p>
<p>
<input type="button" name="Submit" id="Submit" value="Submit" />
</p>
</form>
</body>
</html>
Several Things:
It is better to bind a submit event to your form, rather than a click event on your submit button, this is to cater for cases where users press enter on the email text field:
$('#form1').submit(function() { // change from $('#Submit').click
Then inside the new submit handler, you call call the email validation method:
var emailVal = $('#email').val();
if(btnSubmitPD_OnClick() === false) return false;
Then, to avoid infinite submit loop, you need to change:
else{
$('#form1').submit();
}
to
else{
$('#form1')[0].submit(); // native submit on form element
}
Or as mplungjan noted in his comment, simply change your
<input type="button" name="Submit" id="Submit" value="Submit" />
To use type="submit"
<input type="submit" name="Submit" id="Submit" value="Submit" />
And add
if(btnSubmitPD_OnClick() === false) return false;
Before your call to $.post