I am trying...(I know very trying for all you guys lol) no but seriously I am trying to pass the text from a form to a div, which then other scripts change the font and the colour of the text. Here is the code I have tried so far and a link to the jsfiddle. I just can't get it to work!
Similar questions have been asked but none I can find where other scripts then need to run on that inputted text once it has been inputted.
http://jsfiddle.net/p802ektq/
The Div:
<div class="rightBottom selectcolor" style = "position: absolute; left: 750; top: 330;" id="changeMe"></div>
The HTML form:
<form>
Address <input type="text" name="add"><br>
<input id="copy" type="button" value="copy">
</form>
The Java:
$(document).ready(function() {
$('#copy').click(function(){
$('#changeMe').val($('#add').val() );
});
});
Fiddle example
First let's remember one thing:
name = name
. = class
# = id
you cannot go for #add if you don't have any in your Document. So let's add some:
<input id="add" name="add" type="text">
Now, if you want to insert some text String into a <div> (#changeMe) element, what you want is .text() or .html() (not .val() !).
$(function() { // d. ready
$('#copy').click(function( event ){
event.preventDefault(); // Prevent browser default behavior on form button
$('#changeMe').text( $('#add').val() );
});
});
Related
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
Long time reader, first time poster. I’ve tried looking for an answer everywhere. I’m really stuck.
I have a form with two label tags, each containing an input and a select tag:
<body>
<form action="Page_Form.php" method="post">
<label class="try">Main Product: <input type="text" autocomplete="off" name="main_product" id="main_product" maxlength="30" onkeyup="getNames(this.value)"/>
<select multiple="multiple" class="results" id="results" onchange="displayResult(this)"><option></option></select></label>
<label class="try">Secondary Product: <input type="text" autocomplete="off" name="secondary_product" id="secondary_product" maxlength="30" onkeyup="getNames(this.value)"/>
<select multiple="multiple" class="results" id="results" onchange="displayResult(this)"><option></option></select>
</label>
</form>
</body>
When the user writes something, the tag with the class ".results" shows up, using the onkeyup event. Here's my JavaScript:
<script type="text/javascript">
function getNames(value) {
if(value != "") {$("label").children(".results",$(this)).show();} else {$("label").children(".results",$(this)).hide();}
}
function resultsHide() {
{$(".results").hide();};
}
window.onload = resultsHide;
</script>
The problem is, both of the select tags show up simultaneously, and I want only the direct child select tag of the label tag to show up.
I’ve tried using .children() and. find (), in any variation I could think of.
Is there a way to make only the direct child show up?
Here is a Live Demo.
Thank you so much for helping me out.
First remove the onkeypress attributes from the elements and do the binding through jquery, so this will actually point to the element.
also add a common class to the elements you want to have the same behavior (i used class products), like this
<input type="text" class="product" autocomplete="off" name="main_product" id="main_product" maxlength="30"/>
Try this code instead
$(function(){
$('.product').on('keyup', getNames);
});
function getNames() {
var value = this.value,
results = $(this).siblings('.results');
if (value != "") {
results.show();
} else {
results.hide();
}
}
The idea is to start traversing the DOM from the element you already have (the input in this case) towards the element you want (since they are related)
Demo at http://jsfiddle.net/gaby/xNu53/25/
You need to distinguish between the two selects when showing/hiding.
Something like this:
if($(product).hasClass("main")) {
$("label").children(".results.main",$(this)).show();
}
else {$("label").children(".results.main",$(this)).hide();}
Take a look at this modified version.
http://jsfiddle.net/xNu53/33/
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();
});
});
I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!
3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.
You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.
you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.
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