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
Related
This question has two parts. The first takes precedence. Note I am new to HTML and JS, so please be verbose in your explanation.
1.) I have a form tag, inside which I have an input tag and a button, like so. The idea - which one may or may not be stylistically inclined to, is to have the user enter text, but bind it when clicking the button. This work:
<script>
var text;
</script>
<div>
<form>
<p>
<label>Text goes below</label>
<input id="in" type="text" placeholder="type stuff here">
</p>
<p>
<button id = "aButton" onclick="text=document.getElementById('in').value"></button>
</p>
</form>
</div>
The problem is, onclick also just feels like refreshing the page, meaning the user can no longer see what they have written down.
So question one is: how to stop this behavior (e.g. onclick only binds to the value and does not refresh the page so the text stays in the input field)
note: autocomplete="off" doesn't work
question two is how one would do this via event listening?
This code is working...
You were using button... that was causing the form to get posted... You need to use <input type="button">
I have placed your code to be called after click in a function and called that function.
<script>
var text;
function clickme() {
text=document.getElementById('in').value;
console.log(text);
}
</script>
<div>
<form>
<p>
<label>Text goes below</label>
<input id="in" type="text" placeholder="type stuff here">
</p>
<p>
<input type="button" value="Click Me" onclick="clickme()"></input>
</p>
</form>
</div>
Second part : Doing it via event listening
To do that via event listening you need to add following piece of code.
I'm using jQuery for that. Even if you don't know jQuery, i would say it's pretty much self explantory.
$('#id_of_your_button').click(function () {
//the code which you want to execute
});
//Consider using jquery... it handles cross browser issues well and makes things simpler
//or without jquery
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
});
Note
If you are adding event handler's via listening to event, you need to remember that you are adding the event handler code after the window load event.
$(window).load(function () {
$('#id_of_your_button').click(function () {
//the code which you want to execute
});
});
This is done to ensure that before attaching any handler to element, that particular element is present in DOM and loaded.
You should change your code as follows:
<button id = "aButton" onclick="return funcText()"></button>
<script>
var text;
function funcText() {
text = document.getElementById('in').value;
return false;
}
</script>
This will prevent the page refresh but I don't know how to do this via event listening...
I have yet another question concerning this project but here's hoping ill learn a lot from it.
So I created a function, that creates a div inside a div (which will then contain a random number from dice roll) and it works when I add this function to a button click.
But clicking the button multiple times might not be ideal for a lot of dice, so I created a form and it shouldnt create the number of divs the user decides he wants, but it doesnt seem to work. I suspect it has to do with the form refreshing the page, so instead of handling the even withh addEventListener I used inline "onsumbit" and tried to return the function but it still doesnt seem to work. What am i doing wrong? Here is the HTML and JS bits:
<form>
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
and JS:
var numInput = document.querySelector("input");
function addDice(){
var div = document.createElement('div');
div.className = "diceStyle";
div.innerHTML = "<p> here will be a dice</p>";
document.getElementById('diceTable').appendChild(div);
};
function addMoreDice(){
for(var i = 0; i < numInput; i++){
addDice();
}
}
1.You should probably include onsubmit() in form tag and add a submit button inside form.
You can use onchange() method to invoke addMoreDice() whenever the value in input box is changed
you need to add onsubmit="yourfunction()" in side form tag
and than put an input type submit inside form tag like
<form action="#" onsubmit="addDice()">
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onsubmit="return addMoreDice()">
<input type="submit" value="Submit">
</form>
<button onclick="addDice()">Add Dice</button>
<div id="diceTable">
</div>
Each time you submit a form, it gets you to a different page. Instead you could have this code as shown below, (remove form tags)
<p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber"></input>
<input type="submit" onClick="addMoreDice()">
Clicking on submit after entering the input dynamically creates divisions per your need.
I have this input text field and I would like to select (highlight really) the first 3 characters, when it changes.
<input class="descriptions" value="temp text"/>
And I have this script monitoring the onChange event...
$(document).on('change','.descriptions',function(event) {
event.target.focus();
event.target.setSelectionRange(0,3);
});
When I manually change the text in this input text field, the script works. However, when I trigger the event using Jquery and a link, it does NOT:
<a onMouseDown="javascript:$('.descriptions').val('test text');
$('.descriptions').trigger('change');">update input</a>
I thought they were virtually the same! I did notice that if I log the event.target to the console, the output is not quite exactly the same.
Any thoughts?
You didn't show all your code together, but this code does what you are after:
$('.descriptions').on('change', function(event){
event.target.focus();
event.target.setSelectionRange(0,3);
});
$('#lnkChange').on("click", function(){
$('.descriptions').val("changed text");
$('.descriptions').trigger("change");
});
$('#btn').on("click", function(){
$('.descriptions').trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="descriptions">
Change text of input
<input type="button" id="btn" value="Trigger Change Event Only">
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
I am trying to set focus on a textbox in a form that's a part of jQuery tree. Here is my code
$(document).ready(function() {
$("#search").focus();
});
HTML:
<div>
<form action="search" method="post" name="frmSearch>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="submit" name="button" value="Search" />
</form>
</div>
When I click on Search tab in the tree, it won't set focus on the textbox. Can someone let me know what's wrong in the code?
You're focusing the textbox on page load, however as soon as you click anywhere else on the page (such as a tab), the focus will be removed from the textbox and given to whatever you just clicked.
Instead of focusing on page load, attach a click listener to your tab so that when it is clicked the search textbox gets focus. Since I haven't seen all your markup, I'm using #mySearchTab as a placeholder for the ID of your search tab:
$(document).ready(function() {
$("#mySearchTab").on('click', function() {
$('#search').focus();
});
});
Also, don't forget to close your functions with a ).
I'm not sure what your tree looks like but here's a working demo using jQuery tabs.
try following:
$(function(){
$("input:first:text").focus();
});
working fiddle here: http://jsfiddle.net/8CTqN/2/
tested on chrome
I made some modification in your js codes
http://jsfiddle.net/8CTqN/5
$(document).ready(function(){
$(function(){
$("#search2").focus();
});
});