Do you know how to create a form with edit mode? For details: Suppose I've a form with 5 or 6 fields which has button 'Save' and 'Cancel' . If I save the form, it'll show the plain form without text fields and a button named 'Edit' will appear. And When I'll click on 'edit', the form will be editable. Is it possible?
Full example, can handle as many input fileds as you want.(no select,textarea..)
The code is written based on modern browsers in pure javascript and css3.
Tested on Chrome.
hides and shows the buttons with css3,
saves the default values to apply them on cancel,
responds on the enter button.
If any questions .. just ask
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern Form</title>
<style>
label{display:block;}
form input{border:none;outline:none;box-sizing:border-box;}
form.invert input{border:1px solid rgba(0,0,0,0.2);outline:none;}
form>button:nth-of-type(1){
color:green;display:none;
}
form>button:nth-of-type(2){
color:red;display:none;
}
form>button:nth-of-type(3){
color:yellow;display:inline-block;
}
form.invert>button:nth-of-type(1){
display:inline-block;
}
form.invert>button:nth-of-type(2){
display:inline-block;
}
form.invert>button:nth-of-type(3){
display:none;
}
</style>
<script>
(function(W){
var D,form,bts,ipt;
function init(){
D=W.document,previous=[];
form=D.getElementsByTagName('form')[0];
bts=form.getElementsByTagName('button');
ipt=form.getElementsByTagName('input');
form.addEventListener('submit',save,false);
bts[1].addEventListener('click',cancel,false);
bts[2].addEventListener('click',edit,false);
}
function save(e){
e.preventDefault();
form.classList.remove('invert');
var l=ipt.length;
while(l--){
ipt[l].readOnly=true;
};
previous=[];
//send your info here
}
function edit(e){
e.preventDefault();
form.classList.add('invert');
var l=ipt.length;
while(l--){
previous[l]=ipt[l].value;
ipt[l].readOnly=false;
}
}
function cancel(e){
form.classList.remove('invert');
e.preventDefault();
var l=ipt.length;
while(l--){
ipt[l].value=previous[l];
ipt[l].readOnly=true;
}
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
<form>
<label>A:<input readonly></label>
<label>B:<input readonly></label>
<label>C:<input readonly></label>
<button>Save</button><button>Cancel</button><button>Edit</button>
</form>
</body>
</html>
ps: the handler function could be merged into one bigger function... but i think this way it's easier to understand
The following is a very simplistic sample of how this might be done.
It is just to give you an idea - there are many ways to approach this.
Works in chrome, completely untested in other browsers (for example: assumes 2 pixel border)
What you do will depend on your UX and browser requirements
Sample Fiddle
HTML
<span>Example</span>
<div class="example">
<form>
<label for="ex1fld1">Field 1:</label><input type="text" name="ex1fld1" readonly value="Hello"></input>
<label for="ex1fld2">Field 2:</label><input type="text" name="ex1fld2" readonly></input>
<input type="button" value="Edit"></inpu>
</form>
</div>
CSS
div {
margin-bottom: 20px;
margin-top: 10px;
}
input[type="text"] {
font-size: 14px;
}
input[type="text"][readonly] {
border: 2px solid rgba(0,0,0,0);
}
Script (jQuery used here, but not required for something like this)
var readonly = true;
$('.example input[type="button"]').on('click', function() {
$('.example input[type="text"]').attr('readonly', !readonly);
readonly = !readonly;
$('.example input[type="button"]').val( readonly ? 'Edit' : 'Save' );
return false;
});
Related
I want an HTML <input type="text"> element that has to be clicked on before it can be edited. Kind of along the same lines of how, in Windows or Mac OS Finder, you need to click on a filename before it turns editable.
I at first tried setting the <input> to disabled, and having JavaScript that "enables" it when clicked. This did exactly what I wanted in Chrome, but didn't work in Firefox, because in Firefox apparently making it disabled removes its ability to react to clicks as well.
How do I get this behavior in a way that works well across modern browsers?
You can listen on the parent div and check if input is clicked and then enable it.
Updated answer is working in firefox too.
function enableInput() {
if(event.target.id == 'text-input-overlay') {
event.target.style.display = "none";
document.getElementById("text-input").disabled = false;
}
}
<html>
<body>
<div style="position:relative;" id="container" onclick="enableInput()">
<label for="text-input">Input: </label>
<input id="text-input" type="text" disabled />
<div id="text-input-overlay" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</div>
</body>
</html>
You can reset the default input styles with CSS making it look like a normal text/element. Then use focus and blur events to toggle.
const input = document.querySelector('input[type="text"]');
input.addEventListener('focus', (event) => {
event.target.classList.remove('disabled');
});
input.addEventListener('blur', (event) => {
event.target.classList.add('disabled');
});
.disabled {
border: none;
background: #ccc;
}
<input id="text-input" type="text" class="disabled" value="Click Me" />
I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.
Code:
HTML
<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>
CSS
.hidden {
display: none;
}
JavaScript
function show () {
document.getElementById("mymessage").style.display = 'block';
}
Disclaimer: I only included relevant code.
Hope somebody is able to help me/spot the error!
You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:
function show () {
document.getElementById("mymessage").style.display = 'block';
return false;
}
.hidden {
display: none;
}
<form onsubmit="return show();">
<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>
I would remove the hidden class:
function show () {
document.getElementById("mymessage").classList.remove("hidden");
}
(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)
Live Example (using a button click instead of a form submit):
function show () {
document.getElementById("mymessage").classList.remove("hidden");
return false;
}
.hidden {
display: none;
}
<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">
i think this is a solution
document.getElementById("mymessage").classList.remove("hidden");
What about if you use jQuery instead?
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
jQuery('#mymessage').show();
});
});
</script>
Remember to add the library above the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
Good morning all,
I want to create a little bit js code for phpbb forum, I want to create a button, when it's clicking create code [media][/media] the problem is, i can't do Toggle, when button clicking must be create [media][/media] after when again click delete [media][/media] My code:
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
$( ".inner" ).wrapInner( "[media]" + textForMedia + "[/media]");
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>
P.S. and how do array textForMedia disappearing $(textForMedia).fadeToggle('slow', 'linear'); like this?
P.S.S. sorry for my english )
You could do one of many things as follows.
On click of a you add filled class to textarea. On click again check for the filled class and do toggle behavior.
var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{
if( $(".inner").hasClass("filled"))
{
$(".inner").empty();
$(".inner").removeClass("filled");
}
else{
$(".inner").text("[media]" + textForMedia + "[/media]");
$(".inner").addClass("filled");
}
});
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
Input video
<textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>
Searched a long time to find a solution, but can't find one specific to my needs, so apologies if I've missed something.
On my Wordpress site I have a page with a button, which in order to follow the link of that button a checkbox needs to be checked. This is the code for it...
<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>
<img src="button.png"/>
There's also some code handling this in the head:
<script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}
cbrblaccpt
</script>
Basically, if someone tries to click the bottom without checking the box, the above popup appears. Once they check the box, they are taken to the button's link.
The issue I'm having is the TinyMCE is removing the "onchange" and "onclick" parts of the code. I'm guessing because it doesn't like inline Java being there.
After a lot of looking around it seems to me that the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do that.
If someone could help in that regard, or perhaps offer another work around then I'm all ears.
Thanks a lot
Well... yes you can handle it with pure jQuery.
I've made an example for you:
REMEMBER to add the jQuery library to your document, just before this <script> and if possible, just before </body> closing HTML tag :D
jQuery:
<script>
$(document).ready(function () {
var agree = $("#accept"); //we cache the element, dont worry
$("#agreeCheckbox").click(function () {
var checked_status = this.checked;
if (checked_status === true) {
agree.removeAttr("disabled");
} else {
agree.attr("disabled", "disabled");
}
});
//we convert the button into an anchor
agree.click(function () {
window.location = $(this).data("href") + "&cbrblaccpt=true";
});
});
</script>
CSS: Because we are using a button instead of an anchor (<a></a>)
#accept {
background: url(http://goo.gl/kCsKU3) center top no-repeat;
color: #FFF;
display: block;
width: 200px;
height: 44px;
border:none;
outline: none;
cursor: pointer;
}
#accept:disabled {
opacity: 0.6;
}
#accept:active {
margin-top:2px;
}
And finally, the HTML: Note we're using data-href attribute for the link instead of a simple hrefbecause this is a button, not an anchor anymore.
<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>
JsFiddle: http://jsfiddle.net/n2zej2cg/
I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).
The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>
To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"
Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>
You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>
<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form>