Change HTML as an input field changes - javascript

I have a registration form that asks for a few basic details. I would like to be able to add the person's first name to a question that's on the same page, without submitting the form to do it.
i.e. As the page loads, the question will be, "Is Attendee 1 a delegate?", but when they type in their name, it will change to "Is Matthew a delegate?"
The questions are on the same page, so I know this has to be done with jQuery somehow...
Any help is greatly appreciated.

If your HTML looked something like this
<div>Is <strong id='name'>Attendee 1</strong> a delegate?</div>
<input type='text' id='name-input'></input>
Then you could achieve this without jQuery like this:
window.addEventListener('load', init);
function init() {
var input, name;
input = document.getElementById('name-input');
name = document.getElementById('name');
input.addEventListener('change', function() {
var value = input.value;
if(value.length === 0) {
value = 'Attendee 1';
}
name.innerHTML = value;
});
}
Of course, you could do the same thing with jQuery, but this is exactly the kind of thing that the two-way binding libraries and Frameworks lend themselves to. This is how I would go about doing it in AngularJS.
<div ng-controller='MyFormController'>
<div>Is <strong ng-bind='name'></strong> a delegate?</div>
<input type='text' ng-model='name'></input>
</div>
And the JS:
function MyFormController($scope) {
$scope.name = 'Attendee 1';
}
Angular, Ember, Backbone and Knockout are all good things to look into!

You should probably use the OnBlur attribute on your . Call a function within OnBlur that extracts the data from the input and puts it into the label.
In the HTML use tags to surround the data that you want to dynamically replace. Locate those tags with the JavaScript or JQuery and replace the data inside.

You can do this:
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="text" id="name" name="name" onChange="document.getElementById('name_new').innerHTML = document.getElementById('name').value"/>
<div> Is <strong id='name_new'>Attendee 1</strong> a delegate?</div>
</body>
</html>

Related

How can I retrieve an HTML form value and put it in a JavaScript object?

so I'm kind of a beginner at JavaScript and APIs, things like that. I want to implement an API into my website that can detect whether an article is fake news or not based on the title. I already found the API, which is this, but I'm a bit confused with how to retrieve the form value from my HTML code, shown below:
<input type="text" name="check" id="check">
<button onClick="checkFakeNews" id="btn">Check</button>
<p id="result"></p>
I already tried typing up this function:
function checkFakeNews() {
document.getElementById('check') = text
console.log(text)
}
to try to print out the value, but I didn't get anything.
I also want to get the result, stored in 'data' in the API I believe, and display it in the paragraph. I'd be very grateful to anyone who can help me!
Firstly, You are you writing document.getElementById('check') = text which doesn't do anything.
Second thing that in HTML onClick need to be equal to Function Call you are passing just the Name. You need checkFakeNews() instead of checkFakeNews
This should work as required.
function checkFakeNews() {
const input = document.getElementById('check');
const text = check.value;
console.log(text);
}
<input type="text" name="check" id="check">
<button onClick="checkFakeNews()" id="btn">Check</button>
<p id="result"></p>
https://www.javatpoint.com/document-getElementById()-method , and see https://www.w3schools.com/jsref/prop_text_value.asp
var s = document.getElementById("element").innerHTML; //to set
document.getElementById("myText").value = "Johnny Bravo"; to set

How to use chrome.storage

I'm a newbie to coding, and I wanted to know how to use chrome.storage.local to store variables.
This is my HTML and javascript code(its a very basic version of what I want)
chrome.storage.sync.set({'value': document.getElementById("userInput").value}, function() {
// Notify that we saved.
})
chrome.storage.local.get(['value'], function(result) {
OnTaskPage=result.key;
document.getElementById("userInput").value = result;
});
<body>
<h1 id="userInput">What site do you want to stay on?</h1>
<input type="text" value="">
</body>
<script src="content.js"></script>
I'm pretty sure I'm messing up the javascript, but I don't know where because I am new to the syntax, and pretty much have no clue what I'm doing. The point of the javascript code is to store the value inside the html text box. Can someone please help me? Thanks!
Problems:
The id should be on input element, not on h1.
result is an object so to access the value you need to read result.value, look for tutorials on using JavaScript objects.
Currently you clear the saved value first by using set() with an empty value, and then read that empty value. You probably don't need set() here, but rather in some other event like a click on a button element.
The script content.js is named ambiguously/incorrectly because content scripts are for web pages, not for the extension page, so it should be named differently, e.g. popup.js
chrome.storage.local.get({value: ''}, result => {
OnTaskPage = result.value;
document.getElementById('userInput').value = result.value;
});
document.getElementById('save').onclick = () => {
chrome.storage.sync.set({value: document.getElementById('userInput').value});
};
and html:
<body>
<h1>What site do you want to stay on?</h1>
<input id="userInput">
<button id="save">save</button>
</body>
<script src="popup.js"></script>

