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!
Related
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);
Often I'm creating some kind of form on a website, and I have a <label> and a <input> which should be linked together.
The standard way to do this is by setting the 'for' attribute on the <label> to match the 'id attribute on the <input>
<label for="city-input">City</label>
<input id="city-input" type="text" />
This of course relies on having a unique ID for every <input> element on the page.
I frequently find myself in the situation where I have to create the form dynamically and the exact contents of the rest of the page are unknown or out of my control. So I can't just assign an id like 'city-input' in case it clashes with something else on the page. I end up creating random strings to use as ids:
var label = document.createElement('label');
label.innerHTML = 'City';
var input = document.createElement('input');
input.type = 'text';
// create a random string as the id
var id = Math.random().toString(36).substring(2);
input.id = id;
label.htmlFor = id;
This method works, but I hate it. I've got my HTMLInputElement instance and my HTMLLabelElement instance. I want to link them together. But I have to pointlessly create a random string to use as an intermediary. Then when someone clicks the <label> the browser has to pointlessly look up the string id to find the <input> element. It's so inelegant.
Is there any way to directly associate the HTMLLabelElement with the HTMLInputElement? Or some other better method?
(I know you can avoid the id by putting the <input> inside the <label> but this often isn't possible because of the way the page will be styled or various other reasons).
You can avoid the random number by just using an incrementing counter as the unique id of the form elements.
I have created a codepen here that shows the addition of a random number of form elements every time the refresh button is clicked. Each element has it's own label and input, both linked by the generation of a unique incrementing id. All of which can be referenced individually. Clicking on the label will automatically highlight the linked form input.
Just for clarity I have used the following format for the linking ids:
var id="_" + counter +"_"+i;
var labelId = "labelForCity_" + counter +"_"+i;
var inputId = "city_" + counter +"_"+i;
Then the label is linked to the input by
label.htmlFor = inputId;
Each time the refresh button is clicked (simulating a dynamic number of additional fields being added to your form) the counter variable is incremented which is used in the id. The id is shown in brackets beside the input field.
If your label and input are residing side by side always(they should be), then you can write a method to provide focus to next input when you click on the label.
Example code, you can modify it according to your need:
HTML -
<label>something</label>
<input />
Javascript -
var a = document.getElementsByTagName('label')[0];
a.addEventListener('click', function(e){
e.target.nextElementSibling.focus();
});
I would like to be able to use the JavaScript function of one of my form inputs to be able to show or hide a text box. After a lot of research I can only find how to select and hide other form input methods.
here is what I have:
var supplyBudget = this.getField("Supply Budget").value;
if (supplyBudget == ""){
/*text box selector*/.style.display = 3;
}
else if (supplyBudget =="0"){
/*text box selector*/.style.display = 3;
}
else{
/*text box selector*/.style.display = 1;
}
This runs when the user leaves the input field.
*edited code in accordance with freginold's comment
If you want to hide text that is part of the page content, you can't do that with PDF unless that particular text item is assigned to an Optional Content Group (OCG)... basically a layer that you can show or hide. There is no concept of "elements" for PDF page context like there is in HTML. Instead, there's a list of painting instructions for the page but JavaScript does not have access to it.
There are no "selectors" in Acrobat JavaScript. However, you can get the number of fields and then iterate to get the names in order to find the ones that are of interest. For example if I wanted to hide all fields where the name starts with "name", I might write...
for ( var i = 0; i < this.numFields; i++) {
var field = this.getField(this.getNthFieldName(i));
if ( field.name.indexOf("name") > -1 ) {
field.display = display.hidden
}
}
In general, to hide a field use...
this.getField("myFieldName").display = display.hidden;
To show a hidden field use...
this.getField("myFieldName").display = display.visible;
The only way that I have found to "Hide plain Text" and a text field, is to use something similar to #joelgeraci answer. I had to add another empty read only textbox to cover the text and textbox to hide.
Such as:
this.getField("HiddenField").display = display.visible;
Then when I need to "show" the text and text box I would simply hide the hidden field:
this.getField("HiddenField").display = display.hidden;
I have multiple cases of this in a form that I have been creating for work and a lot of JS behind it. I am no expert, just learning as I go.
I am looking for a way so that when a user types their name within a form field input box, a digital signature is created, or some type of box that shows the name written.
Is something like this possible?
The form itself does not need to submit the signature, it is purely for show on the form page itself.
Thanks
You can listen for changes on your input and on each trigger, copy it's value to the place you want. That's what you want to achieve, right?
// Listen for input change
$('#yourInputId').on('input',function(e){
//copy it's content somewhere else
$('#placeToPasteValue').text($('#yourInputId').val());
});
EDIT: I don't know your exact case, but if you want to show/hide some other elements based on input value, you can check if input is empty
// Listen for input change
$('#yourInputId').on('input',function(e){
var currentInputValue = $('#yourInputId').val();
if(currentInputValue === '') {
$('#otherElement').hide();
} else {
$('#otherElement').show();
//copy it's content somewhere else
$('#placeToPasteValue').text(currentInputValue);
}
});
Other approach could be to add/remove your CSS classes inside if/else block to provide transitions, or other fancy effects :)
I don't know if this is what you need but maybe can help
var button = document.getElementById("submitButton");
var nameField = document.getElementById("name");
var sign = document.getElementById("sign");
function createSign(){
sign.innerText = nameField.value;
}
button.addEventListener("click",createSign,false);
#import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive);
div{
height:300px;
width:80%;
font-family:"Cedarville Cursive";
font-size:25pt;
}
<input type="text" id="name">
<button value="submit" id="submitButton">Submit</button>
<br>
<div>
<p id="sign"></p>
</div>
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