We Keep Coding

I try to pass the content of a paragraph element into a field of a contact form using Javascript

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.

Create and email PDF in Javascript Apache Cordova

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

How to set text box to appear blank after .click function

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>

How to strike string in an html table using javascript?

Everytime i search for the word "Javascript" as specified in my code, I can't seem to get that word to be striked out in the table. I don't see why my input is not finding my word i'm searching through the ID.
<script type = "text/javascript">
<!--
function findWord(){
var str = document.getElementById("word").value;
var text = document.getElementById("search").innerHTML;
text = text.toLowerCase();
str = str.trim();
var n = str.indexOf(str.toLowerCase());
if( n != -1 )
{
text = text.replace( str , "<u>"+str+"</u>" );
}
text = text.toUpperCase();
document.getElementById("search").innerHTML = text;
}
<table>
<tr>
<td class="wordSearch" id="search">
QMGLUTKVRDIYKSA<br />
GKMTWRITELNXDYP <br />
MGETELEMENTBYID <br />
TTOLOWERCASEBRD <br />
NYRTOUPPERCASEI <br />
CJDYOFUNCTIONPN <br />
WEMSFZTJZJOMFTV <br />
BCBCCXSURWHILEE <br />
PPRETURNXATLJOU <br />
OIFYGTVFXHAAVIN <br />
FZRXADXETWINDOW <br />
DWNIZKHIVFXPIDL <br />
IFRSTRINGVCQQLP <br />
DOCUMENTULELSEN <br />
JYBOOLEANFAXAJH
</td>
</tr>
</table>
<form action="">
<p>
<label>Enter the word you've found and press Enter:
<input type="text" id="word" />
</label>
<input type="button" value="Enter" onclick= "findWord();" />
</p>
</form>
<div id="scoreArea"></div>

use a Jquery plug-in for filter and search in a table like jQuery.FilterTable
jQuery.FilterTable

this code may help you
function findWord(str) {
var tdText=document.getElementById("search").textContent.trim();
return tdText.search(str);
}

You've got a few errors here. The first one you'll find on debugging is:
Uncaught ReferenceError: str is not defined
This means you're trying to call the strike() function on a variable that hasn't been defined. You'll first need to get the search value and store it in a variable.
You're html has the input as id="word", so we need to get that from the html.
The command to do this is:
document.getElementById("word")
And we specifically want the value of what they typed in, which is:
var str = document.getElementById("word").value
Now if they type in "hello" or "javascript", it will be stored in the str variable. Problem number 1 fixed! Onto the second problem.
var inputVal = document.getElementById( "search" );
Remember, when you get an Element, it's returning the entire node, not the value stored within it. Before, we had to use the value command to get the actual text, but if you try that here, it won't work because search is a <td> element, not an input. I've never had to get text from a <td> before, so I had to look it up using the debugger tools. (If you're not familiar with them, here's a guide on how to use chrome's dev tools. As it turns out, for a td, what you want is either a innerText or innerHTML. Looking at what is stored in each, innerHTML is the one we would want to use as it gets just the entire html, which will be important later on (innerText doesn't get html elements like <br\>).
var wordSearch = document.getElementById("search").innerHTML;
I also, changed the name of the variable you were storing this in from inputVal to wordSearch as I feel like naming it inputVal is a bit confusing as I would presume by that name it was the value inputted by the user, not the value of the wordSearch document.
Ok, now we have the input from the user and the wordSearch, the next troublesome line is this one:
wordSearch.elements.value = words.indexOf( inputVal.value=result );
I believe you're trying to see if the value the user provided existed somewhere in the wordSearch, which would be the next logical step to take. So, there's a couple things here. Firstly, again you're referencing variables that haven't been defined, in this case: wordSearch. Based on your comment above, you were using wordSearch was from the class name. Unfortunately, in JavaScript, you can't directly call an element based on it's class like that. You would need to do something like:
document.getElementsByClassName("wordSearch")
However, I wouldn't recommend this method, because (as a canny observer may have guessed from the name) getElementsByClassName returns a list of elements, not a specific element (hence the name using "elements" not "element"). That's because multiple elements can have the same class name. That is why I used the id, instead of the class name to find it earlier. Only a single element can have a particular id.
Secondly, we have the following snippet of code:
words.indexOf( inputVal.value=result )
This is doing two things. First, it is assigning the results variable to inputVal.value because you have a single equals sign. If you wanted to compare them, you would need two (==) or three(===). The second thing it's doing is checking words for the first index of that value. indexOf return an integer indicating where it was found, and -1 if it wasn't found. Let's fix this.
var locationFound = wordSearch.indexOf(str.toUpperCase());
This will give us the location where the search value provided is found in the word search or -1 if it isn't found. Then you could do something like:
if (locationFound === -1) {
alert(str + " wasn't found");
} else {
// strike through code goes here
}
Now, we'd need to code up the strike through section.
var locationEnd = locationFound + str.length;
str = str.strike();
document.getElementById("search").innerHTML =
wordSearch.slice(0, locationFound) +
str +
wordSearch.slice(locationEnd);
Ok, this may look a bit confusing, but let's walk through it one line at a time.
var locationEnd = locationFound + str.length;
This is getting the end point of where the search value was found, which we'll need in a bit.
str = str.strike();
This is where we do the strike through, replacing the original text.
document.getElementById("search").innerHTML =
wordSearch.slice(0, locationFound) +
str +
wordSearch.slice(locationEnd);
What this is doing is removing the original word in the document, and replacing it with the struck through version. It's then setting that value to the innerHTML of the element with the id of search.
The final code:
<table>
<tr>
<td class="wordSearch" id="search">
QMGLUTKVRDIYKSA <br />
GKMTWRITELNXDYP <br />
MGETELEMENTBYID <br />
TTOLOWERCASEBRD <br />
NYRTOUPPERCASEI <br />
CJDYOFUNCTIONPN <br />
WEMSFZTJZJOMFTV <br />
BCBCCXSURWHILEE <br />
PPRETURNXATLJOU <br />
OIFYGTVFXHAAVIN <br />
FZRXADXETWINDOW <br />
DWNIZKHIVFXPIDL <br />
IFRSTRINGVCQQLP <br />
DOCUMENTULELSEN <br />
JYBOOLEANFAXAJH
</td>
</tr>
</table>
<form action="">
<p>
<label>Enter the word you've found and press Enter:
<input type="text" id="word" />
</label>
<input type="button" value="Enter" onclick= "findWord();" />
</p>
</form>
<div id="scoreArea"></div>
<script type="text/JavaScript">
var words = "Javascript";
function findWord() {
var str = document.getElementById("word").value.toUpperCase();
var wordSearch = document.getElementById("search").innerHTML;
var locationFound = wordSearch.indexOf(str);
if (locationFound === -1) {
alert(str + " wasn't found");
} else {
var locationEnd = locationFound + str.length;
str = str.strike();
document.getElementById("search").innerHTML =
wordSearch.slice(0, locationFound) +
str +
wordSearch.slice(locationEnd);
}
}
</script>

Editing html input element from javascript bugs out

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/