How to generate selection box and text field dynamically in HTML - javascript

In the following code, I am trying to generate a selection box and text field every time a user presses Add button. The problem that I am facing is that how I can generate a new text field with different name. As you can see in the code, the name of the text box is text1. How can I generate a new text box with a name text2, for example.
<html>
<head>
<title></title>
</head>
<body>
<h1><center>Querying Social Media</center></h1>
<form>
<center>
<select>
<option value="Author">Author</option>
<option value="Mention">Mention</option>
<option value="Tag">Tag</option>
</select>
<input type="text" name="text1">
<select>
<option value="And">And</option>
<option value="Or">Or</option>
</select>
<input type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<script language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</center>
</form>
<span id="fooBar"> </span>
</body>
</html>

you can make three global variables for all three type and every time add function called you make increment on global viable depending on type and then set the name of textbox like (textbox_1,textbox_2, ...) .
what you think>

You have to do it like this:
function add(type, value, name) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", value);
element.setAttribute("name", name);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
add("input","someValue", "text2");
<span id="fooBar"></span>

Related

make diffrence between objects that created with clone() in java script

Good Day Friends. I have a problem... Thanks, if you help me
I have a couple of inputs into a div. I copied that div with Clone function in java script (by click a button) and right now, I have two divs. but my problem:
1- I don't know, How can I get the values of inputs correctly (the input's names are the same)?
2- and I have a select input in div, that some inputs add or remove by choose each option of select input. Now after copied div, choose one option in div2, create changes in div1... and I don't want it !!
<div class="levels">
<div class="add_senario_level">
<span>Level 1</span>
<form>
<select name="condition" onchange="show_div(this,'shop during');">
<option selected="selected" disabled="disabled">choose condition</option>
<option>shop after registration</option>
<option>shop during</option>
</select>
<div id="shop_during" style="display:none;">
<input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
<select id="shop_during_time" name="shop_during_time">
<option selected="selected">hour after registeration</option>
<option>day after registeration</option>
<option>week after registeration</option>
<option>month after registeration</option>
</select>
</div>
<div>
<button type="button" class="newLevel"> Add New Level </button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function()
{
$(".newLevel").click(function()
{
$(".add_senario_level").clone().appendTo(".levels");
});
});
function show_div(obj, id)
{
txt = obj.options[obj.selectedIndex].text;
if (txt.match(id))
{
document.getElementById("shop_during").style.display = 'block';
}
else
{
document.getElementById("shop_during").style.display = 'none';
}
}
</script>
You can use jQuery's find function to find a child element and the attr function to get and set attribute values. You will want to do this to change on the id and name attributes for the input and select like below:
HTML
<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">
JavaScript
$(".newLevel").click(function()
{
const count = $('.add_senario_level').length;
const clone = $(`#add_senario_level${count - 1}`).clone();
const input = clone.find(`#shop_during_num${count - 1}`);
const select = clone.find(`#shop_during_time${count - 1}`);
input.attr('name', `shop_during_num${count}`);
input.attr('id', `shop_during_num${count}`);
select.attr('name', `shop_during_time${count}`);
select.attr('id', `shop_during_time${count}`);
clone.appendTo(".levels");
});
In the show_div method, you can use $(obj) to reference the select that called the function and show or hide the correct element with
$(obj).parent().find('#shop_during').css('display', 'block');

Javascript textboxes - Finding lowest input and filling

Okay, so here is what I'm trying to do. I have two textboxes and the user will enter a number in each one. Then, when they click the button, a third textbox should appear with the lowest number inside.
My textbox appears, but I can't get the lowest number to appear with it. Here is my code so far.
<html>
<head></head>
<body>
<script>
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "Text3");
document.body.appendChild(element);
fill();
}
function fill() {
value = Math.min(document.getElementById("Text1").value, document.getElementById("Text2").value);
}
</script>
<form>
<input type="text" id="Text1" value="Number 1">
<input type="text" id="Text2" value="Number 2">
<input type="button" onclick="addTextBox()">
</form>
</body>
</html>
You didn't set the value of the input to value, only calculated it. So a correct addTextBox() function would be:
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "Text3");
document.body.appendChild(element);
element.value = Math.min(document.getElementById("Text1").value, document.getElementById("Text2").value);
}
Make sure you type numbers into the input, otherwise you'd get NaN.

display selected from dropdown box in a form as readonly

