how to get Ckeditor output in html web page - javascript

<body>
<textarea id="content"></textarea>
<input id="data" type="text"/>
<input id="insert" type="button" value="Insert at Cursor"/>
<div class="container mt-3">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('content');
</script>
</body>
</html>
HOW TO GET THE OUTPUT ANY FORM WITHOUT A DATABASE IAM NEW THIS PLEASE HELP, AND IF YOU COULD ATTACH THE SOURCE CODE IT WILL BE A GREAT HELP.

Ckeditor has its own function for that,
CKEDITOR.instances['SELECTOR-HERE'].getData();

Related

Convert JS to autoload

Currently I use
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#output").load("https://somesite.com/Search.html");
});
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
to implement an offsite html into my current page.
Howevee this way, the visitor is required to press the "Search" button to reveal the content.
Is there a way to 'automatically' load this, without user interaction ?
(I know a way to trigger the button at siteload, but I'd rather have the button not be there in the first place)
Move the load call out of the click event listener:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://somesite.com/Search.html");
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>

Problem accessing a form within a script with Jquery and HTML

I have problems accessing my form from the JS file, and I don't know how to access it. Here's my code:
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<script id="view-contact" type="text/html">
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
</script>
Don't put your html inside the <script> tag. Put your JavaScript / JQuery inside the script tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
<script>
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
</script>

jQuery “undefined” prints when .html().show() is used

So I am concatenating using an variable and it will only print undefined.
I have looked for hours for the solution and haven't found the reason closest was form this question jQuery "undefined" prints when appending to html element but the solutions give have still not worked.
Please help and explain so I can learn and understand.
thank you.
my code below.
$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
nam = $("textBox1").val();
if(nam != ""){
$("#welcome").html("<p>Hello "+ nam +"</p>").show;
}
;});
});
this is my jquery/javascript
and here is my html
<body>
<div id="container">
<div id="inputBox">
Here is my first text box.
<input id="textBox1" type="text" value=""/>
<button id="sayHello">Submit</button>
</div>
<div id="welcome">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="myJQ.js"></script>
</body>
I have edit your code try it
$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
nam = $("#textBox1").val();
if(nam){
$("#welcome").html("Hello "+nam)
}
});
});
<body>
<div id="container">
<div id="inputBox">
Here is my first text box.
<input id="textBox1" type="text"/>
<button id="sayHello">Submit</button>
</div>
<div id="welcome">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="myJQ.js"></script>
</body>

Dropdown Div Doesn't Work

The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});

Paypal preapproval payment using embeded Light box

I am working in embedded adaptive preapproval payment now the issue I am facing is how to implement preapproval payment using light box.
I have implemented pay action by setting paykey using light box its working good, but same the thing I have followed with little modification in code for preapproval request was not working light box get hangs up. kindly let me know what I am missing here.
HTML code:
<html>
<head>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapprovalkey" target="PPDGFrame" class="standard">
<label for="buy">Buy Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="light">
<input id="preapprovalkey" type="hidden" name="preapprovalkey" value="{{preapprovalkey}}">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });
</script>
</body>
</html>
The dg.js is outdated as PayPal is sunsetting the DG product, you would include the 'apdg.js' instead, and change the action URL from pay to preapproval
<html>
<head>
<title>AP Redirection Demo</title>
<script src="https://www.paypalobjects.com/js/external/apdg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/preapproval" target="PPDGFrame" class="standard">
<label for="buy">Pay Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="light">
<input id="preapprovalkey" type="input" name="preapprovalkey" value="insert_preapproval_key">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlowMini = new PAYPAL.apps.DGFlowMini({
trigger: 'submitBtn'
});
</script>
</body>
</html>

Categories

Resources