I'm wanting to change the source code of an auto-completer that I found on the D3 site.
Click here for link
I basically want to turn the <div id="test" style="width:100%; height:100%;"></div> code into a html form input box so when you click on the autocompleted item it will process a "submit" type request.
Thanks
If I understood the question and what you want to do, you can replace the div with input using JavaScript by doing something like this :
var toReplace = document.getElementById('test'); //element to be replaced
var parent = toReplace.parentNode;
var input = document.createElement('input'); // new element
input.id = input.name = "test";
input.type = 'text';
// can declare more attributes for input here
parent.replaceChild(input, toReplace); // Replacing here..
jsFiddle
Related
I'm looking to copy the text from a <p> element with the ID of code and put it in an input field with the data-field-id of 6197c68b4c806 when a button is clicked.
How could I do this? I would like the code to be inline if that is possible.
First you need to access the element you want to copy the text from with:
`let text = document.querySelector('css selector').text` or .textContent.
This will save the text existing in the element.
Then you select the input, using the same technique and then do:
.value = text.
Also add an event listener to the button you want to click to trigger this:
document.querySelector('btn.submit').addEventListener(() => {
let text = document.querySelector('css selector').text;
document.querySelector('input#x').value = text
})
Should do the trick.
document.queryselector('#btn').addEventListener(()=>
var q_t = document.queryselector('#input').text;
document.queryselector('#output').text(q_t);
)}
You have to follow this above code, hopefully you can solve this
I want to fill an online form automatically with Javascript.
My goal is to fill 'Test3' into the 'Associated' columns
The HTML document of the wording("Test3.mp4) Element is
<a target="_blank" rel="no" href="https://upload-files-e083" class="cursor-pointer">Test3.mp4</a>
The HTML document of the input Element is
<input autocomplete="no" id="input" type="text" class="form-control" value="" field_signature="4130097153" form_signature="11431360034982677603">
and my code is
var event = new Event('input',{'bubbles': true,'cancelable': true});
var title = document.getElementsByClassName('cursor-pointer')[0].innerText;
// console.log(title) will output "Test3.mp4"
// it will change the display web page
document.getElementById("input").value = title.split(".mp4")[0];
// it will change the Elements page in the Chrome browser
document.getElementById("input").setAttribute('value', title.split(".mp4")[0]);
document.getElementById("input").dispatchEvent(event);
I also tried
var title = document.getElementsByClassName('cursor-pointer')[0].innerText;
var txt = document.getElementById('input');
// it will change the display web page
txt.value = title.split(".mp4")[0];
// it will change the Elements page in the Chrome browser
txt.setAttribute('value',title.split(".mp4")[0]);
And even tried to set the value directly
var txt = document.getElementById('input');
txt.value = "Test3";
txt.setAttribute('value',"Test3")
After executing these code in F12-console(chrome), the associated column and the HTML element will be updated successfully.
But when I click the column and move the cursor, the value('Test3') will disappear.
It seems like the value does not input really because the column should show a warning if the information is not valid. In this case, if I input the text manually, the form will look likes the image below:
Does anyone know how to input the value in this situation?
I am not writing this as a comment because of clarity issues.
Try this.
Notice that getElementsByClassName returns an array. SO you have to access the elements like in an array. Notice the second line
var event = new Event('input',{'bubbles': true,'cancelable': true});
var title = document.getElementsByClassName('cursor-pointer')[0];
document.getElementById("input").value = title.innerText.split(".mp4")[0];
//document.getElementById("input").setAttribute('value', title); // why are you setting the "value" again? Also the "title" variable is an HTML element and not a String value.
//document.getElementById("input").dispatchEvent(event);
I am making an unfair dice roller and I have a button with this code:
<button type="button" id="roll-button">Roll the Dice</button>
The button rolls the dice, but I want the site viewer to be able to change what this button says. I have no clue how to do this. Does it have to do with a variable in JavaScript?
Main Question: How do I make the person able to change the text with a form element?
Do you want this way?
Below code is create button tag. Also I set button tag attribute id and type.
HTML
...
<div id="root">
</div>
Javascript
<script>
var buttonText = 'Roll the Dice';
var button = document.createElement('button');
button.textContent = buttonText;
button.setAttribute('id', 'roll-button');
button.setAttribute('type', 'button');
document.getElementById('root').appendChild(button);
</script>
For the first time get the element from document and then change its text Content property to the variable text.
How do I make the person able to change the text with a form element?
Assuming that this is a text input, you'd have to get the value from the input then change the text of the button.
An additional text input field with the id "text-field" is added for this demo.
var textInput = document.getElementById("text-field").value; //gets text-field value
var button = document.getElementById("roll-button"); //gets the button element
button.innerHTML = textInput; //changes the value to what the text input is
i'm working on laravel 5.7
and i need a script to add new form when clicked plus button
i found this script but its only add input fields i need to add the whole form
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div id="post"><input type="text" name="options[]" class="form-control"><input type="text" name="options[]" class="form-control"></div><br>'); //add input box
}
});
Don't inject dom elements via javascript, it's not good practice. As already mentioned above have a look at handlebars, where you can store your form template in an own file. Also vue.js would be a good choice, if you have more to do than just creating a form.
You will want to look at a few JS methods for this...
createElement() - this creates an html DOM element. For example...
let myDiv = document.createElement('div');
Once you have created the element, it will sit out there in the aether until you actually put it on the page. This is where a method like appendChild() comes in to play...
document.querySelector('someElement').appendChild(myDiv);
// This will append the myDiv element you created to your someElement
You can also create text with createTextNode('your text') and append it the same way.
There is also a setAttribute() method that takes two parameters...the first is the attribute to set and the second is the value to set it.
I am working on a fairly dynamic site, and I want the user to be able to choose what they want to input. The input choices are the various types of input (text, password, etc.) Is there some style/way to create this? I was thinking that they choose from a drop down menu and then Javascript takes care of the rest. But I would think that there must be some established way to deal with this that I'm just not finding on the web.
Thanks for any help.
In Javascript, you would create an input as follows.
var input = document.createElement('input');
input.type = 'button';
...
So, if you would like to create inputs on the fly, you could create a dropdown that lists the types of inputs as strings (button, text, etc.). Then, once the user had chosen the string in the dropdown, you would pass it to a Javascript function like the following:
function createInput(type) {
var input = document.createElement('input');
input.type = type
...
return input;
}
Then, if you wanted to append the input to an element on the page with id 'foo':
var input = createInput('button');
var appendToThis = document.getElementById('foo');
appendToThis.appendChild(input);
If you would like to start with a div on the page, imagine you have a div tag with id foo on the page:
<div id=foo><input type=text></div>
Then, when the user chooses an item, clear the div and make a new input:
function whenUserChoosesAType(type) {
var div = document.getElementById('foo');
rac(div);
var input = document.createElement('input');
div.appendChild(input);
}
//abbreviated function to clear the contents of a DOM element such as a div
function rac(elem) {
while(elem.hasChildNodes()) elem.removeChild(elem.firstChild);
}
I originally answered your questions like this:
<input type="text" id="changingInput">
<input type="button" value="Click Here For Example Of Changing" onclick="javascript:document.getElementById('changingInput').type = 'password';">
But then I checked and it didn't work in IE... or course.(it DOES work wonderfully in Safari) So i found this great link here:
http://www.universalwebservices.net/web-programming-resources/javascript/change-input-element-type-using-javascript
Hope this helps!