I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
Related
I am using the autocomplete element from the Moodle Form API on a Moodle form. I preload the autocomplete element with a list, set multiple to true, and tags to true. This allows the user to add elements to the list if they don't already exist. A user can add an element by typing in the text and either clicking enter or clicking off of the autocomplete element. This event will take whatever the text is in the autocomplete and add it to the list. I don't want an element to be made every time the user has entered text and clicks off of the autocomplete, rather just when the user has entered text and clicks enter. Is there a way to do this using Moodle's Form API autocomplete or should I go about this a different way?
There is no easy solution to this issue. However I believe I have started to find a way to do what you would like. If you go into lib\amd\src\form-autocomplete.js and head down to about line 728 (using Moodle version 3.7) you will see this line:
return createItem(options, state, originalSelect);
This is the line that triggers the creation of a new tag whenever the auto-picker gets its focus lost (click off). If you comment out this line, that click off event will no longer trigger that creation. However it must be noted that this will cause it to be disabled across your whole site, for all auto-pickers.
Obviously I do NOT recommend doing this, as with it being a core Moodle function it will most likely revert as soon as you update Moodle, causing many potential issues down the road. However, as this question has not seemed to get much attention, I wanted to add this just to give you and/or other people viewing this somewhere to start.
I am currently looking into creating a copy of autocomplete.php (the php element that mform uses for auto-pickers) and adjusting its calls to use a separate, slightly adjusted version of lib\amd\src\form-autocomplete.js. I will update you with any progress I personally make, but hopefully this information can get the ball rolling for you or other developers on this site.
This is the situation, I've got a big array ( 280 items ) which creates a really big form by going trough loops.
I want the user to be able to disable certain items, so they can 'pre make' their form ( and skip the not used ones ), You are probably going to say i can just remove what's not needed. But they need different items from the array every time they use it.
So how would i make a page where they can just use checkbox to 'change' the form. ( if possible at all.)
Thanks,
Mike
edit:
Did not think of sharing code, here:
The array : http://pastebin.com/EnwHsqtK
the form : http://pastebin.com/y2XSFBG4
the page which makes a .txt file from the given answers. http://pastebin.com/UaUcsj2z ( not sure if anyone would need this. )
Might be a bit messy. I'm new in PHP, and only programming for a year. Also dont mind the language please.
If you want to permanently record form preferences/settings for each user, you'd want to create an additional table or column(s) in your database for this, give the users additional checkboxes on the form to indicate their preferences, receive this input and store it in the database, and of course finally disable certain fields based on their settings.
But if you just want to give the users a temporary way to disable certain fields (with no preferences saved permanently), you would use JavaScript in your output. You would add more form controls (checkboxes or buttons or whatever) to the HTML and then add JavaScript code snippets into that HTML to disable form elements when the user clicked on the controls. This kind of making changes when users click is called "triggers that fire based on events". The most commonly-used event is called "OnClick()" and the JavaScript code for it will execute when a user clicks on something.
Many folks who use JavaScript also find it helpful to use the functions in the jQuery library instead of raw JavaScript. To do this, you just add one line of HTML to the top of your page to include the JavaScript libraries from a publicly-hosted server, then you can use jQuery commands in your page.
The only thing to remember when you first start using JavaScript/jQuery is that it only runs on the client browser - its code cannot talk directly to the server, the database, or many things you can access in PHP. JavaScript/jQuery is specifically used for making your HTML pages more interactive. Plain HTML doesn't have much razzle-dazzle. JavaScript allows users to do things like enable and disable form fields on-the-fly.
I would like to implement an editable "p" element which will update a corresponding table of a database after the user presses enter or is done editing the information (Similar to how the newest version of phpmyadmin works.)
I would like to avoid using javascript and use strictly php/html.
Does anyone know how can be done or could point me in the direction of a tutorial or site discussing this topic?
It's not possible to do what you'd like to do without some Javascript, unless you're fine with using traditional HTML forms and requesting an entirely new page for every update.
"AJAX" is the technique being applied in phpMyAdmin (and anywhere you see "live" changes, without the page being refreshed.
Additionally, paragraph (<p/>) elements aren't editable input fields.
how about using AngularJS and extending the following to write back to the DB:
http://tamaspiros.co.uk/2013/05/28/inline-editing-with-angularjs/
I am not sure how to word the question because I don't really know what exactly I'm even asking for. Basically I have built a small sales portal that puts info in a database and then spits it back out in various ways. Occasionally the records need to be updated, but I need a way to update them from the web page where the records are displayed (without going to a completely different page) so that the sales people do not have to go into the database to change the records. I know how to use the UPDATE function with PHP, what I would like to do is have an "Edit" button at the end of each row and have the information become changeable when the button is clicked. What programming language would I need to do this in? How would that code be structured? I am really only familiar with PHP, HTML, and CSS.
Thanks for your help!
You're going to need javascript to handle the form fields the way you mentioned.
Each record row wil have the original value and a hidden input
Javascript will hide the original value and show the input
You could either have a save button at the end of each record row or a master "save all" button". Having multiple at the end of each record will be easier but from a users point of view maybe a bit cumbersome.
Use AJAX to send the updated data to the server - this should be handled in the "save record" javascript function.
Then you'll need PHP or some other server side language to actually update the record.
If i have a website running php and apache, what do i need to be able to attach a scanner to it? How do i get the scanner to fill in a value on one of the webforms on my page?
I just did this for an application. It's actually simple. The scanner is just another input method and is, in fact, similar to a keyboard. When you scan the barcode the data is decoded by the scanner and sent to whatever application is waiting to receive it. In the case of a web-based application it would be a form, most likely with a textarea with focus. The data would then populate the textarea just as if someone had typed the barcode's data into it. The form is then submitted and processed normally.
Just make sure the textarea has focus or else the data will go either nowhere or to wherever focus is (which may be another form field or the address bar).
I have yet to figure how how to get the form to auto-submit upon the entry of the barcode data as the scanner does not send event information (i.e. submit) and special characters such as tab (\t) do not seem to work. (If anyone knows how to accomplish this I am very interested in knowing how it can be done).
For actually creating barcodes in PHP, you might want to have a look at:
http://www.mribti.com/barcode/
http://www.ashberg.de/php-barcode/
Usually, these scanners are equivalent to a keyboard input, so you just select the appropriate input point on the web page, scan, and then submit the form.
WASP makes a line of barcode scanners that simply plug into USB or PS/2 inputs and basically convert the barcode scanned into the characters, just like a user typed them using a keyboard. They have an FAQ and help videos that may be of assistance, too.
When designing your web app, depending on how users interact with it, you can use Javascript to move focus from one field to another so that a user can scan barcodes sequentially without having to click on the field where the characters go. (Similar to how some forms move focus as you type data with a known length, such as a zip code or phone number.)
You can try this:
I think this is the best way to integrate barcode in web application
using php.
integrating barcode scanner into php application?
I hope this link is usefull to all.
Using an autofucus input is the better way. You just have to make sure that you create a for and add autofocus to the input box. So each time a user scans any item, the form is automatically submitted. So just give the form an id and handle the data easily with jquery