angularjs removing special characters in dynamic form elements

I am trying to use angularjs dynamic form elements but when I type something in inputs, there are appearing many special characters []"": and field, value .etc in textarea, I just want to see in textarea what I wrote in inputs ,
this is what I am working on it http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview
sorry for my poor english,,,
What Chris Story says is correct. You are trying to model the text value of the <textarea> to an array of objects, inputs
If you are just trying to display the results like it seems, a <textarea> is not the way to go. You can display them in a simple list, like this:
<ul>
<li ng-repeat="input in inputs">{{input.field}} = {{input.value}}</li>
</ul>
EDIT
To display it in a <textarea>, you will need to store the list as string to use. This can be done by appending each item into a single string each time there is a change to an input value using ng-change.
Change the inputs to utilize the ng-change:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.field" ng-change="inputChanged()" />
<input type="text" ng-model="input.value" ng-change="inputChanged()" />
<button ng-click="removeInput($index); inputChanged()">Remove</button>
</div>
And create the function that is called to maintain the string:
$scope.inputChanged = function() {
$scope.listString = "";
for(var i = 0; i < $scope.inputs.length; i++) {
var field = $scope.inputs[i].field;
var value = $scope.inputs[i].value;
$scope.listString += field + " = " + value + "; ";
}
}
And finally, use this $scope.listString in the <textarea>:
<textarea rows="22" cols="55" ng-model="listString"></textarea>
I have forked your Plunkr here
The behavior does not make much sense from a UX perspective, but this seems to match your requirement. An option that might make sense is to add disabled="true" to the <textarea> so it can not be edited.
The issue is that you are rendering {{inputs}} and inputs is an Array.

How to pull an ID from a link the User inputted

HTML:
<body>
<input type="text" id="userINPUT" />
<button onclick="updatev1()">Submit</button>
<div id="video1">
</div>
<div id="video2">
</div>
</body>
The html has two divs, and an input text box,and of course, a submit button. What the user is supposed to do is enter a youtube link into the text box, and submit it.
JavaScript:
var userIN1 = document.getElementById("userINPUT");
var userIN2 = userIN1.value;
var index = userIN2.substring(string.indexOf('=') -1);
alert(index);
Now what I want the JavaScript to do is to grab the youtube link, and pull the ID from said link.
EX. The user inputs the link. 'http://www.youtube.com/watch?v=-K7lEFmFcKs', then the JavaScript would take the link and grab '-K7lEFmFcK' and store it in a variable for later use.
'userIN2' would be the variable that would store the user input value, and 'index' would take the whole ID coming after the '=' symbol of the link and store it.
I know this is considered a small task, but any help would be great.
Thanks!
Oh, and I heard these things can be done A LOT easier with jQuery. Should I use jQuery instead?
Sure should. It'd be that simple:
$('button').click(function() {
var userIN2 = $('#userINPUT').val();
var index = userIN2.split('=');
index = index[1];
});
This collects everything after v=
http://jsfiddle.net/7aZqB/4/
function getID(str) {
return str.substring(str.indexOf('=') -1).replace('v=', '');
}

jQuery templates - how to get value of user-edited input

I run into a problem while using jQuery templates (http://api.jquery.com/category/plugins/templates/)
First: defined a template like this one:
<td>
<input type="text" value="${Text}" />
</td>
When it renders user types some text into it, but I don't know how to get what he types. All I receive is old "value" attribute value.
The code I use to get data back:
var enteredData = row.tmplItem();
var note = enteredData.data;
var data = {};
data.NoteId = note.NoteId;
data.NoteText = note.Text;
I'd be grateful for any help!
Thank you!
You should be able to use
$('input').val()
to get the entered value
(obviously it would be best to give the input an id so you don't call all inputs on the page!)
try this:
<td>
<input type="text" value="${Text}" id="text${id}"/>
</td>
and
$('#text'+ id).val() //if you want a specific one of more inputs
or just set a static id if you only have one....

Categories