I want to execute this java script on load, but it doesn't seem to display the result after
the browser loads.
<script>
function displayNumber()
{
var card = document.getElementById('credit').value;
var str = "";
for(var i=1; i <= card.length-4; i++) {
str += "*";
}
ecard = str + card.substr(card.length-4);
document.getElementById('output').innerHTML = ecard;
}
</script>
<form id="myform">
<input type="text" id="credit" onLoad="displayNumber()" value="123456789012">
</form>
<label id="output"> </label>
The output should be
********9012
You cannot use onload with an input. Instead, put window.onload = displayNumber; in your JavaScript. The other option is to add a body tag and use onload="displayNumber()"
Related
I would like to know how could I create many <input type=text /> tags with a loop in JS.
I need that loop to be linked to a first input (type=number), which tell to the loops how many input text to create.
function getP () {
var nbP = Number(document.getElementById("nombreP").value);
for (var i = 0; i < nbP; i++) {
var newForm = document.createElement("input[type=text]");
newForm.id = "form"+i
document.body.appendChild(newForm);
}
}
<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>
Direct answer to your question:
<script type="text/javascript">
function getP() {
var nbP = +document.getElementById("nombreP").value;
var inputContainer = document.getElementById("inutContainer");
for (var i = 0; i < nbP; i++) {
var newForm = document.createElement("input");
newForm.setAttribute("type", "text");
newForm.setAttribute("id", "form"+i);
inputContainer.appendChild(newForm);
inputContainer.appendChild(document.createElement("br"));
}
}
</script>
<form>
<input type="number" name="nombrePlat" id="nombreP">
<input type="button" value="Envoyer" id="ok" onclick="getP()">
<div id="inutContainer">
</div>
</form>
BUT: this is good question to learn about Javascript and HTML, but bad to create powerfull UI. To implement modern UI in JS/HTML i am strongly recommend to learn more abou next technologies:
https://reactjs.org/ or https://angular.io/ or https://vuejs.org/
I hope it helps:
document.querySelector('#ok').addEventListener('click', getP)
function getP(event) {
let inputsQtt = document.querySelector('input[type=number]').value
for (let i = 0; i < inputsQtt; i++) {
let input = document.createElement("input");
document.body.appendChild(input);
}
}
<form method="get">
<input type="number" name="nombrePlat" id="nombreP">
<input type="button" value="Envoyer" id="ok">
</form>
There are few problems with your code
First: syntax error, you are missing 1 curly bracket } to close function.
And second and more important as you click on button it causes to submit form and refreshes the page.To solve this you just need to change type of button from submit to button.
And also you can not use "input[type=text]" to create element.You can just create an element with following code
function getP () {
var nbP = Number(document.getElementById("nombreP").value);
for (var i = 0; i < nbP; i++) {
var newForm = document.createElement("input");
newForm.id = "form"+i;
newForm.setAttribute("type","text");
document.body.appendChild(newForm);
}
}
Here's a slightly different approach, that involves adding a wrapper container within your form.
function updateForm() {
var parent = document.getElementById('inputs'),
count = document.getElementById('inputCount').value || 0;
parent.innerHTML = '';
for (let i = 0; i < count; i++) {
parent.innerHTML += `<input placeholder="text input ${i+1}" name="form${i+1}" id="form${i+1}" /><br>`;
}
}
<form method="get" name="inputForm">
<input min="0" type="number" name="inputCount" id="inputCount">
<div id="inputs">
<!-- container for dynamic inputs -->
</div>
</form>
<!-- Notice inputs can also be associated to form with `form` attribute -->
<input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">
i would like to know how i can make it so when people input something it goes in a bulleted list, in the middle of the screen. Like but in javascript?
I got my code from: How to display input back to the user on an HTML page?
<html><head></head><body>
<input id="title" type="text" maxlength="276" onkeyup="Allow()" >
<input type="submit" value="Save/Show" onclick="insert()" />
<div id="display"></div>
<script type="text/javascript">
var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
function Allow(){
if (!user.title.value.match(/[a-zA-Z1-9]$/) && user.title.value !="") {
user.title.value="";
alert("Please Enter only alphabets");
}
}
function insert () {
titles.push(titleInput.value);
clearAndShow();
}
function clearAndShow () {
titleInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "To Do: " + titles.join(", ") + "<br/>";
}
</script>
</body>
</html>
jsbin example: https://jsbin.com/xahidolibu/edit?html,output
I've modified your code to:
create a list instead of comma deliminated string on clearAndShow()
added css to center align the list
jsbin: https://jsbin.com/lamebopidu/1/edit?html,css,output
I'd like to figure a way out using html and javascript. I have a form which will get modified each week and would like to simplify editing it.
events_in = ["event_1_date", "event_2_date", etc...]
and would display the check boxes
[] event_1_date
[] event_2_date
which you can then use the form normally.
The array input to form values will get updated weekly with new events.
There is a way using php but couldn't translate it into the languages I want to use.
Using jQuery (as you have included the jQuery tag).. First add a div to your form:
<div id="checkboxes"></div>
Then in javascript:
$(function() {
var events_in = ["event_1_date", "event_2_date"],
events_in_count = events_in.length,
i = 0;
for(;i<events_in_count;i++) {
$('#checkboxes').append('<label><input type="checkbox" name="' + events_in[i] + '">' + events_in[i] + '</label>');
}
});
You could try something like this.
var one = "text here";
var two = "text here"
var array = [["one", one],["two",two]]
window.onload = init;
function init(){
var checkListItems = document.querySelectorAll(".checklist-items");
for(var i = 0; i < checkListItems.length; i++){
updateHTML(checkListItems[i]);
}
}
function updateHTML(item){
var id = item.getAttribute("id");
alert(id)
for(var i = 0; i < array.length; i++){
if(array[i][0] == id){
item.innerHTML = array[i][1];
}
}
}
<form action="">
<input type="checkbox"><span class="checklist-items" id="one">Item</span>
<input type="checkbox"><span class="checklist-items" id="two">Item</span>
<input type="checkbox"><span class="checklist-items" id="three">Item</span>
<input type="checkbox"><span class="checklist-items" id="four">Item</span>
<input type="checkbox"><span class="checklist-items" id="five">Item</span>
</form>
I don't want to change my text box name in Form because it' using some where else in program.
Problem is JavaScript doesn't like my textbox name (m4j-117). it's Considering "-" as minus.
How can I make it work with out change my text box name.
Thanks
Any help will be appreciate.
Here is my Sample Code.
<form name="randform">
<body>
<script language="javascript" type="text/javascript">
function randomString() {
var chars = "0123456789";
var string_length = 8;
var randomstring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
document.randform.m4j-117.value = "P"+randomstring;
}
</script>
<input type="button" value="Create Random String" onClick="randomString();">
<input type="text" name="name" value="value" onblur="randomString();;"/>
<input type="text" name="m4j-117" value="">
</body>
</form>
How about:
document.getElementsByName("m4j-117")[0].value = "P"+randomstring;
From a specific form:
document.randform.elements["m4j-117"] = "P"+randomstring;
document.randform['m4j-117'].value
Relying on names is a bit antiquated though; I'd suggest giving it an ID and using document.getElementById directly, or using querySelector with an appropriate ID for the form
Hi want to store what user input into the textbox into my javascript var to be passed to my external PHP page,
I can pass the variable if i just define a value like mySite= 22 but not from what user enters into the text box.
Please help me to get access to the texbox.value
<form method="post" action="" onsubmit="submitFun(this)">
<input type="text" name="order_IDsearch" id="order_IDsearch"onBlur="javascript:setmysite(this);">
<input type="submit" />
</form>
<script type="text/javascript">
var mySite = '';
function setmysite(v1) {
var parent = document.getElementById('list');
var element = parent.GetElementsByTagName('order_IDsearch')[0];
mySite = element;
}
function submitFun(f1) {
t = './get_order.php?s=' + mySite;
t = encodeURI (t);
f1.action = t;
f1.submit();
return true;
}
You can try document.getElementById('order_IDsearch').value;