I'm using the WYSIWYG editor trumbowyg to supplement the fact that our CMS sucks. The plan is to help out our authors with the HTML without removing the current system they have in place, which is just a plain form with an textarea for article content.
Unfortunately, after activating trumbowyg on the textarea, nothing posts with it, no matter what I do.
When I say "nothing posts", I mean that the form worked before I added the JavaScript to it, and stopped working after, and I am referring to PHP's $_POST array.
Here's what I've tried (although before I was just doing the basics listed on their website):
<form enctype="multipart/form-data" name="form" method="post">
<!--other inputs ignored, but present-->
<textarea name="article"></textarea> <!--this is the textarea in question-->
</form>
(function(textarea) {
textarea.trumbowyg({ closable: true }).on('tbwblur', function() {
console.log('working'); //This works
textarea.text(textarea.trumbowyg('html'));
});
})($("textarea[name=article]"));
I did start with the following, which didn't work:
$("textarea[name=article]").trumbowyg({ closable: true });
I was having a similar issue and couldn't find a solution anywhere. After submitting my question to Alex (the author of Trumbowyg), I realized the answer was staring me in the face in the Trumbowyg docs. See https://github.com/Alex-D/Trumbowyg/issues/341 .
Trumbowyg Docs
Related
I am fairly new to the world of coding and am currently designing something using WAMP to assist the misses with her maths. In short I have a page with some basic maths questions on and I have JavaScript running on it to check whether the answers are correct or not.
What I would like to know is, can I use JavaScript or something similar to add in a link that if clicked will open a popup or something similar that the user can write a few bits down to help working out the sums?
I have seen a <button onclick="window.open('whitespace.html');">Thinking Space</button> but this doesnt allow the user to write anything down, obviously as its just a link to another page.
A very basic sample, just pointing you in a possible direction:
<button onclick="window.getElementById('myDiv').style.display = 'block'">Thinking Space</button>
<div id="myDiv" style="display: none">
<textarea name="content" cols="40" rows="5">Test message</textarea>
<button onclick="window.getElementById('myDiv').style.display = 'none'">Close</button>
</div>
i think you can use window.promt
https://developer.mozilla.org/de/docs/Web/API/Window/prompt
Maybe not the best answer but works for me. I created a link to a blank page that the user can then open. They can work the questions out, minimise it, forget about it and if they were to try to open a fresh one, close it or try to refresh it, they will get a message asking if they are sure they want to continue. Works exactly as Id hoped.
<textarea placeholder="Please be aware no data will be saved here.
If closed or refreshed all data will be lost"</textarea>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Reloading will cause any notes to be lost.";
});
</script>
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
In a Flask app, I have a form with several fields. There are two submit buttons, one of which is intended to submit only information from fields one and two (even if the other fields contain text).
I reluctantly have decided to try to do this in jQuery, something I don't have much experience in. After considered using the $.post method, I settled on using $.reset.
Here's some of my code:
(home.html)
<HEAD>
<script src="/static/scripts/jquery-3.2.1.js">
</script>
<script src="/static/scripts/reset.js">
</script>
<TITLE>My UI</TITLE>
</HEAD>
(separate html file inheriting from home.html)
<form action="/" method="post">
<dl>
foo
{{ form.foo }}
bar
{{ form.bar }}
<form action="/" method="post"><p><input type=submit class="reset" value="Get Information">
Status
{{ form.status(class_="reset-this") }}
other
{{ form.other(class_="reset-this") }}
Frequency
{{ form.frequency(class_="reset-this") }}
</dl>
<p><input type=submit value=Update>
And finally, my JS:
$(function() {
$("button.reset").click(function() {
$(".resetThis").val("");
});
});
It doesn't have any effect, when I run the file, and when I try to simulate it in JSFiddle, I get a Forbidden (403): CSRF verification failed. Request aborted. error.
Is there something basic I'm missing?
Looking at your fiddle you have several issues:
You lack some serious formatting, you are not closing html tags.
You have a form inside another form, why?
you are using input type="submit" if you want to reset the inputs you have to use type="button" otherwise the form will try to submit to whatever you put on <form action="/"> hence the 403 error
you are using <form action="/"> that does nothing but generate confusion in your case.
in the jquery function you are using $("button.reset") but in your html you are using inputs and never buttons.
In your jquery function you are trying to use the class resetThis but in your html the class is reset-this
You did not attach jquery to your fiddle, it was never gonna work without it.
finally i have refactored your code here with all those problems fixed for you to build up from there. but please do some more research when you are trying to implement a technology you are not familiar with.
I have a website with lots of code, so obviously something is wrong, but I can't post all the code here. Here's the exact code I'm trying to use though.
Parent document...
<iframe name=combosIframe id=combosIframe src=getCombos.php style='position:absolute;left:300px;top:0px;width:275px;height:520px;overflow-y:scroll;overflow-x:hidden;border:1px solid black'></iframe>
<form name=colorForm id=colorForm action=colorCombos.php method=post target=combosIframe>
<input type=submit id=submitColors value=SubmitColors>
</form>
Inside the iframe, colorCombos.php page...
<script language=JavaScript>
alert('load');
function doSomething(){
alert('hi');
}
</script>
<form>
<input type=button value=ClickMe onClick=doSomething()>
</form>
Scenario: I click the parent form button to load the new page into the iframe.
Problem: the JavaScript in the colorCombos.php page does not alert, either on page load, or when clicking the button. If I view the page on its own it works fine.
Specs: php5, using Chrome browser.
Of note: there are no errors when I view the javascript console. Also there is nothing else on the colorCombos.php page. Both files are in the same directory. Thanks for any help, I'm really stumped.
Not using quotes within HTML Attributes can have undesired effects. Try adding quotes around all the values of each HTML Attribute.
Example:
<input type="button" value="ClickMe" onClick="doSomething()"/>
I started with a blank setup (which was working) copied the code from my site (which has lots of other code), bit by bit into the new document to see when the script stopped working. I ended up copying EVERYTHING (literally ctrl+a) into the new document, and it worked fine. I then renamed the new document to be the name of the old document, and it STOPPED working. The old document (i.e. the parent document) is named rangeTool.php, not that I think that is relevant necessarily.
So I have a solution, but not an answer. What in the world could cause one document to not work? Something wrong on the server? I deleted the old file off the server and loaded the new copy, but that didn't work as long as the name was rangeTool.php. For example, I renamed it testcode.php and it worked fine.
I'm still interested in why/how this happened, but at least the pressure is off now that it's working for me.
got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.