I have a situation, ie, I wanted the selected data from the dropdown box to be displayed inside a form (of type text) below it and which should be readonly.(using html/javascript). I am not able to do that as i am a pioneer in that
Hope responses
The below is a rough sketch of a non-jquery method of dynamically changing one form box using input from a dropdown menu.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function optionCallBack (arg) {
var currentOption = arg.options[arg.selectedIndex].text;
document.getElementById('changeForm').value = currentOption;
}
</script>
</head>
<body>
<select onclick="optionCallBack(this)" id='getForm'>
<option>asia</option>
<option>africa</option>
<option>america</option>
<option>europe</option>
</select>
<form>
<input value='europe' name='changeForm' id='changeForm'></input>
</form>
</body>
</html>
First of all, you need a select list like below (notice the onchange event handler)
<select onchange="fillTextBox(this)" id='mySelectList'>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
You will also need a text box (lets give it an Id myTextBox)
<input value='' name='' id='myTextBox'></input>
You'll need the following script for fillTextBox function
function fillTextBox(obj) {
var sel = obj.value;
document.getElementById('myTextBox').value = sel;
}

Select from multiple HTML fields then add total to another list

I have 3 HTML fields: a textbox and two select lists.
What I'm trying to do is let the user enter something in the text field and choose options from the other two lists and then click an "Add" button which adds his total selection to another list. This final list is the one to be submitted and received by the CGI script.
So for example a user types in "Toyota" and selects Sedan from one list and 2004 from a second list and clicks add. Then, "Toyota Sedan 2004" would be added to an empty list. The user can add multiple selections to the list or remove from the list. And this list is the one that is submitted when the form is submitted. It is preferable if I do this in Javascript only so no JQuery. Can anyone point me in the right direction?
What you need is, when the "add" button is clicked, a simple javascript function is called that retrieves: the text, selection1 & selection2 => build a new option with these information the append it to the result list.
Key javascript functions:
- document.getElementById
- document.createElement
- appendChild
In your html the form/submit button must be around your result list only.
Example (jsfiddle link):
<html>
<head>
<script>
function add() {
var txt = document.getElementById("txt").value;
var sel1 = document.getElementById("sel1").value;
var sel2 = document.getElementById("sel2").value;
var result = txt + " " + sel1 + " " + sel2;
var resultOption = document.createElement("option");
resultOption.value = result;
resultOption.text = result;
document.getElementById("selResult").appendChild(resultOption);
}
</script>
</head>
<body>
<input id="txt" type="text" />
<select id="sel1">
<option value="value11">value11</option>
<option value="value12">value12</option>
<option value="value13">value13</option>
</select>
<select id="sel2">
<option value="value21">value21</option>
<option value="value22">value22</option>
<option value="value23">value23</option>
</select>
<input type="button" value="add" onClick="javascript:add()"/>
<br/>
result:
<form action ="." method="post">
<select id="selResult"></select>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Use need to user this jquery plugins:
Jquery Forms
Jquery Auto Tab
Jquery UI
And some jquery functions that can be useful for you:
.ajax()
prepend()
.on()

Display the selected value of a Drop down list in a text field (javascript)

For Example:
These are the items in a drop down list.
<select name="cmbitems" id="cmbitems">
<option value="price1">blue</option>
<option value="price2">green</option>
<option value="price3">red</option>
</select>
When the user selects blue, i want to display the value of price1 in a text field below:
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
Thank you for answering
All you need to do is set the value of the input to the value of the select, in a select.onchange event handler.
var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = select.value;
}
Here is a link to a jsFiddle demo
This is the brute force way to look up the currently selected option, check its value and use its display text to update your input. Like Daniele suggested, if you have jquery at your disposal, this gets much, much easier. But if you can't use a JS framework for any reason, this should get you what you need.
<select name="cmbitems" id="cmbitems" onchange="updateTextField()">
...
</select>
<input type="text" ..... />
<script type="text/javascript">
function updateTextField()
{
var select = document.getElementById("cmbitems");
var option = select.options[select.selectedIndex];
if (option.id == "price1")
{
document.getElementById("txtprice").value = option.text;
}
}
</script>
$.on('change', '#cmbitems', function() {
$('#txtprice').val($('#cmbitems option:selected').val());
});
If you are using jquery just go with
$('select.foo option:selected').val(); // get the value from a dropdown select
UPDATE ( I forgot to inlcude the <input> population)
First, inlcude jquery in your html file.
In the <header> you include it:
<header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>
Then
<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">

Categories

Resources