Display field, allow button to edit and save html - javascript

I'm trying to create a page where a title and paragraph are displayed, along with an 'edit' button.
The goal is that the paragraph and title seems like normal text, but when the edit button is clicked, they become writeable fields that the user can edit. When the edits have been done, the user can click a save button and the html is updated.
Is this at all possible?
Furthermore, is it possible to have a 'create' button, that adds a new title and paragraph element that are blank, which the user can fill in?
I'd like to stick to html/javascript/jquery, since this won't be running on a server.
Thanks!

Plugin exists already to provide in-place editing functionnality:
jQuery InPlace Editor
jEditable

Related

How can I create a form with multiple radiobuttons/checkboxes and redirect to another page on submit?

I want to create a form with multiple radiobuttons/checkboxes and direct the user to a certain page according to the selection when the user has clicked on submit.
Example of what i'm trying to achieve
You do not select a button, you tick a checkbox. If that checkbox happens to look like a button, that is already css business, not js.
You can take a look here at how this could be done.

JavaScript dummy/proxy input for another DOM element

I'm using an iframe to get the content of a registration form on a web page, and, as I have to show this registration form inside an HTML app for Android, I'd like to analyse the html inside the iframe to search for input textfields and to use my custom text field as "dummy" or "proxy" for the considered element:
Let me explain better:
As the web page wouldn't give the user the same easy approach as an app, instead of clicking on a textfield and having the problem that the virtual keyboard overlaps the other fields making it difficult to go further.
I want to create a div that covers the iframe and has a text field inside with the same functionality as the one clicked: by this way after entering the text into the dummy field and clicking an ok button aside, the clicked field would be updated and all the other things hidden (virtual keyboard, etc.).
It would be simple if the goal was just to copy a text from a field to another, but the real problem is that the clicked field could have some events like onkeypress or onchange (e.g. to autocomplete) and so on, and I should get the same behaviour on the dummy field.
In an imaginary world I'd do:
document.getElementById("dummy") = document.getElementById("original")
And then destroying and recreating the dummy whenever required.
Do you know if is there something possible to do?
You can't read a div from inside of an iframe after the iframe has loaded. The reason for this is to prevent hackers from making programs that can grab your credit card numbers from web-based forms through iframes and then use the apps to record them.
UPDATE
You would have to retrieve the entire form in the background, then render it again using webkit, then when the person clicks submit, you would have to submit the exact same form data to the host from your device.
Its possible, but I don't see a good reason why you would ever need to use that.

Submit Lotus Notes XPage form from outside with plain JS

I have a simple Lotus Notes XPage with only an editable RichText dialog that is embedded in a bigger form using an iframe.
The bigger form has a submit button, which triggers some javascript and finally a notes agent which saves all non-richtext values that are inside the bigger form.
Of course the user shall not have to use two submit buttons, so I won't have a (visible) submit button for the XPage. Instead, I want to use javascript to tell the iframe to submit the form.
Using iframe.document.forms[0].submit() does not work - the form is indeed submitted to the Notes server, but XPages won't save the changes I made.
Using a simple XPage button with the action "Save Data Sources", saving works like a charm, but I don't want the user to have to click two buttons in the correct order.
I also tried the following javascript code to fill some invisible fields with the values that IBM submits to the server, but this does not help either:
iframe.document.forms[0].elements["view:_id1:inputRichText1_h"].value = iframe.document.forms[0].elements["view:_id1:inputRichText1"].value;
iframe.document.forms[0].elements["view:_id1:inputRichText1_mod"].value = true;
iframe.document.forms[0].elements["$$xspsubmitid"].value="view:_id1:_id4";
iframe.document.forms[0].elements["$$xspsubmitscroll"].value="0|0";
iframe.document.forms[0].submit();
So now I ask you: how to correctly submit that form content, without the user actually clicking the XPages button? Can I programmatically trigger a click on that button, which would be indifferent from a human actually clicking, except for the human?
have an ordinary div with a fixed id and inside this div have a computedtext that will compute the clientsideid of the "save button" and return that inside the div
and use this clientside js code to do the actual click
var id=iframe.document.getElementById("button").innerHTML
var button=iframe.document.getElementById(id)
button.click()

User can edit paragraph of html

Well, I have some paragraphs in my php that is coming from a database, and I want the user to have the ability to double click the text or press a button, edit the text, and then save it in database. Is it possible?
Sure you can.
All you need to do is put a submit button that whenever it is clicked you preview a textarea. Then you show the value from the database on the textarea (by SELECT on the SQL command) and then after the 'send' submit button (after the user finished editing) take the value the user wrote by the name of the textarea and put it instead of the text you previewed (INSERT INTO command).
You can avoid using a textarea by setting the contentEditable property to true or false on the element that contain the text.
For example, if the HTML is like :
<p id="sometext">This is the paragraph you cant to be able to edit</p>
You can use document.getElementById("sometext").contentEditable = true; in JS to make it editable - and document.getElementById("sometext").contentEditable = false; to reverse it.
Then you could for example retrieve the innerHTML of the element when done with editing, and send it via AJAX to a PHP processing page (updating into MySQL DB) ^^
Yes, you can. You'd need a textarea with submit button, and then you would take the contents of the textarea and use SQL update to update the database with the contents of the textarea.
A full answer is a tad to broad for Stack Overflow.

how to inject text into a textbox with firefox extension

This question was probably asked few time by now... but I didn't find any solution in the last 2 days so I'm asking it in here.
I need to inject some text into a textbox that has an ID and I already know it. the scenario is like that:
The user insert a text into the textbox inside my toolbar.
The user clicks on a button in my toolar.
The function in the button should redirect the user to a new page in the background, inject a text into a specified textbox and click a button in that webpage.
Return a link that is generated on the webpage.
I know how to open a new webpage. now all is left is the rest.
I can't seem to inject the text into the specified textbox.
Also to note, I can't use greasemonkey on this project and that's why I will have to write everything I'll need to write.
If you can direct me to the starting point for this problem it would be nice.
The textbox is XUL textbox or html textarea?
It look like your scenario is simulate submit a form in background, why not just directly create a XMLHttpRequest to do this, no need to interactive with UI.
Update:
If it is a XUL textbox, you can use value property
var textbox = window.document.getElementById(textboxId);
if (textbox) {
textbox.value = 'your text';
}

Categories

Resources