Edit jquery editable select - javascript

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>

Related

How to save chosen Jquery selected options at same page even stay at same place after refresh the pagea

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<form method="POST" name="" action="">
<select class="chzn-select" multiple="true" name="time" style="width:300px;" id="rememberSelected">
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="30:30">03:00</option>
<option value="04:30">04:30</option>
<option value="05:00">04:30</option>
</select>
<button type="button">Save</button>
</form>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<script>
$("#rememberSelected").val(localStorage.getItem("selected") || 1);
$("#rememberSelected").on("change", function() {
localStorage.setItem("selected", $(this).val());
});
</script>
</body>
</html>
how to save selected options at same place after click on the save button using chosen jquery even if I'm refresh the page selected option should stay at same place.
Store the selected option into localStorage and retrieve it upon page load.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
if(!!localStorage.getItem("selected")) {
$("#rememberSelected").val(localStorage.getItem("selected").split(",")).trigger("chosen:updated");
}
$("button").on("click", function() {
localStorage.setItem("selected", $("#rememberSelected").val());
});
You can save your state to localStorage
<script>
if (localStorage['select-state']) {
$( "select" ).val(JSON.parse(localStorage['select-state']));
}
$( "select" ).change(function() {
localStorage['select-state'] = JSON.stringify($(this).val());
});
</script>

How to join several functions in JS?

I need the submit button to be active only if all the fields and filled/selected.
I saw a couple of examples but don’t know how to do it!!
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#matricula').on('change', function ()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#peca').on('change', function ()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#quilometros').keyup(function()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
$(document).ready(function()
{
$('.envia').prop('disabled',true);
$('#data').keyup(function()
{
$('#envia').prop('disabled', !$(this).val());
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="#">
<select id="matricula">
<option></option>
<option value="1">Matricula 1</option>
<option value="2">Matricula 2</option>
</select>
<select id="peca">
<option></option>
<option value="1">Peca 1</option>
<option value="2">Peca 2</option>
</select>
<input type="text" id="quilometros">
<input type="text" id="data">
<input type="submit" id = "envia" value="ok"></input>
</form>
This help you :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
window.onload = fun;
function fun(){
var matr = $("#matricula").val();
var peca = $("#peca").val();
var txt1 = $("#data").val();
var txt2 = $("#quilometros").val();
if(matr.length==0 || peca.length==0||txt1.length==0||txt2.length==0)
$("#envia").prop("disabled",true);
else
$("#envia").prop("disabled",false);
}
</script>
<form action="#">
<select id="matricula" onchange="fun()">
<option></option>
<option value="1">Matricula 1</option>
<option value="2">Matricula 2</option>
</select>
<select id="peca" onchange="fun()">
<option></option>
<option value="1">Peca 1</option>
<option value="2">Peca 2</option>
</select>
<input type="text" id="quilometros" oninput="fun()">
<input type="text" id="data" oninput="fun()">
<input type="submit" id = "envia" value="ok">
</form>
</body>
</html>
The problem you have is you are setting disabled based on individual fields without checking the state of all the others.
you can use one event handler for all but you also need to check all controls each time
$(function(){
// pseudo selector `:input` will match all form controls
var $inputs = $('#form-id :input').on('change input',validate);
function validate(){
var inValid = $inputs.filter(function(){
return !this.value;
}).length;
$('#envia').prop('disabled', inValid );
}
// also call function on page load
validate();
});
Here I'm using filter() to check length of element collection where value is not set

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>

dynamic form with input and select

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>

Categories