Creating a textarea with Strong, Italic, underline buttons - javascript

probably some of you had follow my previous questions, I'm developing a simple guestbook in order to learn php. Yesterday I've implemented the function to delete messages from the guestbook.
Today I want to allow users to format their message with like every form (also here on stackoverflow)
I want to add some buttons [B] [I] [U] which will format their messages on the guestbook (only their messages) with bold, italic and underline (in future I think I'll allow to choose colors of the message).
How can I do this? Which language I have to use? (By now I'm using php,html and css but I know something about javascript, ajax, jquery)
Some details:
<div id="functions">
<form method=post id="addForm" name="addForm" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>>
<span class="label" style="text-align: center"> Comment </span> <textarea class="text" type=text cols=55 rows="7" name="comment"></textarea><br>
<br><input class="submit" type=submit name=submit value="Submit">
</form>
<a href=viewGuest.php>View Guestbook!</a>
</div>
All comments are stored in a mysql database but I don't think this is relevant.

You coud make use of a javascript component, like CKeditor (http://ckeditor.com/). It will allow you add HTML content for your guestbook, and therefore, you could make use of HTML tags for bolds, italics,...

Related

Is it possible to make a XSS in this scenario?

I am learning how to find vulnerabilities in web-apps. I am trying to find an XSS vul. in an app.
There is a reactjs webapp. Exist two possibilities, two inputs that change information of a user, one is the bio and other changes the webpage of the user.
<div class="sc-hMqMXs gwiZKI">
<div class="sc-hSdWYo jeEjXR" aria-disabled="false">
<textarea data-gr="textarea" maxlength="160" placeholder="Describe yourself briefly in one or two sentences…" rows="4" height="84" aria-invalid="true" class="sc-eHgmQL liNjVN">" /> <script>alert();</script>
</textarea>
</div>
</div>
When i try to set an input with script tag, there has to be some kind of stringify that dont let me go foward to it.
This is the output of the first input:
<p class="Builder__BiographyStyle-v13eqd-0 gOpKPy sc-cBdUnI dWHKbJ" style="color: rgb(116, 116, 116);"><script>alert(1);</script></p>
The payload was: <script>alert(1)</script>
The second one is the webpage:
the code of the input es almost the same as the first:
<input data-gr="input" maxlength="160" placeholder="myhomepage.eu" aria-invalid="true" class="sc-jWBwVP bCXLCE" value="{{javascript:alert(1)}}">
And the output of the input on HTML is:
<a rel="noreferrer noopener" target="_blank" display="primary" href="https://{{javascript:alert(1)}}" class="Link__TextLinkStyle-sc-18o82bi-0-a bAMZxp">https://{{javascript:alert(1)}}</a>
This means that the input is stringified and the https:// is added. How could be the syntax to make an XSS vul execute code in there, is it possible?

Append a certain text to user input to textbox html/js

Hi there wonderful people of Stackoverflow. So I am currently setting up a form for users to add data to the database. One of the the form-elements being a textbox where the value should be "nn minutes". I want the user to be able to edit the nn however the minutes should always append to the users input. How do I go about solving this?
You can try following:
<form>
Select minutes spent:
<input type="number" name="quantity" min="00"><span> minutes</span>
<br><input type="submit" value="Submit form">
</form>
Note type="number" not supported in IE9-
Depending on your front end framework, you can use some masked input plugins to do that.
And if you are not using, jQuery it's a good one to begin.

Add WYSIWYG to already existing textareas without losing PHP functionality

I have some existing forms with text areas made for editing. They first retrieve information from the database, the user can edit them and then update them in the database.
The problem is that in the database I have some text from MS Word and in the textareas I see Word formatting. I tried using TinyMCE Editor, but it replaces the existing textareas with custom code - losing classnames and other things that I refer to in my code and nothing works anymore.
Is there any minimal WYSIWYG editor that I could implement into my website without losing the already existing functionality?
Or are there any ways to change the Word formatting without using a plugin?
This is my example form:
<form id="myForm7" action="api/userInfo_1.php" method="post">
Name: <textarea id="nazwa-artysty" type="textarea" name="Nazwa" class="nazwa"></textarea>
Songs: <textarea type="text" name="Piosenki" class="piosenki"></textarea>
<textarea type="input" id="" name="Id7" class="hidden-pic" ></textarea>
<button type="submit" class="cms-button">Save</button>
</form>
The text to be edited is inserted into the textareas via PHP using the name of the textarea in $.POST. When using TinyMCE, the textarea doesn't exist anymore and therefore there's no text inserted into it.

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

How can i open Thickbox from a form and feed it with data?

I have a simple search php script, within that script there is some html and javascript to make a search input field and a button.
What i am trying to do is when someone enters a search, and presses submit, thickbox opens, and the results will be displayed in the thickbox.
What i have so far is the search field and button, when i press submit, it briefly shows the thickbox, and than is overloaded by the result page, but than with no search results.
Here is the code:
<form method="get">
<input type="text" name="merk" size=10 style="font-weight: bold; background-color:#D5DF23;">
<input type="image" name="merk" class="thickbox" onclick="document.location.href='searcher.php?keepThis=true&TB_iframe=true&height=520&width=800';" src="zoek1.jpg" width="110" alt="Zoek" onMouseOver="this.src='zoek2.jpg'" onMouseOut="this.src='zoek1.jpg'">
</form></input>
It would seem that you lack some of the basic understanding of HTML, JavaScript and probably also programming in general, you really should spend some more time getting the basics down.
It would seem that Thickbox is not designed to be used the way you want to. In any case, I took a look at the source code, and it's pretty easy to use the functionality in a more conventional manner making it more flexible (just call the function tb_show with the appropriate parameters). What you want would be something like this:
<input type="text" id="merk" size=10 style="font-weight: bold; background-color:#D5DF23;">
<img onclick="tb_show('title','searcher.php?merk='+document.getElementById('merk').value+'&TB_iframe=true&height=520&width=800',false)" style="cursor:pointer;" src="zoek1.jpg" width="110" alt="Zoek" onMouseOver="this.src='zoek2.jpg'" onMouseOut="this.src='zoek1.jpg'">

Categories

Resources