HTML button to open user edit fields on - javascript

I have a page that displays fruitName, score, and comments (ex: "Apple", "3/5", "Juicy and sweet!"). On the bottom of the page, I want to create a "EDIT" button, which allows me to edit the score and comments by changing them into editable fields (i.e. text field for comment, drop-down menu of 1-5 scale for score), and the originally "EDIT" button now reads "SAVE CHANGES". I am using GAE+Python+Webapp2+Jinja2
What I have so far
<h4>{{fruitList["fruitName"]}}</h4>
Score:{{fruitList["score"]}}
Comments:{{fruitName["comments"]}}
<button type="submit" class="btn">Edit</button>
<button type="button" class="btn">Close</button>
Then, I am hoping to get something like:
<h4>{{fruitList["fruitName"]}}</h4>
Score:<input type=text>{{fruitList["score"]}}</input> #Preferably drop-down menu
Comments:<input type=text>value={{fruitName["comments"]}}</input>
<button type="submit" class="btn">Save Changes</button>
<button type="button" class="btn">Close</button>
Then once the Save Changes button is clicked, the original "display" page will show with Edit and close buttons on the bottom.
How can I implement something like this? I am trying solely by HTML without javascript, but unsure of feasibility. I want the page to remain stay put when "EDIT" is clicked (no redirects) and smoothly change from text display to text edit, or score.
Thank you in advance!

You need javascript for that.
The general idea is to initially hide the inputs and only show the text, and when the user clicks EDIT the inputs are revealed and the text is hidden. When the user clicks "Save Changes" hide the input and show the text, but copy the value to the text. When the user clicks "Close" hide the input and show the text, but copy the text to the input.
And of course, when the user clicks save changes send the changes to the server (if you need to).
Update:
By "copy" I mean you need to remember updating the text when the changes are saved, something like this:
$('#score-holder').text( $('#score-input').val() );
so that the text will hold the updated input

Related

Empty button error in wave accessibility check

Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation

JavaScript text changing functionality in Html tables

we have an issue with using javaScript over 2 HTML pages.
We want to change text in a table. There is a button you can press which opens a popup.
Here an example.
If you press the "Eintragen" button it opens a popup.
In the popup there should be a button which changes the innerHTML where the "Eintragen" button is.
So basically pressing the button in the popup should cause the "Eintragen" button to disappear and should show text instead.
Changing the text in one HTML page caused no problem. We can cause the button to disappear and showing text by pressing it. Our problem is by doing it with an extra popup where we press a button.
Here is our table and popup:
(We want to replace "Hallo" and the "Eintragen" Button through a different text with no button)
https://i.stack.imgur.com/xVAK8.png
And here is our code:
First one is the button which opens a popup (is already working)
Second one is the button in the popup which should trigger the JavaScript function.
Third one is the JavaScript code which should change the text
<td><input id="vname" name="vname"></td>
<td>Cell</td>
<td id="drei">Hallo<button class="button button-block"/onclick="popup(this.form)">Eintragen</button></td>
<button type="button" onclick="meineFunktion()">Eintragen</button>
function meineFunktion() {
window.close('schadensausmass.html');
document.getElementById("drei").innerHTML="test"
}
Do you have any tips and solutions how to make this work. We are JavaScript beginners and need some help with this.
Thanks in advance.

Replace a button that loads a prompt by its result

I have a text. Inside, I want to ask the reader questions where answers will be inserted inside the text. And I want the questions to be prompted by a button and have the button disappear when the prompt is validated.
So what I have for now is this:
Once upon a time in <button onclick="prompt('Where do you live?')">Where do you live?</button>, a very beautiful place…
It gets me the button inside my text, the prompt I want, but how do I get the result of this prompt to replace the button when I close the prompt after clicking OK?
This onclick() does what I think you want.
Once upon a time in <button onclick="this.outerText = prompt('Where do you live?');">Where do you live?</button>, a very beautiful place…
Basically, it sets the value of the prompt to the outerText of the button. outerText replaces the entire button, while innerText would place it inside the button, if you want that instead. It would look like this:
Once upon a time in <button onclick="this.innerText = prompt('Where do you live?');">Where do you live?</button>, a very beautiful place…

Does JQuery/Django have a way to build "click the text to edit"?

A Flickr page displays the title and description of the photo.
When I click on the description, it will turn it into a text-box, with a Save button. Then, I can edit what I want...and click "Save."
It'll save it via AJAX. It doesn't go to a different page or anything...it just turns the current description into a wiki-like text box.
jEditable
http://www.appelsiini.net/projects/jeditable/default.html for demo

Selection disappears when new window opens

I am currently working on a project and I am stuck. As per client requirements a small modification was made to an existing form.
Imagine the HTML page as follows:
I have added a new form element named Business Type and there are 10 options in that.
The user needs to select an option or multiple options and submit and the data would get stored in the database. The data is also getting stored in the database. I have checked that.
There is also a button within the form which opens up a small window to choose a few options. When this window opens up, the selection made in Business Type (in the form) disappears. How to prevent this from happening?
I am trying to use sessions. But is there a better and easier way to accomplish this? I want to retain the multiple selections that are made.
This can all be done client-side. Basically, you create a form with all of the questions that you want to ask and then use JavaScript to display extra questions. If the user doesn't click the button to open the extra questions, they just maintain their empty values. If they do open the extra questions, the will pop up on the page and the user will fill in the inputs. Once they are finished with those questions, you simply hide them but they still hold the values that the user set.
So put the optional fields in a hidden div in the form, and then display that div when the button is clicked.
<form ...>
... required inputs
...
...
Ask more questions
<div id="optional-inputs" style="display: none;">
<input ... />
<input ... />
'Save' optional questions
</div>
<input type="submit" value="submit" />
Then, give the #optional-inputs some CSS (or you can style it however you like):
#optional-input {
left: ...px;
position: absolute;
top: ...px;
width: ...px;
}
For the button/link that opens the other questions, add some JavaScript/jQuery to open the div as an absolute positioned window.
$('#show-optional-inputs').click(function(e) {
$('#optional-inputs').show();
e.preventDefault();
});
This will get you mostly there. You would need to bind an event to trigger the optional questions box to save/close - which is actually just hiding the box and keeping the values that the user set in the form.

Categories