how to add populated select field to form on button click - javascript

I have form where a user can select an option and then submit, i want to add a button that will add another select option to the form. so that the user can submit two or more options
<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<select>
{%for each in mechanic_list %}
<option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
{%endfor%}
</select>
<input type="submit" value="Submit">
</form>
<script>
function add_field()
{
var form = document.getElementsByTagName('form')[0],
input = document.createElement('select');
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
form.appendChild(input);
};
</script>
the above code will populate a first select box and has a button that adds empty select fields (after the submit, for some reason)
two questions
1. how do i populate the added select field
2. how do i move the new field to the proper side of the submit button.
one thing to note, i am using the Django web Framework and have used a for loop to populate the select values.
this is a JSfiddle http://jsfiddle.net/5Jr8N/59/ (no for loop)
thanks
Edit/update
HTML script as coded
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
var opt = document.createElement("option");
{% for each in mechanic_list %}
opt.value = "{{each.id}}";
opt.innerHTML = "{{each.DESCRIPTION}}";
{%endfor%}
input.appendChild(opt);
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>
html script as "rendered" (given to browser/from browser "view source")
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
var opt = document.createElement("option");
opt.value = "dd";
opt.innerHTML = "dd";
opt.value = "TT";
opt.innerHTML = "Test for";
input.appendChild(opt);
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>
so this is working except that it only displays the last value not both/all values. this is so close i can taste it.
how do i get both/all the values not just the last one?

What do you mean by "populate the added select"?
To change position of new select field wrap existing <select> into <span> and append new selects to this <span>. To populate options from original <select> just copy innerHTML from it:
<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<span id="selects">
<select id="orig_select">
{% for each in mechanic_list %}
<option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
{%endfor%}
</select>
</span>
<input type="submit" value="Submit">
</form>
<script>
function add_field() {
var container = document.getElementById('selects'),
input = document.createElement('select');
input.innerHTML = document.getElementById('orig_select').innerHTML;
input.setAttribute('type', 'select');
input.setAttribute('name', 'pet');
container.appendChild(input);
};
</script>

Related

dynamic Drodown in html

I have to make a html page in which there should be TextBox and a add Button and if user add something via Textbox then it should be visible in Dropdown.
kindly help with code.
thanks in advance.
I'm not exactly sure what you need but based on your description, I was able to build this basic page:
const list = document.getElementById("lists");
const text = document.getElementById("myText");
function addEntry(){
var newOption = document.createElement("OPTION");
newOption.value = text.value;
newOption.innerHTML = text.value;
list.appendChild(newOption);
text.value = "";
text.focus();
}
<select id="lists">
<option selected disabled>-- SELECT ONE --</option>
</select>
<br><br>
<input type="text" id="myText" placeholder="Type here...">
<input type="button" onclick="addEntry()" value="+ ADD">
Basically, this uses a function that takes the value, creates an HTML <option> element, then inserts it into the dropdown menu.

How to generate selection box and text field dynamically in HTML

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>

Adding new option to select menu

This is a very simple select bar. Why is it not working?
<html>
<form>
<label>
<select id="sel1">
<option> op1 </option>
<option> op2 </option>
<option> op3 </option>
</select>
<input onclick="s()" type="submit" value=" ok! ">
</label>
</form>
<script>
function s(){
document.getElementById("sel1").innerHTML += "<option> op4 </option>";
}
</script>
</html>
If I want people to add new option, I need to put some variable on it. How can I add php variable instead of op4, op5, etc?
Create an actual option element and append it to the select element.
var option = document.createElement("option");
option.value = "op4";
option.innerHTML = "op4";
var select = document.getElementById("sel1");
select.appendChild(option);
You should probably be using value attributes in your options too.
This is the next question. Then if i want people to add new option , i need to put some php variable on it. how can i add php variable instead of op4 , op5 and... options?
No, this has nothing to do with PHP.
<input id="option-name">
Using the example above, instead of using a fixed "op4", use the value from the input
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
Now the input value will be used as the name/value for the new option
Change this:
<input onclick="s()" type="submit" value=" ok! ">
To this:
<input onclick="s()" type="button" value=" ok! ">
Using type="submit" will result in your form being submitted and thus your page being reloaded. Using type="button" prevents this.
What happens is the form is submitted and as the form element doesn't have action attribute the current page is reloaded.
You should listen to submit event and prevent the default action of the event using preventDefault method of the event object.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var option = new Option('optionText', 'optionValue');
document.getElementById("sel1").add(option);
});
Another option is using a button element with type attribute of button instead of a submit input.
Try this:
<script>
function s(){
var o=new Option();
o.value="<?php echo $option; ?>";
o.text="<?php echo $option; ?>";
var os=document.getElementById("sel1").options;
os[os.length]=o;
}
</script>
I finally write completed Answer. In 2 ways; The first way is safer than another. first way is :
<html>
<form>
<label>
<input type="text" id="option-name">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input onclick="s()" type="button" value=" Create ! "><br/><br/>
</label>
</form>
<script>
function s(){
var input = document.getElementById("option-name");
var option = document.createElement("option");
option.value = input.value;
option.innerHTML = input.value;
var select = document.getElementById("sel1");
select.appendChild(option);
}
</script>
</html>
That is other guys answer too. But the second way is easier and useful. not safer (I think innerhtml is not so safe for this purpose! but if I wrong , please tell me.)!
<html>
<form method="post" action="index.php">
<label>
<input type="text" name="txt1">
<select id="sel1">
<option> Option1 </option>
<option> Option2 </option>
<option> Option3 </option>
</select>
<input type="submit" value=" Create ! ">
</label>
</form>
<script>
document.getElementById("sel1").innerHTML += "<option><?php echo $_POST['txt1']; ?></option>";
</script>

Two forms on the same page needs the value of the same element

I have two forms on a php page. They post to different pages when they are submitted. Both forms need the value of a dropbox that is inside form A. How do I get this value posted when form B is submitted?
Create a hidden input in form B and put a change event on the dropdown in form A which copies it's value to that.
Example (using jQuery - if you want to do it with another library or plain javascript you'll need to adapt it).
<script type="text/javascript">
$(function(){
$('#copy-src').change(function(){
$('#copy-target').val( $(this).val() );
}).change();
});
</script>
<form id="a" action="/a">
<input type="text" name="a_only" />
<select id="copy-src" name="also_b">
<option value=""></option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
<button type="submit">Submit</button>
</form>
<form id="b" action="/b">
<input type="text" name="b_only" />
<input type="hidden" name="also_a" id="copy-target" />
<button type="submit">Submit</button>
</form>
The .change(function(){}) creates a change event to copy the value while the final .change() triggers that event (on page load) to ensure the value is right initially.
You can copy dropbox value to Form B while submitting;
On formB;
<form onsubmit="getDropdownValue()">
.....
</form>
And in function;
function getDropdownValue() {
var formB = document.getElementById("formB");
// Get selected value from FormA
var e = document.getElementById("formADropdown");
var value = e.options[e.selectedIndex].value;
// Append it to formB
var input = document.createElement("input");
input.type = "hidden";
input.name = "dropdownValue";
formB.appendChild(input);
}
You can see demo: Demo . I demo when you click submit, you will see dropdownvalue from form A will be copied to formB before submit

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()

Categories

Resources