JavaScript/html show alert which includes label input - javascript

I'm using HTML5 and JavaScript
I want to be able to input any word into a label and when you click on the button it gives an alert which includes the given text.
I cannot get it to work with the text I put into the label the alert shows no text.
I've only found how to do it with predefined labels.
Here's my current html code
function getinput() {
var input = document.getElementById("form-scream").innerText;
alert(input);
};
<div>
<p>Word
<label id="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>

input element does not have innerText property, use value instead. Also, you have use for attribute in a label to associate an element (the element's id as the value of for):
function getinput()
{
var inputVal = document.getElementById("form-scream").value;
alert(inputVal);
};
<div>
<p>Word
<label for="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>

Related

Add text to input fields (the one that has the focus) when html keyboard button pressed

I have created an on-screen keyboard in HTML using <div> and <a> tags. On the page there are six text inputs (firstName, nickname, lastName, notes, allergies, mobileNumber). I'm not that great at JS but I do know how to do it if there is just one input on the page but I'm not sure how to do it when there are multiple. Part of what I'm struggling with is the input box loses focus as soon as I click on a letter.
How do I append the letter to the selected input and not lose focus on that input? This is what I use to append a letter to one input when it is the only input on the page:
var setClickEvents = function () {
$('.keyboard a.digit').unbind('click').click(function () {
$name = $("input[id$='tbSearchBox']");
$name.val($name.val() + $(this).html());
});
}
HTML keyboard button--just one letter but it is the same style/setup for all letters and numbers:
q
You can save the reference to the focused input in some global variable.
And use it to set the focus back in text-appending function
<html>
<body>
<script>
var selectedInputId;
function clickBtn(key) {
if (selectedInputId != null) {
selectedInputId.value = selectedInputId.value + key.innerHTML;
selectedInputId.focus();
}
}
</script>
q
<input type="text" id="id1" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id2" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id3" onfocus="javascript:{selectedInputId=this;}" />
<input type="text" id="id4" onfocus="javascript:{selectedInputId=this;}" />
</body>
</html>

Hide input text using jQuery

How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.
Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.
You should use a password field, set autocomplete="false" and toggle between text/password for the field
document.getElementById("fooVisible").addEventListener("change", function() {
if (this.checked) {
return document.getElementById("foo").setAttribute("type", "text");
}
document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />
You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.
$(document).ready(function(){
var textValue = "";
$('.asteriskInput').keypress(function(e){
var textLength = $(this).length;
textValue += e.key;
$(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
});
$('#changeInputView').on('click',function(){
$('.asteriskInput').val(textValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>

unable to assign text box value to another text box in jquery

i want to display one text box value in another text box while clicking button. im able to show value on div but not in text box
Here is the JS
$(document).ready(function(){
$("#btnSubmit").click(function(){
var val= $("#txtValue").val();
$("#txtValue1").text(val);
$("#myDiv").text(val);
})
});
Here is the HTML
<input type="text" id="txtValue">
<div id="myDiv"></div>
<input type = "button" id = "btnSubmit" value="Submit">
<input type="text" id="txtValue1" text="">
For an input type='text' you need:
$("#txtValue1").val(val);
It is an input; inputs take values
Demo

Populate Text Input With Form Buttons

I have a simple html form where I input a title and description and hit submit. At the top of the page are some paragraphs of text that I often copy and paste into these fields. It's a repetitive task, and the paragraphs are generated dynamically with php.
Can I put a button or link at the end of each paragraph or div that would fill in my form input fields with a script? Then all I would have to do is hit submit. I'm already using jquery on the page too.
EDIT:
<p>Sentence one. Longer than this</p><!--would like a button here to populate field in form below-->
<p>Sentence two. Longer than this</p>
<p>Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title>
Desc<input type="text" name="title>
<input type="submit" value="Submit"></form>
If you have some selector that can select all of the <p> tags that contain those paragraphs, you can do something like the following:
$(function() {
var $descInput = $('input[name=desc]');
// wrap the text of each paragraph in a span so we can target it easily.
// Then add a button inside each <p> at the end that will prepopulate that text.
$('p.prefill').wrapInner('<span class="text"></span>').append('<button class="prefill-sentence">Prefill</button>');
// Add a click handler for all the newly added buttons
$('button.prefill-sentence').click(function() {
// get the contents of the span we used to wrap the sentence with
var sentence = $(this).prev('.text').text();
// add that sentence to the current value of the description input
$descInput.val($descInput.val() + sentence);
});
});
.prefill-sentence {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="prefill">Sentence one. Longer than this</p>
<p class="prefill">Sentence two. Longer than this</p>
<p class="prefill">Sentence three. Longer than this</p>
<form id="sampleform" action="actionpage.php" method="post">
Title
<input type="text" name="title" />Desc
<input type="text" name="desc" />
<input type="submit" value="Submit" />
</form>
(Note I assumed you had a name of "desc" for your description input. Ideally, you can use a class or id to target it easier in the real code).
Is this what you are looking for?
http://plnkr.co/edit/S3OegSh80UH6oQJPDatr?p=preview
$(function(){
$('p').each(function(){
$(this).after('<button>Click<\/button>');
});
$('button').on('click', function(){
var txt = $(this).prev().text();
$('input').eq(0).val(txt);
})
});
You'll probably want to add something more specific to those php-generated paragraphs/divs, so they can safely be selected and manipulated by JS.
CodePen: http://codepen.io/anon/pen/PwJwmO
HTML
<div class="text-section">
Sentence one. Longer than this
</div>
<div class="text-section">
Sentence two. Longer than this
</div>
<div class="text-section">
Sentence three. Longer than this
</div>
<form id="sampleform" action="actionpage.php" method="post">
Title<input type="text" name="title">
Desc<input type="text" name="desc">
<input type="submit" value="Submit">
</form>
JS
var $text_section = $('.text-section');
var $description_field = $('input[name="desc"]');
$text_section.each(function(){
var section_text = $(this).text();
var $autofill_button = $('<button>Autofill</button>');
$autofill_button.click(function(){
$description_field.val(section_text);
});
$(this).append($autofill_button);
});

Populating a tag input based on other inputs in same form

I have a form with a bunch of inputs. Sometimes the form will have 1 input and sometimes up to 10 inputs. When someone fills out each input I want a tag field at the bottom to be populated also. Right now I have it working but only with a set number of inputs. (3 at the moment).
Im trying to figure out how to make it work regardless of how many inputs there are on the page.
HTML
Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>
Jquery
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
A nice to have also would be putting them into another input instead of a span and adding a comma after each one except for the last one.
I know Im probably missing something very simple here.
In your example you are only allowing for 3 inputs as you have 3 input boxes, when any of those input boxes change your tags are then being transferred to the span.
Now it sounds like you wish to allow for multiple entries regardless of how many inputs. You could try something simple such as the below fiddle.
http://jsfiddle.net/K2g4z/
Html:
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="text" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
Javascript:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//reset the entry box
$('#tagEntry').val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
UPDATE:
The JSFiddle link http://jsfiddle.net/K2g4z/1/ now supports using multiple inputs of as many as you need. To achieve this instead of selecting on element ID we bind to a class name. Given the following Html.
<div>
<strong>Enter your tag and click add</strong>
<br/>
<strong>Tag 1</strong>
<input type="text" id="tagEntry" class="tagEntry" />
<br/>
<strong>Tag 2</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 3</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 4</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 5</strong>
<input type="text" class="tagEntry" />
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
All the tag input boxes have a class of tagEntry now this class will become our selector. With the following JS we can bind the blur event to every tag that has a class of tagEntry. This will now update the tags box every time any of the inputs changed.
var tags = [];
$(function() {
$('.tagEntry').blur(function(){
//get the tag value and trim the spaces
var tVal = $(this).val().trim();
if(tVal == '')
return;
//reset the entry box
$(this).val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
As you can see our handler binds to all the inputs, as any of the inputs receives the blur event the method of extracting the tags is executed.
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#masterinput").val(inputArray.join(' '));
});
You probably want to narrow the selector so it isn't selecting all text inputs on the page.
var inputs$ = $("input:text").change(function () {
var inputArray = [];
$.each(inputs$, function(i, v) {
inputArray.push($(v).val());
}
$("#allInputs").text(inputArray.join(' '));
});
Here you go:
var str = "";
$("input[type=text]").change(function () {
$("input[type=text]").each(function(){
str += $(this).val()+",";
};
});
$("#allInputs").html(str);

Categories

Resources