dynamic form with input and select - javascript

I need an form with possibility to add new row consisting SELECT and INPUT. This works for me, but when I submit form no variable from SELECT is posted.
My HTML code:
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<button id='add'>Add</button>
<form action="test.php" method="get">
<div class='container'>
<select>
<option name='service[]' value=1>HDD Recovery</option>
<option name='service[]' value=2>PC Clean</option>
<option name='service[]' value=3>Other</option>
</select>
Description<input type='text' name='desc[]'>
Price<input type='text' name='price[]'>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
$('div.container:last').append(removeButton);
$('div.container:last input').each(function(){
this.value = '';
});
});
$('#remove').live('click', function() {
$(this).closest('div.container').remove();
});
});
</script>
<br>
</html>
How can i fix this ?

you have to name the select, not the options it holds.
<select name="service[]">
<option value="1">HDD Recovery</option>
<option value=2>PC Clean</option>
<option value=3>Other</option>
</select>

use
<select name='service[]'>
instead of giving name to option
<option name='service[]' value=1>HDD Recovery</option>

Related

Separate select label options and get values in input in PHP

How about, I have a <select> tag which is filled with the BD.
What I want to do is that when selecting the desired option, that the <select> values are assigned to different <input> tags.
Currently I select some of the options, I get the value and the text of the option. I want to have them as 2 different options.
In my example I have this <select>
<option value = "1"> Pizza1 Pizza2 </ option>
My question is how to separate the text of the option so that Pizza 1 is in one option and Pizza2 is in a different option.
So that something like this:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1 Pizza2</option>
<option value="2">Hamburger1 Hamburger2</option>
<option value="3">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>
Just put them in different option values as follows:
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
I hope I got what you mean. To make them different options, you just have to put them into different option tags, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<select name="choose_food" onchange="showValue(this.value); showValue2(this.options[this.selectedIndex].innerHTML);">
<option value="1">Pizza1</option>
<option value="2">Pizza2</option>
<option value="3">Hamburger1 Hamburger2</option>
<option value="4">Bacon1 Bacon2</option>
</select>
<br/>
<input type="text" name="food" id="food" value="" />
<br/>
<input type="text" name="food2" id="food2" value="" />
</form
</body>
</html>
<script type="text/javascript">
var showValue = function(x){
document.getElementById('food').value=x;
}
var showValue2 = function(x){
document.getElementById('food2').value=x;
}
</script>

Edit jquery editable select

I need a little help for this script. It is a jQuery Plugin that converts a select into an text field with suggestions. When I use it in a form it submits the text not the value.
How can I use get the value of options not the text?
Example:
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>
It should send "000" not "zero", and results in domian.com/page.php?data=000 not domian.com/page.php?data=zero.
UPDATE:
Another way in order to get the value you are looking for is:
$('#basic').siblings('.es-list').find('li.selected').data('value')
For the text instead you can use:
$('#basic').siblings('.es-list').find('li.selected').text()
Old answer:
The plugin jquery-editable-select exposes an event called "onSelect".
So you need to attach an event handler for this event and listen for the form submit:
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="./jquery-editable-select-master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="./jquery-editable-select-master/dist/jquery-editable-select.min.js"></script>
<script type="text/javascript">
$(function () {
$('#basic').editableSelect();
});
function abc(){
var basic_text = document.getElementById('basic').value;
var basic_value = $('#basic').siblings('.es-list').find('li.selected').attr('value');
console.log(basic_text);
console.log(basic_value);
}
</script>
</head>
<body>
<form method="post" id="form_id" action="">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" onclick="abc();">Submit</button>
</form>
</body>
</html>

Html select using select to change the link of a button with Javascript

I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>
You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>
I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>

Unable to add the value from dropdown list to end of url

I'm having trouble trying to add the value part of the dropdown list to the end of my url as each value is different for the dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
change(val) {
document.staff1.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You are missing the function keyword. Also you need to call the function change() on onchange event. Do it like this:
<script type="text/javascript">
function change(th) { //Added function keyword
document.getElementById("StaffName").action="http://tl28serv/task7.php?staffID=" + th.value;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onchange="change(this)"> <!--Called change() here-->
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
Demo. Check console.
If you want to handle changed uri on server side and do nothing with it on client side, you don't have to do anything. just send data to server.
If you use GET method, your id appears on uri string.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="get">
<select id="staffID">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
first of all you are trying to set action on select box, that is not correct, you have to set action on form. I think this should work.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
function change(val) {
document.StaffName.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onSelect="change(this.value)">
<option value="12" >Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You don't need JavaScript to achieve this.
Here is how you do it with HTML
Change your form method to GET, instead of POST.
Change form action to http://tl28serv/task7.php
Add name attribute to select, with value staffID
Of course, there exists a Javascript solution as well.
Here is how you achieve it:
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
// move script
<script type="text/javascript">
var staff = document.getElementById('staff1');
// attach "change" EventListener to #staff1
staff.addEventListener('change', function() {
document.getElementById('StaffName').action="http://tl28serv/task7.php?staffID=" + this.value;
});
</script>
</body>

Append select data to URL using jQuery

I am having problems trying to add a parameter to a URL using jQuery based off of the value of a Select element. Here is my code so far:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" class="hidden"/>
</fieldset>
</form>
For some reason no matter which option I select, the URL will become process.php?state=Select. What I need it to do is become process.php?state=TX or whatever option the user selects.
Any help is greatly appreciated!
You need to update the value of the hidden input:
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
example here: http://jsfiddle.net/wKvLm/1/show/
Also... with your current code there is no need to create that input via JS. you could defined it within your HTML like this:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
$('[name=state]').val($('#sel-1').val());
$(this).closest("form").submit();
});
});
</script>
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="hidden" name="state" value="Select"/>
<input type="submit" class="hidden"/>
</fieldset>
</form>​
working example here: http://jsfiddle.net/wKvLm/2/show/
This is occurring because it gets the value on page load.
Try:
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
if ($("#sel-1").val() != "Select") {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
}
});
});
</script>
try this.
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#sel-1").change(function() {
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
$(this).closest("form").submit();
});
});
</script>
You should set variable data in the on change event.
What we are doing here is adding the a new input hidden field with the drop the value when the drop-down is changed. Then appending the input field and submit the form.
A simple way will be to use jQuery's serialize method:
<form action="process.php" class="start-form">
<fieldset>
<div class="row">
<label for="sel-1">Select <strong>State</strong></label>
<select id="sel-1">
<option value="Select">Select</option>
<option value="AK">AK</option>
<option value="CA">CA</option>
<option value="TX">TX</option>
</select>
</div>
<input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
</fieldset>
</form>

Categories