Append select data to URL using jQuery - javascript

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>

Related

How to remove the lag in the livesearch box created using bootstrap and jquery

this is my code for HTML
<form class="form-horizontal" action="#" method="get">
<div class="form-group">
<select id="basic2" onchange="location=this.value;" class="show-tick form-control" multiple>
<optgroup label="Popular Cities">
<option selected style="display:none;color:#eee;">Select City</option>
<option>UP</option>
<option>Anchorage</option>
<option>Phoenix</option>
<option>Little Rock</option>
</optgroup>
</select>
</div>
</form>
Jquery
I want to add a timeout function here to delay the search. how and where to add that function please help!!
$(document).ready(function() {
var mySelect = $('#first-disabled2');
$('#special').on('click', function() {
mySelect.find('option:selected').prop('disabled', true);
mySelect.selectpicker('refresh');
});
$('#special2').on('click', function() {
mySelect.find('option:disabled').prop('disabled', false);
mySelect.selectpicker('refresh');
});
$('#basic2').selectpicker({
liveSearch: true,
maxOptions: 1
});
});

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>

Making a div hidden and visible according to the chosen option under select tag

My code don't seem to work.
So i have a div like this:
<div class="abc">
<form>
**some input tags**
then this:
<select>
<option value="" onclick="myfx1()">yes</option>
<option value="" onclick="myfx2()">no</option></select>
And this is my js code:
<script type="text/javascript">
function myfx1(){
document.getElementById("hid").style.visibility="hidden";
}
function myfx2(){
document.getElementById("hid").style.visibility="visible";
}
</script>
***************and below is the div that has to appear when no is selected**********************
<div id="hid">
<select>
**some options**
</select>
<font>
**some text**
</font>
**some more textarea and input tags**
</div>
**end of the div**
then it ends with a button:
<input type="button" style="float:right" value="Go">
</div></form>

<select onchange='myfx1(this.value)'>
<option value="1" >yes</option>
<option value="0" >no</option></select>
<script type="text/javascript">
function myfx1(value){
if(value==1) {
document.getElementById("hid").style.visibility="hidden";
}else {
document.getElementById("hid").style.visibility="visible";
}
}</script>

HTML
<select name='options' id="select">
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<div id="hid">
Test
</div>
JS
var elem = document.getElementById("hid");
document.getElementById('select').addEventListener('change', function(){
if(this.value == 'yes'){
elem.style.visibility="visible";
}else{
elem.style.visibility="hidden";
}
})

$("#YourSelectBoxID").change(function(){
if($(this).val() == "YourDesiredConditionForCheckWhichValueIsSelected") {
$(".abc").hide();
} else {
$(".abc").show();
}
});

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