I have code that has a text field and a button made in javascript. When the user clicks the button, it opens up a new window to a website's search page. What I wanted to do was to fill in the search field by using it's id and then activate the website's search button. I haven't seem to be able to get the text passed to the external site's textfield but here's what I have.
<script type="text/javascript">// <![CDATA[
function mySearch()
{
popupWindow = window.open(
'http://www.websitehere.com','popUpWindow','height=768,width=1024,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
popupWindow.focus();
popupWindow.searchpath1 = 'test value';
}
// ]]></script>
<center><form><input name="searchTxt" type="text" /><br /> <input onclick="mySearch()" value="Search" type="button" /></form></center>
textBoxId would be the id of the search textbox on the newly opened window.
If anything doesn't make sense, let me know.
here is the source code for the textbox of the external site:
<input title="Search Term" type="text" name="searchpath1" id="searchpath1" maxlength="255" size="25" style="width: 300px;" value=""/>
try something like
popupWindow.document.getElementById('textBoxId').value = 'test value';
instead of
popupWindow.textBoxId = 'test value';
You need to get the input text DOM element 'textBoxId' and set 'value' property of this obtained element.
This line is wrong
popupWindow.textBoxId = 'test value';
Use following lines to replace it:
var targetTextField = popupWindow.document.getElementById('textBoxId');
targetTextField.value = "test value";
Here, I rewrote full function definition to evaluate proposed solution. Try it and let us know how it worked! []s
function mySearch()
{
popupWindow = window.open('file:///tmp/form.html','popUpWindow','height=768,width=1024,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
if (window.focus())
popupWindow.focus();
var targetTextField = popupWindow.document.getElementById('textBoxId');
targetTextField.value = 'test value';
targetTextField.focus();
}
Related
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>
I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)
This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>
Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".
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
So my question is, how do I pass variables to javascript functions through html input boxes?
Like, let's say I have a function:
function Call(number, text, callerID, CallerIDName, PassCode)
How would I make an input box in html so that when the user submits a value into the box, it would set the variable for that corresponding box?
All help is appreciated, thanks!
Try something like this...
Name: <input type="text" id="number"><br>
Text: <input type="text" id="text"><br>
Caller Id Name: <input type="text" id="CallerIDName"><br>
Passcode: <input type="text" id="Passcode"><br>
<script>
function Call() {
var number = document.getElementById("number").value;
var text = document.getElementById("text").value;
var CallerIDName = document.getElementById("CallerIDName").value;
var Passcode = document.getElementById("Passcode").value;
//do something here...
}
</script>
<button onclick="Call();">Click to Call</button>
Let's say you have an input tag for the "number" parameter:
<input type="text" id="number" />
You can then obtain the value of the field like this;
document.getElementById("number").value
You can find a few examples here. Let me know if I misunderstood your question.