I currently have text boxes that have the border removed so they don't appear as text boxes and are read only. I also have an edit button that shows the border and allows a user to edit the information and save it to a database.
My question should I be displaying data in a text box? It just makes it easier to edit otherwise I would have to add the text box dynamically when the edit button is clicked.
Another option is a 'span' or 'div' with the html5 attrtibute 'contenteditable' set to true;
<div contenteditable="true"/>
You can toggle true/false on click button event.
You could just use a div tag and load your output there.
<div id="output"></div>
It would remain invisible until used, and it would not be editable, and of course you could mark it up any way you like if you want the output area to stand out later.
You can try like this with jquery-
Html :
<input type="text" id="data" disabled="true" value="sampel data"/>
<input type="button" id="button" value="Edit" />
Jquery:
$("#button").click(function(){
$("#data").attr("disabled", false);
});
Live Preview
Related
I'm trying to make a button become invisible but still be able to click.
Because I'm using my HTML code with adobe dreamweaver and I dont want to use this ugly standard button so I draw all of my program and pick this button to where I already draw "button"
but after I set this button to invisible so I will going to click on the picture instead........it cant be click :(
really need help
furthermore 1.how to change button size. I want it to be a lot bigger.
2. how to change input box size. I want it to be a lot bigger too.
Thank you for all help and sorry for my bad grammar that might confuse you.
This is my button
<input type="button" value="Calculate!" onClick="useif()" /> <span id="show">Output here</span>
Please see jsfidder for button invisible but stil able to click on button, PLease click on left top cornor in result
Here is code for html: <button style="opacity: 0; width:100px; height:100px;">OK</button>
js function :
$(document).ready(function(){
$('button').click(function(){
alert('ok button clicked');
});
});
add the following css to your button:
.invisible-btn {
opacity: 0;
}
or
<input type="button" style="opacity:0" value="Calculate!" onClick="useif()" /> <span id="show">Output here</span>
and you can set the size of your element by width and height properties.
Try:
<input type="button" hidden="hidden"> </input>
color must be the same as background and you could change cursor type.
I am trying to clear text from a simple text box when a radio button is clicked. Here is my coffeescript...
$("#selection_single").click ->
$("#from_date_text").text("Single Date")
$(".multiple_dates").hide()
$('#to_date').text("")
...and here is the text box...
<input id="to_date" name="to_date" type="text" />
The other JS in this particular snippet works, just not the one for to_date. Ideas?
<input> elements don't have contents.
You want to set the value of the <input>, using the .val() function.
You nailed it SLaks! Here is my finished code...
$("#selection_single").click ->
$("#from_date_text").text("Single Date")
$(".multiple_dates").hide()
$('#to_date').val("")
I am trying to create mcq question and able to add the question. but the problem appear when i already fill the textbox and when i press the add question button, the textbox value always disappear.
<form name="newdocument">
<div id="questions" data-role="fieldcontain"><input type="text" value="dsa"/></div>
<input type="button" value="Add Question" onclick="AddQuestion();" />
</form>
the javascript code is on http://jsfiddle.net/Xv3Xq/1/
Dont use innerHtml+=, its bad. The stuff you write in an input field will get erased, since its not considered when using innerHtml but rather erased. Use jQuery! Something like:
$('#addQuestion').click(function() {
$('<input />').appendTo($('#questions'));
});
I am currently overlaying a radio box on top of a unique image (found help here on stackoverflow: How can I display the checkbox over the images for selection? and http://jsfiddle.net/erSBP/1/) and it's working like the example.
However, I would like to remove the radio box so that only the unique image remains and is clickable and sends the checked value just as a normal radio button would.
The radio box input ID's are generated dynamically so I can't specify what they are named.
Is there any way to do this with Javascript or JQuery?
My current configuration is:
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="javascript:setTimeout('__doPostBack(\'965968404\',\'\')', 0)" value="8404" name="96596">
</div>
Your code is messed up. Firstly, don;t use setimeout. Just call dopostback. Secondly, you're using a javascript url on an onlick attribute. Don't do that unless you calling it through the href attribute for who knows what reason. All in all, don't use javascript urls. Here's what your code should look like
<div class="answer">
<div class="answer-image">
<img style="border-width:0px;" src="/images/white.jpg">
</div>
<input id="Questions8404" type="radio" onclick="__doPostBack(\'965968404\',\'\')" value="8404" name="96596">
</div>
If you were looking to do this with a checkbox, you could do something like this with jquery
$(document).ready(function () {
$(".answer").each(function() {
var p = $(this).find("input:checkbox");
p.hide();
$(this).find("img").click(function() {
p.prop("checked", true);
});
});
});
As this will set the input to hidden, and trigger a click event to select the checkbox. It will match the Image and the Input as contained in same "answer" div. You could adapt this to work with a radio, you would just need to know which option you wanted to select.
I have the below piece of code
<input type="text" />
<button> Submit </button>
Now, when the user types some input and clicks on the submit button, I want the input text to become non-editable but the text should still be there.Also, the submit button should dissapear. Moreover, below the input text box, i want to creat another input text with the similar to the original one with a submit button. So, this is somethings like a commenting system. Any idea on how to do this using javascript.
A very simple way to do this is below. For unobtrusive Javascript, however, you should bind the onclick event to the button programmatically. Or better yet, use jQuery, which always abstracts events, which is why we love it so.
<script>
function disableInput() {
document.getElementById("foo").disabled = true;
document.getElementById("bar").style.display = "none";
}
</script>
<input id="foo" type="text" value="Some Text" />
<button id="bar" onclick="disableInput();"> Submit </button>
Try this solution at jsFiddle
If you will be duplicating content be sure to remove id's. They must be unique per page. Here is the html:
<p class="comment">
<input type="text" value="Initial Text" />
<button>Submit</button>
</p>
Using jQuery we bind to all future buttons using live. When the button is clicked, clone the row, disable the field, and remove the button. Finally re-insert the cloned paragraph after this one:
// Execute when document is ready
$(function() {
// Bind click handler to all current and future button elements
$('.comment button').live('click', function() {
// Find the paragraph this button is in and clone it
var p = $(this).closest('p'),
row = p.clone();
// Disable text field
$(this).prev().attr('disabled',true);
// Hide submit button for this row
$(this).hide();
// Insert a new field/button pair below this one
p.after(row);
});
});
<input type="text" />
<button> Submit </button>
$('button').click(function() {
$(this).hide();
$('input').prop('disabled', true);
})
Example