I am using JavaScript and HTML to built an Apache Cordova app for Android. I would like the user to click/tap a button that will then generate a PDF with the string that they just entered into a text field, then open an email to send the PDF attachment. The attachment does not need to be saved to the device, but can do if it is required before sending. Is this possible and if so is there any documentation or tutorials on how to do this?
Thank you
Okay, to achieve that we need to add some inputs and get it's values, and a button that will fire the js. Which is pretty easy.
HTML:
<input type="text" id="name" placeHolder="Enter Your name" />
<input type="text" id="lname" placeHolder="Enter Your last name" />
<input type="text" id="hobby" placeHolder="Enter Your hobby" />
<input type="text" id="skills" placeHolder="Enter Your skills" />
<button id="btn">
Get results
</button>
<!--values will be shown inside the div#content-->
<div id="content"></div>
Next is the JavaScript part where you will be displaying all of the input values inside the div#content with a <p></p> tag.
JavaScript:
function onload() {
var input, btn, p, content, input_array;
//grab the button by ID
btn = document.getElementById("btn");
//grab all inputs
input = document.getElementsByTagName("INPUT");
//grab the div by ID
content = document.getElementById("content");
// Add some 'Data' inside the variable so that you show
// the user what he answered
input_array = [
"Name:",
"Last name:",
"Hobby:",
"Skills:"
];
//attach the click event listener to the button
btn.addEventListener("click", function() {
//Using the for loop, we basically create 4 <p> elements inside
//the div#content
for (var i = 0; i <= 3; i++) {
p = content;
// we display all of the input values within a <p> tag
// with a class of 'testing' so that you cn change it later
// on for styling it etc..
// Then we add the array and input values inside the <p> tag
p.innerHTML += "<p class='testing'>" + input_array[i] + " " + input[i].value + "</p>";
}
}, false);
}
//call the function
onload();
Now that you have displayed the values, you can do a lot of stuff. You can store all of what the user wrote into an array, do some cool animations and fade in the result.
To generate the results into a PDF format, you need to use this plugin that I have found on GitHub that supposedly says users can save the generated PDF.
(Please note that I personally have not worked with this plug-in before so I give you no guarantees.)
Link: cordova-plugin-html2pdf
Follow the documentation there and everything should work well.
Demo: Jsfiddle
Related
This question already has answers here:
Stop input from clearing on innerHTML insert
(4 answers)
Closed 8 months ago.
Hi Folks I'm new to JS World.
I am trying to add A <div> dynamically to my HTML with the help of JavaScript.
var counter = 0;
function add_more_animals() {
counter+=1;
html = `<div id="animal${counter}">
<input type="text" name="animalName${counter}">
<input type="text" name="animalType${counter}">
</div>`;
var form = document.getElementById("animals");
form.innerHTML+=html;
}
<div id="animals">
<div id="animal0">
<input type="text" name="animalName0">
<input type="text" name="animalType0">
</div>
</div>
<button type="button" onclick="add_more_animals()">Add animals (+)</button>
The issue I'm facing:
While I populate the fields of animalName0 and animalType0 on UI. After I click on add button so as to insert more animals data, new div is created as per JS logic written in file. But my earlier inputs to animalName0 & animalType0 becomes empty & I have to insert data there all over again.
Can you please help here?
The problem stems from the line form.innerHTML+=html which is shorthand for form.innerHTML = form.innerHTML + html. When it gets the form.innerHTML it is grabbing the HTML only; The text typed into the inputs are not a part of this HTML. When the innerHTML gets set, think form.innerHTML = form.innerHTML + html, brand new HTML elements are created based off of the HTML only, and any state, including typed in text, is lost. Any event listeners will also be lost in this process.
The proper way of adding a new element while leaving adjacent elements in place is to create the new element with document.createElement, and add it with a function like .appendChild, like so
var counter = 0
function add_more_animals() {
counter+=1;
// Create an empty element
const newEl = document.createElement('div')
newEl.id = `catalogue${counter}`
// Add the first input
const nameInput = document.createElement('input')
nameInput.name = `animalName${counter}`
newEl.appendChild(nameInput)
// Now the second one
const typeInput = document.createElement('input')
typeInput.name = `animalType${counter}`
newEl.appendChild(typeInput)
// And finally attach everything to the animals form
document.getElementById("animals").appendChild(newEl)
}
<div id="animals">
<div id="animal0">
<input type="text" name="animalName0">
<input type="text" name="animalType0">
</div>
</div>
<button type="button" onclick="add_more_animals()">Add animals (+)</button>
As you can imagine, this can become verbose if you have a large amount of HTML to add. To make this process easier they came out with template tags which you may prefer using. Use them either like this or like this.
So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.
I'm an absolute beginner in JS.
following is the Javascript code:
var blank = document.getElementsByClassName("my-input");
var go = document.getElementById("go-button");
console.log(blank);
go.innerHTML = "Hello" + blank[0].value;
I use the IDE Brackets, whereas, I'm learning from a online course in which the teacher uses IDE Sublime text (he is not getting any errors)
I dont think IDE's make much of a difference, but mentioning.
What I want to achieve is:
A blank input box(with placeholder as "Your name") and a button (go button)
After typing the name, when we click the go button, text is displayed below the button as: Hello {name}
This works, but you need to be sure to add an event listener, so the code can grab the input value after it has been entered by the user:
var go = document.getElementById("go-button");
go.addEventListener("click", doFunc);
function doFunc() {
var blank = document.getElementsByClassName("my-input");
go.innerHTML = "Hello " + blank[0].value;
}
<input class="my-input" /><br />
<input class="my-input" /><br />
<input class="my-input" /><br />
<button id="go-button">Go</button>
If you want to display the text below the button you need an element to select (or inject it right after the button element).
var blank = document.getElementsByClassName("my-input");
var go = document.getElementById("go-button");
go.addEventListener('click', function() {
document.querySelector('.result').innerHTML = "Hello" + blank[0].value;
});
<input class="my-input" />
<button id="go-button">click me</button>
<p class="result"></p>
So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>
I have this input field in html:
<input id="title" type="text" class="" />
A button will allow the user to randomize the value of the input field by calling a js function.
var title = document.getElementById("title");
title.removeAttribute("value");
title.setAttribute("value",random_name);
If the user wants to change the value auto-asigned by my function (aka random_name), he can simply type something else in the input field.
All works fine until now, however if the user changes his mind and clicks the randomize button again, the function is called and "value" attribute is modified, but the user still sees the last thing he typed and not the new random value.
Is there a way to fix this or maybe a workaround?
Just do title.value = random_name
You can set an input's value by element.value = "desired_value". If you use that, it works.
http://jsfiddle.net/f4gVR/2/
<input id="title" type="text" class="" />
<input type="button" class="" onclick="randomValue()" value="Random" />
function randomValue() {
var title = document.getElementById("title");
title.value = Math.random(); // assign random_name to title.value here
}
if it's your random_name bugging out, you should post the code. Try this first. Just replace Math.random() with random_name.
you need to use title.value = random_name; instead of title.setAttribute("value",random_name);
Fiddle: http://jsfiddle.net/4dhKa/