I am using the following code to use a text box to go to a url, adding the value of the textbox at the end of the url.
I want to change this to me a multiline text box. Then for each line in the text box, open a new browser tab with the preset url, plus the line value at the end.
E.g. At the minute if I entered 'test' in the text box it navigates to https://myprofiles.co.uk/name=test
Essentially I just want to copy a list of names into a multime text box and have it open up a browser tab per line. Is someone able to help point me in the right direction please?
<form id = "your_form" onsubmit="yourFunction()">
<input type="text" name="name">
<input type="submit" value="Search">
</form>
<script>
function yourFunction(){
var action_src = "https://www.myprofiles.co.uk/" +
document.getElementsByName("name")[0].value;
var your_form = document.getElementById('your_form');
your_form.action = action_src ;
}
</script>
You could do this. Replace the TextBox with a TextArea and add a listener to the button. The button needs to have an ID for that. I've added event.preventDefault(); to prevent the form from actual doing a POST. But if you need that then simply remove it.
<form id="your_form">
<textarea name="name"></textarea>
<input type="submit" value="Search" id="your_button">
</form>
<script>
document.getElementById("your_button").addEventListener("click", function (event) {
var action_src = "https://www.myprofiles.co.uk/?name=";
//get the value of the textarea and split by line
var rows = document.getElementsByName("name")[0].value.split(/\r?\n/);
//loop all the rows
for (var i = 0; i < rows.length; i++) {
//open a new window, could be blocked by browsers
window.open(action_src + rows[i], "Window" + i);
}
//block the posting of the form if needed
event.preventDefault();
});
</script>
Related
I am creating a form that shows one question at a time. I would like to show all questions, though, on a different view when "View Complete Form" is clicked. The problem I am having is showing the questions in said form. There's no issue with the single view questions.
I am able to display the value, on said form but I cannot actually enter anything. That's not what I want.
Ex. in case any one is confused:
(In single view)
Question 1: (input box) Answer 1
(In full view)
Question 1: Answer 1 (All text, no input boxes)
I would like to do:
(In single view)
Question 1: (input box) Answer 1
(In full view)
Question 1: (input box) Answer 1
Like I said, I see how I can get the value (I used answer[i-1] = document.getElementById(i-1).value) then I print the answer BUT WITHOUT THE INPUT BOX.
I realized my mistake so I tried document.getElementById(x) which gives me [object HTMLInputElement]. Again, I just want the input box with the answer already filled in IF it's filled on the single view.
Did some searching on here and tried to use appendTo, descendants and appendChild (object does not support these) but nothing helped.
html
<div id="questionnaire-question">Click 'Start' to begin...</div>
<div id="input-questionnaire">
<input type='text' class='form-control' name='reqEng' id='1' style="display:none" placeholder="Requesting Engineer" required>
</div>
<button id="view-form" onclick="viewForm()">View Complete Form</button>
<form id="full-form" style="display:none">
<div id="full-form-question"></div>
<input type="reset" name="reset" value="Reset Fields">
<input type="submit" name="submit" id="submitQuestionnaire" value="Submit Questionnaire">
</form>
</div>
js
function viewForm() {
for (var x = 0; x < 44; x++) {
//form.appendChild(document.getElementById(x)); // Didn't work
//form.insert(document.getElementById(x).descendants()[x]); // Not supported
//document.getElementById(x).style.display = "block"; // Loop for questions and answers to populate
//document.getElementById(x+1).appendTo(form);
//fullForm.innerHTML += questions[x]+ ": " + answer[x+1] + " <br>";
fullForm.innerHTML += questions[x] + ": " + document.getElementById(x + 1) + " <br>";
}
}
This is what I want (from a previous form. I populated the inputs in an array but found it easier with some functionalities if I had just hard coded it)
https://imgur.com/cgarzSd
This is what I currently have :
https://imgur.com/Uj4FlvZ
Your question could possibly use some clarification, however I am taking a stab at it hoping that we can get you on the right track.
Below is an example of simply moving the input from one div to another:
function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');
//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{
//if you want to ensure input is no longer hidden when moved
//inputs[i].style.display = "block";
//move the element to the new div
document.getElementById("full-form-question").appendChild(inputs[i]);
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}
Here is another option if you actually want to "copy" the input to the new div:
function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');
//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{
//clone the current input
var clone = inputs[i].cloneNode();
//make sure the question is visible?
clone.style.display = "block";
//append the clone to your "full-form-question" div
document.getElementById("full-form-question").appendChild(clone);
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}
Hope this helps. Cheers!
Here's a basic example of how you can "move" input elements from one form to another. In reality you're making a copy of it and removing the old one from the previous form.
It looks like the main problem you're having is that you're not defining the form.
Take a look at how you could go about it:
function viewForm() {
const form1 = document.getElementById('form-1')
const form2 = document.getElementById('form-2')
for (var x = 1; x <= 1; x++) {
let input = document.getElementById(x)
form1.remove(input)
form2.append(input);
const span = document.createElement('span');
span.innerText = `${x} is now in form2`
form2.appendChild(span)
}
}
document.getElementById("btnMove").addEventListener('click', viewForm);
<div>
Form 1
<form id="form-1">
<input type='text' class='form-control' name='reqEng' id='1' placeholder="Requesting Engineer" required>
</form>
</div>
<div>
Form 2
<form id="form-2">
</form>
</div>
<input type="button" id="btnMove" value="move input">
I found this code on here (thanks to Xavi López) and it is ideal for what I need to add to my project but I'm in need of some help adding a Form post and submit button in JavaScript. I have no knowledge on this subject and I've tried looking at some example but non of them seem to work. I would be grateful if someone could help me. After the user adds the relevant number of input boxes and adds there data, I would like to have a submit button which will POST the results to another web page (result page)
I have added the solution to the below coding (thank you MTCoster) but I'm now try to find a solution to having the submit button appear only when an entry has been added. I have tried different methods but non will work.
function addFields() {
// Number of inputs to create
var number = document.getElementById('member').value;
// Container <div> where dynamic content will be placed
var container = document.getElementById('container');
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i = 0; i < number; i++) {
// Append a node with a random text
container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
// Create an <input> element, set its type and name attributes
var input = document.createElement('input');
input.type = 'text';
input.name = 'member' + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement('br'));
}
}
<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
Add Pinout Entries
<form action="result.asp" method="POST">
<div id="container"></div>
<input type="submit" value="Add Data">
</form>
You’re almost there - all you need to do is wrap your inputs in a <form> element:
function addFields() {
// Number of inputs to create
var number = document.getElementById('member').value;
// Container <div> where dynamic content will be placed
var container = document.getElementById('container');
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i = 0; i < number; i++) {
// Append a node with a random text
container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
// Create an <input> element, set its type and name attributes
var input = document.createElement('input');
input.type = 'text';
input.name = 'member' + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement('br'));
}
}
<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
Add Pinout Entries
<form action="/url/to/post/to" method="POST">
<div id="container"></div>
<input type="submit">
</form>
If you’d like the submit button to only appear after at least one input is visible, you could add it at to div#container at the end of addFields(). I’ll leave this as an exercise to the OP, since it’s not much different to how you’re adding the input fields.
I'm wondering how to get the last word typed in Javascript. I have a text area my_text and when the user hits the spacebar it will get the last word that the user typed. This is what I'm trying so far
function getLastWord() {
var input = document.getElementById(my_text.value);
//var lineIn = document.getElementById(my_text).innerHTML;
var lastWordTyped
var changeColorOfWord;
if (input == null) {
input == " ";
}
lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
When the function gets called on a spacebar hit, it says that input is null so when it gets the lastWordTyped var, it shows up null and errors out, does anybody know why this may be happening?
Preferably no JQuery
Here's some of the HTML to go with it.
<body>
<br />
<!-- Text area -->
<textarea class="text_edit" id="my_text" onkeypress="return myKeyPress(event)" onkeydown="return onKeyDown(event)"></textarea>
<br />
<!-- Submit button -->
<input type="button" value="Run Code" onclick="view_text()" />
<!-- Empty div to put the text in -->
<div id="view_text">
</div>
Ok, so I got the error to go away now i just need it to change the font color of the word typed lol..
Did you mean
var input = document.getElementById("my_text").value;
Try this:
<textarea id="MyText" rows="10" cols="50" onkeyup="getLastWord(event);"></textarea>
var Old = "";
var New = "";
function getLastWord(e)
{
New = document.getElementById("MyText").value;
if(e.keyCode == 32)
{
Old = New.replace(Old, "");
alert(Old);
Old = New;
}
}
DEMO
So basically what I want is for the submit button to be disabled until a certain word count has been reached in the text area.
I have had a look around and tried to find ways to do it, with no luck.
Any tips or help?
<form method="post" id="writearticle" action="submitarticle.php">
<script>
$('#writearticle').submit(function(event) {
var text = $("#content").val();
text = text.split(" ");
// check for at least 10 words
if(text.length < 10){
console.log("prevented");
// prevent submit
event.preventDefault();
return false;
}
console.log("submitted");
});
</script>
<textarea rows="30" cols="85" id="content" name="content" placeholder="Write the article here. Try to abide by the instructions and keywords provided."></textarea>
<br />
<input type="submit" name="submitarticle" value="Submit Article" class="submit" />
<br /><br /><br /><br /><br />
</form>
Show us your code.
1) Set onclick event for the submit button
2) Check length in textarea
3) return false and preventDefault() if there is not enough words.
You can check the word/charactor count in keyup event.
see this example at http://elylucas.net/post/Enabling-a-submit-button-when-a-textbox-has-value-in-jQuery.aspx
instead of checking for a value, you split the input string in the text box and see the length of the array is more than your desired word count
Use the textchange (not built-in) event to accurately detect text changes via keyboard, paste etc. - http://www.zurb.com/playground/jquery-text-change-custom-event
$('textarea').bind('textchange', function () {
// $(this).val() contains the new text
});
In your text-change event, check the length/count the words in your text and enable disable the submit button as needed (make sure its initially disabled).
You catch the submit event, you count the words in the textarea and only submit if it is high enough. Example:
$('#targetForm').submit(function(event) {
var text = $("#myTextarea").val();
text = text.split(" ");
// check for at least 10 words
if(text.length < 10){
// prevent submit
event.preventDefault();
return false;
}
});
DEMO
Try out below lines of code,
$(document).ready(function() {
$(".submit-name").attr("disabled", "true");
var minLength = 100;
$("#your-text-area").bind('keyup', function(event) {
var String = $("#your-text-area").val()
if (String.length >= minLength ) {
$(".submit-name").removeAttr("disabled");
} else {
$(".submit-name").attr("disabled", "true");
}
});
});
I have four input boxes. If the user fills the first box and clicks a button then it should autofill the remaining input boxes with the value user input in the first box. Can it be done using javascript? Or I should say prefill the textboxes with the last data entered by the user?
On button click, call this function
function fillValuesInTextBoxes()
{
var text = document.getElementById("firsttextbox").value;
document.getElementById("secondtextbox").value = text;
document.getElementById("thirdtextbox").value = text;
document.getElementById("fourthtextbox").value = text;
}
Yes, it's possible. For example:
<form id="sampleForm">
<input type="text" id="fromInput" />
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="button"value="Fill" id="filler" >
<input type="button"value="Fill without jQuery" id="filler2" onClick="fillValuesNoJQuery()">
</form>
with the javascript
function fillValues() {
var value = $("#fromInput").val();
var fields= $(".autofiller");
fields.each(function (i) {
$(this).val(value);
});
}
$("#filler").click(fillValues);
assuming you have jQuery aviable.
You can see it working here: http://jsfiddle.net/ramsesoriginal/yYRkM/
Although I would like to note that you shouldn't include jQuery just for this functionality... if you already have it, it's great, but else just go with a:
fillValuesNoJQuery = function () {
var value = document.getElementById("fromInput").value;
var oForm = document.getElementById("sampleForm");
var i = 0;
while (el = oForm.elements[i++]) if (el.className == 'autofiller') el.value= value ;
}
You can see that in action too: http://jsfiddle.net/ramsesoriginal/yYRkM/
or if input:checkbox
document.getElementById("checkbox-identifier").checked=true; //or ="checked"