I have a textbox that I would like to add text to by keyboard, as well as mix in some pre defined phrases from a drop down box. When I first come to the page there is no problem adding the phrases into the textbox, but once I type something in the button stops working
The HTML is:
<div class="tab-pane" id="message">
<textarea rows="4" cols="50" id="send_message" placeholder="Enter text ..."> </textarea>
Add Phrase
<label for=message_list>message_list</label><select id=message_list><option>Hi There.</option><option>How Are You?</option></select> </div>
My jquery is:
$('#message').on("click", "a", function(){
.......
..........
else if( $(this).is(":contains(Add Phrase)") ) {
$('#send_message').append($('#message_list').text());
}
});
How can I fix this?
Use val to set the value of textarea
And val to access the select value.
You were trying to use append on a form element.
$('#send_message').append($('#message_list').text());
supposed to be
$('#send_message').val($('#message_list').val());
Check Fiddle
$('#message').on("click", "a", function (e) {
e.preventDefault();
if ($(this).is(":contains(Add Phrase)")) {
var $message = $('#send_message')
previousText = $message.val();
var currText = previousText + ' ' + $('#message_list').val();
$('#send_message').val(currText);
}
});
Related
Hi I want to create a stamp script and I want the user to enter his name and address in three fields,
then he should see the fields later in the stamp edition?
I have 3 input fields where the user can give in his data,
now i will give this data in a new class. This is what i have:
window.onload = function() {
$( "#Text1" )
.keyup(function() {
var value = $( this ).val();
$( ".ausgabe" ).text( value );
})
.keyup();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>
It looks like you want to mimic what the user is typing in the text inputs and show it in ausgabe. If that's what you want, then you can tie the keyUp event to each of the inputs.
$(input [type='text']).keyUp(function() {
var value = $(this).val();
$('.ausgabe').text(value);
}
But this will overwrite .ausgabe every time text is entered into a different input.
You could get the value of .ausgabe every time keyUp fires and pre-pend that value:
So you may want to have a button that renders each input's value into .ausgabe:
<button>.click(function() {
$(input[type="text"]).each(function() {
var boxText = $(this).val(); //text box value
var aus = $('.ausgabe').text(); //ausgabe value
$('.ausgabe').text(boxText + ' ' + aus); //combine the current text box value with ausgabe
})
})
As you have not made it very clear what you are trying to accomplish, I am providing a simple example that might send you down the right path.
$(function() {
function updateDiv(source, target) {
var newVal = "";
source.each(function() {
newVal += "<span class='text " + $(this).attr('id').replace("Text", "item-") + "'>" + $(this).val() + "</span> ";
});
target.html(newVal);
}
$("[id^='Text']").keyup(function(e) {
updateDiv($("input[id^='Text']"), $(".ausgabe"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>
Since you already seem to understand .html() and .text(), we can look at the Selector. The one used will select all elements with an ID Attribute of Text in the beginning of the string. See More: https://api.jquery.com/category/selectors/attribute-selectors/
I'm trying to prevent users from inputting and submitting single quotes ( ' ) into the textarea. below is what I have, but it isn't work.
<script>
function valtxtarea() {
var val = document.getElementById('textarea').value;
if ('\''.test(val)) {
alert('do not add single qoutes to your inputs!');
}
}
</script>
<form>
enter text below
<textarea>input contents here</textarea>
<input type="button" onclick="valtxtarea();" value="send">
</form>
You missed the id attribute as well as the regex isn't valid
function valtxtarea() {
var val = document.getElementById('textarea').value;
if (/\'/.test(val)) {
alert('do not add single qoutes to your inputs!');
}
}
<form>
enter text below
<textarea id="textarea"></textarea>
<input type="button" onclick="valtxtarea();" value="send">
</form>
Better yet, why not prevent them from even typing it?
<form>
enter text below
<textarea id='inputText' oninput="valtxtarea();"></textarea>
<input type="button" value="send">
</form>
<script>
var oldValue = "input contents here";
document.getElementById('inputText').value = oldValue;
function valtxtarea() {
var textArea = document.getElementById('inputText');
if (textArea.value.match(/.*\'.*/g)) {
textArea.value = oldValue;
} else {
oldValue = textArea.value;
}
}
</script>
With this every time they type a char it is check and if it contains a ' then it sets it back to the old value. You could easily expand it to include other characters you do not want to allow.
var val = document.getElementById('textarea').value;
There is no HTML element with the id textarea.
Do something like this:
<textarea id="textarea">input contents here</textarea>
Also you probably want to prevent form submission if there is a validation error, so put return false; in the if in valtxtarea() and put return valtxtarea() in the onclick.
I want to display text or code content on a div while I am typing in the textbox like markdown. Here is how far I got.
Script to show the content on div
<script type="text/javascript">
$(document).ready(function () {
$('#title').keyup(function(e){
var keyed = $(this).val().replace(/[]/g, '');
$("#result").html(keyed);
});
});
</script>
html part
<form>
<input type="text" id="title" name="title"/>
</form>
<div id="result">
</div>
It is working. But I want that when user types <table> tag it should not take it as a input and should not display anything
The only character that shows when typing tags is the open tag. I wrote some code to handle that open tag when typed in.
$(document).ready(function () {
$('#title').keyup(function(e){
var keyed = $(this).val().replace(/[]/g, '');
if(keyed == '<')
{
$('#title').keyup(function(e){
var keyed = $(this).val().replace(/[]/g,'');
$('#result"').html('<' + keyed);
});
}
else
$("#result").html(keyed);
});
});
I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.
ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});
$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});
You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});
This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});
I've seen some sites that using jquery to review instantly any text wrote inside an input text field.
Here is example :-
where i write a it instantly shown at => some_site.com/a
when i write another letter b it instantly shown at => some_site.com/ab
and so on anything i wrote instantly shown
But that is not all ! if i removed any text so the input field is empty
it shows => some_site.com/???
This could be good for reviewing input text before submit the whole form
How to do such nice effect ?
if html form code is
<input type="text" name="txt" id="txt">
~ thanks for help
Here is a working example
http://jsfiddle.net/ydzr8/
basically you want the keyup event to get the value from the text box
<input type='text' class='input'/> <div class="display">http://www.something/???</div>
Then
$('.input').keyup(function(){
if($(this).val() === '')
{
$('.display').html("http://www.something/???");
}else{
$('.display').html("http://www.something/" + $(this).val());
}
});
Since you tagged Mootools in this question, here is a Mootools way to do it:
HTML example:
<input type='text' class='input' />
<div id="result">http://www.mysite.com/<span></span>
</div>
Mootools:
document.getElement('input').addEvent('keyup', function () {
var val = this.value ? this.value : '???';
document.id('result').getElement('span').innerHTML = val;
});
// Option 2:
document.getElement('input').addEvent('keyup', function () {
$$('#result span').set('html', this.value ? this.value : '???');
});
Demo here