i have a form on my site to generate url and it works well but the user should wait until the whole page is loaded to be able to use it properly , i think that happens because i use window.onload and i should use $(document).ready instead of it , but i couldnt replace it i need someone to help me with it
<script type='text/javascript'>
window.onload = function() {
document.forms['filterform'].onsubmit = filterLoad;
};
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = ( colourSel.options[colourSel.selectedIndex].value ) + ( shapeSel.options[shapeSel.selectedIndex].value );
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform">
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" onclick="filterLoad()" /></button></label>
</form>
I'd get rid of all the extra javascript to assign the function and just use:
<form id="searchform" name="filterform" onsubmit="filterLoad">
You have the right idea, I would just call that function though when the form is submitted, and remove the on click event from the submit button.
Try this :
<script type='text/javascript'>
function filterLoad() {
var url,
colourSel = this.elements['department'],
shapeSel = this.elements['country'];
url = (colourSel.options[colourSel.selectedIndex].value) + (shapeSel.options[shapeSel.selectedIndex].value);
window.location.href = url;
return false;
}
</script>
<form id="searchform" name="filterform" onSubmit="return filterLoad();" >
<select class="chosen" name="department" id="searchfield" >
<option value="http://www.mysite.com/">choise 1</option>
<option value="http://www.mysite.com/">choise 1</option>
</select>
<select class="chosen" name="country" id="choose">
<option value="?qatar=show&action=Filter">qatar</option>
<option value="?ksa=show&action=Filter">ksa</option>
</select>
<label for="search"><button class="submit" /></button></label>
</form>
Related
Even though I select data in the select box, it does not change inside the select box form. It works after deleting the form, but I can't access it while the form exists.
html code:
<form id="selectFormLanguage" action="" class="language-picker__form">
<label id="labelSelectData" for="language-picker-select">Select your language</label>
<select onchange="getval(this);" name="language-picker-select" id="language-picker-select">
<option lang="en-US" value="english">English</option>
<option lang="fr-FR" value="francais">Français</option>
<option lang="tr-TR" value="turkey">Türkçe</option>
</select>
</form>
JS codes:
$('#language-picker-select').find('option').click(function() {
var optionSelected = $(this);
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
console.log('dasdasdas')
});
You must create the getval function, and then call it.
const getval = ()=>{
var selectedText = $('#language-picker-select').find(":selected").val();
console.log(selectedText);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="selectFormLanguage" action="" class="language-picker__form">
<label id="labelSelectData" for="language-picker-select">Select your language</label>
<select onchange="getval();" name="language-picker-select" id="language-picker-select">
<option lang="en-US" value="english">English</option>
<option lang="fr-FR" value="francais">Français</option>
<option lang="tr-TR" value="turkey">Türkçe</option>
</select>
</form>
I have the following select with a submit button.
I would really like for the option selected to redirect to my route without me needing to press a submit button, so I could get rid of it.
<form action="{{ url_for("perfumes.filters") }}" class="search-form">
<div class="form-group">
<label for="exampleFormControlSelect1">Filter by Type</label>
<select class="form-control" id="filter_query" name="filter_query" onchange="checkSelected()">
<option selected='true' name="" value="" id="">Please select a type</option>
{% for type in types %}
<option value="{{type['type_name']}}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>
{% endfor %}
<option value="{{ url_for('types.new_type') }}">Create new type...</option>
</select><br>
<button class="btn btn-primary btn-sm" type="submit">Submit</button>
</div>
</form>
The last option (Create New Type) is already redirecting to its corresponding route with this function.
function checkSelected() {
const selected = document.getElementById("filter_query");
const option = selected.options[selected.options.length - 1];
if (option.selected == true) {
window.location = option.value;
}
}
What would be the best way to adapt that function so I can suppress the "Submit" button and have the redirect automatically triggered on selection?
UPDATE:
This is all now working well, but I get a console error when the option outside the loop gets selected
<form id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
<div class="form-group">
<label for="exampleFormControlSelect1">Filter by Type</label>
<select class="form-control" id="filter_query" name="filter_query">
<option selected='true' name="" value="" id="">Please select a type</option>
{% for type in types %}
<option value="{{ url_for('perfumes.filters', filter_query=type['type_name']) }}">{{type['type_name']}}</option>
{% endfor %}
<option value="{{ url_for('types.new_type') }}">Create new type...</option>
</select><br>
<button class="btn btn-primary btn-sm" type="submit">Submit</button>
</div>
</form>
And the script:
function checkSelected() {
if (this.value) window.location = this.value;
}
const EL_select = document.querySelector("#filter_query");
EL_select.addEventListener("change", checkSelected);
If I got your question correctly, you want to:
Last option (having a value of i.e: "some/route") should navigate to that route
All other options (which value is not empty) should submit the form immediately
If so than this might help:
function checkSelected() {
if (this.value === "some/route") return (window.location = this.value);
if (this.value) this.form.submit();
}
const EL_select = document.querySelector("#filter_query");
if (EL_select) EL_select.addEventListener("change", checkSelected);
<form>
<select class="form-control" id="filter_query" name="filter_query">
<option selected value="">Please select a type</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="etc">etc</option>
<option value="xxx">Create new type...</option>
</select>
</form>
PS:
Stop using inline JS (onchange="checkSelected()")
SELECT should have the name attribute, not OPTION elements
You can invoke submit() method programmatically when option change.
const form = document.querySelector("form");
const select = document.querySelector("select");
select.addEventListener("change", (event) => {
const value = event.target.value;
console.log(value);
form.submit();
})
<form id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
<select name="filter_query" id="select">
<option>Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<select>
</form>
I assume that you want to redirected to some /filte_selected/<id> type of URL, on selecting an option.
You can do the following change for option tag:
<option value="{{ url_for('filter_selected', id=type['type_name']) }}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>
You can change your scrip to:
<script>
function checkSelected() {
var selectedValue = document.querySelector('#options').value
if (selectedValue) {
window.location = selectedValue;
}
}
</script>
You can actually pull the selected value directly off of the select element. Then, simply redirect users to that value.
function checkSelected() {
const value = document.querySelector("#select-id").value;
console.log(value);
// window.location = value;
}
<select id="select-id" onchange="checkSelected()">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
</select>
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
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>
Need form to change it's action depending on the selection from a specific drop down menu.
On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!
Javascript:
<script type="application/javascript">
function chgAction(form1){
if( recipient=="jordachedotcom_Advertising" )
{document.form1.action = "/adv_contact.php";}
else if( recipient=="dept_Public_Relations" )
{document.form1.action = "/pr_contact.php";}
else if( recipient=="dept_Manufacturing" )
{document.form1.action = "/manuf_contact.php";}
else if( recipient=="dept_Brands" )
{document.form1.action = "/brands_contact.php";}
else if( recipient=="dept_Holdings" )
{document.form1.action = "/holdings_contact.php";}
else if( recipient=="dept_Vendor_Inquiry" )
{document.form1.action = "/vend_contact.php";}
else if( recipient=="dept_Other_Inquiry" )
{document.form1.action = "/misc_contact.php";}
}
</script>
FORM HTML:
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
Your code is missing the part to get the selected item from the selectbox.
document.form1.recipient.selectedIndex
The rest should be ok and i have created a Fiddle
I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:
client-side (html)
(note how the action property of the form is one fixed location)
<form id="form1" name="form1" method="post" action="./form-handler.php">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1">
<option value="" selected="selected">Select</option>
<option value="dept_Advertising">Advertising</option>
<option value="dept_Public_Relations">Public Relations</option>
<option value="dept_Manufacturing">Manufacturing</option>
<option value="dept_Brands">Brands</option>
<option value="dept_Holdings">Holdings</option>
<option value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option value="dept_Other_Inquiry">Other Inquiry</option>
<select>
<input type="submit">
</form>
No javascript required!
server-side (php)
form-hander.php:
<?php
$recipient = $_POST['recipient'];
//Based on the value of the $recipient value redirect to the correct page
//using the header function
switch($recipient) {
case 'dept_Manufacturing':
header('Location: ./manuf_contact.php'); exit;
case 'dept_Brands':
header('Location: ./brands_contact.php'); exit;
case 'dept_Holdings':
header('Location: ./holdings_contact.php'); exit;
//... etc, etc
}
On your on change function, you can obtain your currently selected element using:-
var currentValue = $("#recipient option:selected").val();
And then apply these if checks as you specified on this currentValue var as shown below:-
if(currentValue == "dept_advertising"){
$("#form1").attr("action",customURL);
}
Try this
<form id="form1" name="form1" method="post" action="/">
Please choose a dept:<br/>
<select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()">
<option value="" selected="selected">Select</option>
<option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option>
<option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option>
<option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option>
<option data-action="/brands_contact.php" value="dept_Brands">Brands</option>
<option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option>
<option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option>
<option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option>
</select>
<input type="submit">
</form>
<script>
function chgAction(){
$('#form1').attr({'action':$('option:selected').attr('data-action')});
$('#form1').submit();
}
</script>
You could also just use the actual form action URLs as the option values and use a simple one line onchange attribute without any additional JS:
<form method="post" name="form1">
<select id="form_action" name="form_action" onchange="document.form1.action = this.value;">
<option value="https://url1.com">URL1</option>
<option value="https://url2.com">URL2</option>
</select>
</form>
Tested and working in Firefox. May possibly benefit from some measures to make it more cross-browser compatible.
Replace:
function chgAction(form1){...}
in
chgAction = function(form1) {....}
Code will work but it is not the ultimate dream. Better to use something like that:
(function(){
var form = document.querySelector('#form1'),
select = form.querySelector('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.addEventListener('change', function () {
var el = this, value = el.value;
if (action[value]) {
form.action = action[value];
}
}, false);}());
Like jQuery:
(function($){
var form = $('#form1'),
select = $('#recipient'),
action = {
'jordachedotcom_Advertising': '/adv_contact.php',
'dept_Public_Relations': '/pr_contact.php',
'dept_Manufacturing': '/manuf_contact.php',
'dept_Brands': '/brands_contact.php',
'dept_Holdings': '/holdings_contact.php',
'dept_Vendor_Inquiry': '/vend_contact.php',
'dept_Other_Inquiry': '/misc_contact.php'
};
select.on('change', function () {
var el = $(this), value = el.val();
if (action[value]) {
form.attr('action', action[value]);
}
});}(jQuery));