How to directly display the value of input - javascript

I'm currently working on a simple page that shows the current time and date. I want to create an input where you can fill in your name, so the page says "Hi there, (your name)"
On previous project I worked with this similar function, I had to create a form and on submit I could get the value. Since this is a very simple page I want to create a simple function, is there actually a way to get the value of the input without creating a form?
See image: Jason is filled in, the input goes away and it says "Hi there, Jason"

That's simple javascript, just select the input and then get its value
var input = document.getElementById('idFromInput');
alert(input.value);

Say you've got a paragraph tag <p id="para">text to replace</p>, and you want to replace the contents of that tag with the contents of a textbox <input type="text" id="textbox" />. You would just write a JS function like the one below, which could be triggered by something like hitting the enter key or a button.
You can expand this to do stuff like putting the textbox in a div and replacing the entire div with the contents of the textbox if you'd like the input field to disappear.
function replacePara() {
let replacementText = document.getElementById("textbox").value;
document.getElementById("para").innerHTML = replacementText;
}
<input type="text" id="textbox" />
<p id="para">text to replace</p>
<button onclick="replacePara()">press me</button>

Related

Qualtrics Storing Text Input to Embedded Data by Creating New Buttons

I've been struggling with this for a long time and finally have half a solution but not the rest.
Basically, I need Qualtrics respondents to enter a number input into a textbox inline, and I want to store that input as Embedded Data.
So far, in the html of the Qualtrics page, I have
Enter data here: <input type="text" id="myText" value=" ">
<input type="submit" value="Confirm" onclick="formdata()"/>
<script>
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
</script>
This works fine. It creates the text box where they can enter "myText," and then it stores this as Embedded Data Q1input, which I can then access later. However, it's annoying because they have to click this "Confirm" button I created and then leave the page using the normal Qualtrics Next Page button. I did this because I couldn't get it to work at all by running this when the Qualtrics Next Button was clicked, so I had to make it run on my own button.
I've tried to disable the Next Page buttons using the disableNextButton and clickNextButton Qualtrics code, but I don't know where to put it. I can disableNextButton by putting the code in the addOnload portion, but I can't seem to get clickNextButton to run in the formdata function.
Any help would be greatly appreciated! I don't really know JavaScript; I'm just trying to pick this up to run a survey.
The easiest way to handle this is actually just to call your function any time the text entry field changes. Since Qualtrics includes PrototypeJS, you can use the following:
Enter data here: <input type="text" id="myText" value=" ">
<script>
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
$('myText').observe('change', formdata());
</script>
Two thoughts here:
You should be including your script in the JavaScript section of your question, rather than the html edditor. It belongs in the addOnReady Section.
Qualtrics.SurveyEngine.addOnReady(function()
{
function formdata(){
var questionanswer= document.getElementById("myText").value;
Qualtrics.SurveyEngine.setEmbeddedData("Q1input", questionanswer);
}
$('myText').observe('change', formdata());
});
You could achieve the same effect by using a text entry question type in Qualtrics, then using piped-text to add it to the embedded data field in your survey flow.

Qualtrics: Javascript to prevent saving entry from Text Box

I have one Text Box (also called "Text Entry") in my qualtrics survey in which I want participants to write something but I do not want to have the result saved in my data. I do not want to use the password function, therefore I have used JavaScript at the Text Box level.
The code below works to the extent that whatever participants put in the Text Box it will be set to an empty string the moment they hit the Next-Button.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var currentQuestionID = this.getQuestionInfo().QuestionID
var input = $("QR~"+currentQuestionID);
$('NextButton').onclick = function (event) {
input.value = ""
}
});
The problem: This code only works sometimes. For example when I have two textboxes with the exact same code it only works for the first but not the second one. Similarly for some reason if the textbox is embedded in some other questions it doesn't work either.
Does anybody know how I can make this work either by changing my code or with a completely different solution? Essentially, I just want participants to entry some text which will never be saved in my data and I cannot use the password function.
Solution: One way of solving this would be adding a "Descriptive Text" item in which you can add some simple HTML code:
<p>Please provide your email address:</p><p><br></p>
<input name="nothing" type="textarea">
I don't think JavaScript works well in this case as it can't be guaranteed to run before the page has sent the data.
The best way is to make a dummy HTML "question" which has the appearance of a form but does not save any information.
I tried this out in a test survey by adding a question of type "Descriptive Text", and then in "HTML View" for that question, adding:
<p>This is not a real question, there is just a HTML textarea. </p>
<form id="mydummyform">
<input name="nothing" type="textarea" />
</form>
I found that this sometimes showed the HTML source instead of the form in the survey editor; if it does this, just go to "HTML View" and then "Normal View" and it should resolve correctly. This problem was only in the editor -- it always showed correctly in a preview of the survey.

Generate input field using jQuery's append

Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks
You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo
In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');

Get value from input tag and place value into a specific part of your html code

I am new to html, javascript and jquery
I have a question about grabbing values from inputs and displaying them specifically this:
<input name="meaty" style="height:25px; width:100px;" class="form-control" type="text" placeholder="Rate 1 - 10 " />
So I would like the user to input something and I would like that value that the user inputed to be shown on new page after clicking a button. So what I have is the users will fill out a bunch of input tags then they will press a button and a new page should pop up with all their inputs. Any tips would be great thanks!
To get the value of the input field you can use
var inputVal = $( "input[name='meaty']" ).val();
By new page I assume you mean a dom element that you will popup?
If not then you will have to pass this value through to the new page either via cookie/local storage or as parameters on the url.

javascript textbox: enter text and it appears instantly in another textbox

Javascripters, a 'puzzle':
Using a simple HTML form, make two textboxes. Whatever text you type (say, some random string of characters like asdfasdf ) into textbox #1 is IMMEDIATELY displayed, on the fly, without pressing any button or changing focus, into textbox #2.
Can it be done using getElementByID?
Simply:
<textarea id="text1" onkeyup="document.getElementById('text2').value = this.value"></textarea>
<textarea id="text2" onkeyup="document.getElementById('text1').value = this.value"></textarea>
If immediately is the most important word, you must handle the keypress event, then add the pressed key to your storage string. Then place that string into your result div or textarea.

Categories

Resources