I am using ddslick. Is it possible on change to submit form ?
My code:
<form method="post" class="town_form">
<select name="town" id="select_town">
<option value="83">Chicago</option>
<option value="112">New York</option>
</select>
</form>
<script>
$('#select_town').ddslick({
onSelected: function(selectedData){
$('.town_form').submit();
}
});
</script>
But its not working ... any help ?
$('#select_town').dblclick(function() {
onSelected: function(data){
if (data.selectedIndex > 0) {
$('form.town_form').submit();
}
}
});
Related
I am trying to figure out a way to have a form submit to a different page.php depending on the selection made.
The code below works in redirecting, however its not posting the information over to the next page.
Form
<form id="form1" method="post" action="javascript:redirect();">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
Javascript:
function redirect() {
var Value = document.getElementById("man").value;
if(Value == 0)
{
location.href = "page2.php";
}
else
{
location.href = "page3.php";
}
}
This is a variant I normally use for this cases. I think it's better than redirecting via JS:
HTML:
<form id="form1" method="post">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
JS:
form1 = document.getElementById("form1");
form1.onsubmit = formSubmit;
function formSubmit() {
var manValue = document.getElementById("man").value;
if (manValue == 0) {
form1.action = "page2.php";
} else {
form1.action = "page3.php";
}
}
You just modify the form's action depending on which option was selected. Hope it helped.
Okay I sorted this one out. Changed the code to:
<form action="" method="post" onsubmit="return send(this);">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
<script type="text/javascript">
function send( frm ) {
if ( frm.man.value == "0" )
frm.action = "page2.php";
else
frm.action = "page3.php";
}
</script>
I have a problem with a jQuery,the problem is when i do the submit, when i press the button, the website dosen't stay on the same html page but switch to the "insert.php" page, to avoid that in the script, as you can see I put a return false "$("#myForm").submit(function(){ return false;});" but that does not work.
Here it is the html form:
<form id="myForm" action="insert.php" method="post">
PERSONE:
<select id="persona" name="perselect">
<!-- these option come from the database by a jquery -->
<option value=""></option>
</select>
<br>
AUTO:
<select id="auto" name="autselect">
<!-- these option come from the database by a jquery -->
<option value=""></option>
</select>
<br><br>
INIZIO:<br>
Ora:
<select id="oraInizio" name="oraInizio">
<option value="00">00</option>
<!-- all the hours -->
<option value="23">23</option>
</select>
<br>
Minuto:
<select id="minutoInizio" name="minutoInizio">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<br>
Data:
<input type="Date" name="dataInizio"/><br>
<br><br>
FINE:<br>
Ora:
<select id="oraFine" name="oraFine">
<option value="00">00</option>
<!-- all the hours -->
<option value="23">23</option>
</select>
<br>
Minuto:
<select id="minutoFine" name="minutoFine">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<br>
Data:
<input type="Date" name="dataFine"/><br>
<br><br>
Note:<br>
<input type="text" name="note"><br>
<button id="sub">salva</button>
<!--<input type="submit"/>-->
<span id="result"></span>
And This is the script code:
$(document).ready(function(){
fetchData();
});
$("#sub").click(function(){
var data = $("#myForm :input").serializeArray();
$.post( $("#myForm").attr("action"), data, function(info){
$("#result").html(info); });
});
$("#myForm").submit(function(){
return false;
});
function fetchData()
{
var personeOp;
$.getJSON("fetchPersona.php", function(data){
$.each(data.result, function(i,persona){
personeOp +="<option value='"
+persona.id+
"'>"
+persona.nome+" "+persona.cognome+
"</option>";
});
$('#persona').html(personeOp);
});
var autoOp;
$.getJSON("fetchAuto.php", function(data){
$.each(data.result, function(i,auto){
autoOp +="<option value='"
+auto.id+
"'>"
+auto.nome+
"</option>";
});
$('#auto').html(autoOp);
});
}
You are defining the submit handler inside a click handler, so it won't start listening for submit events until you've clicked once.
If you move this code:
$("#myForm").submit(function(){
return false;
});
...outside of the click handler, it should work.
I'd also recommend a slight change to how you do it:
$("#myForm").submit(function(e){
e.preventDefault();
});
Copy the callback function for the click in the callback function for the submit and add a preventDefault on event on the submit callback. Also, try to format your code before posting:
$("#myForm").submit(function(e){
e.preventDefault();
var data = $("#myForm :input").serializeArray();
$.post( $(this).attr("action"), data, function(info){
$("#result").html(info);
});
});
Hi I have a small question.
I have 2 select form , and i want when i choose rental the employed type become hidden and here's my code :
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
$(function() {
var select = $('#Type-option');
select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
});
any idea ?
Few suggestions here
1. Never mix your mark up with your javascript.Consider binding events at javascript
2. I have modified your markup a bit,because when you hide employeetype u need to hide the label too
check the following snippet
$(document).ready(function(){
var select = $('#Type-option');
var employeeTypeOption=$('#employedType-option');
var employedType=$('#employedType');
select.on('change', function() {
var selectOption=select.find('option:selected').val();
if (selectOption == "rental") {
employeeTypeOption.hide();
employedType.hide();
} else {
employeeTypeOption.show();
employedType.show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
</span>
Hope this helps
wrong syntax.
check $(document).on.('action','selection',function(){}); signature.
Tyr with below code
$(document).on('change','#Type-option', function() {
if ($(this).val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
I am not sure but i guess you have missed one of these otherwise your code is working fine
Add reference to jquery library
Wrap your jquery code inside script tag.
<script>
$(function() {
var select = $('#Type-option'); select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
}
else {
$('#employedType-option').show();
}
});
});
</script>
I think this is what you want. try the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label id="emp">Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
<script type="text/javascript">
$("#Type-option").on('change',function(){
var theVal = $(this).val();//get the selected value
if(theVal == "rental"){
$("#emp").hide();
$("#employedType-option").hide()
}
else{
$("#emp").show();
$("#employedType-option").show()
}
})
</script>
</body>
</html>
I have a form, like this:
<form action="" method="get">
<select>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>
and I want to enable the href only if the option value is not "-".
Can you help me, please?
Thanks,
Here is your code:
checkSelect = function ()
{
var mySelect = document.getElementById("mySelect");
return mySelect.options[mySelect.selectedIndex].text !== "-";
}
<form action="" method="get">
<select id="mySelect">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>
What you want is to add an onChange event to the select, And then when the change function is called you can do a check to see whether you would like to change your page with this value, See code below for example
<form action="" method="get">
<select onchange="getValue(this);">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
</form>
<script>
function onChange(sel){
if(sel.value != "-"){
document.location.href = newUrl;
}
}
</script>
It should look like this with the onChange event, +1 to david
<form action="" method="get">
<select id="sel" onchange="myFunction()">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id="link">New Page</a>
then myFunction should look like this
if(document.getElementById("sel").value != "-"){
document.getElementById("link").href = "your link here";
}
else{
document.getElementById("link").href = "#";
}
Here is working code
$(function() {
$("select").change(function() {
if ($("select option:selected").val() != "0") {
$("a").attr("onclick", "javascript:return true;")
} else {
$("a").attr("onclick", "javascript:return false;")
}
})
})
Here is JSFiddle code
function changeHref() {
console.log(this.value)
if (this.value == 0) {
document.getElementById("anc").href="";
} else {
document.getElementById("anc").href="page6.html";
}
}
var select = document.getElementById('sel');
select.addEventListener('change', changeHref, false);
<form action="" method="get">
<select id='sel'>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id='anc' href="" onclick="return false;">New Page</a>
</form>
i use a form such as this:
<form id="clac" action="#" method="post">
<select onchange="func_type()" name="t_person" id="t_person" class="t_person_class">
<option value="0" selected>select persons</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">three</option>
</select>
<input id="t_person_name1"><br/>
<input id="t_person_name2"><br/>
<input id="t_person_name3"><br/>
<input type="submit" value="okGo">
</form>
and use script such this for display some input fields when select an option:
<script type="text/javascript">
$(document).ready(function(){
$('#t_person_name1').hide();
$('#t_person_name2').hide();
$('#t_person_name3').hide();
$.viewMap = {
'0' : $([]),
'1' : $('#t_person_name1'),
'2' : $('#t_person_name1,#t_person_name2'),
'3' : $('#t_person_name1,#t_person_name2,#t_person_name3')
};
$('#t_person').change(function() {
// hide all
$.each($.viewMap, function() {
this.hide('500');
});
// show current
$.viewMap[$(this).val()].show('500');
});
})
</script>
in works fine, but how when a field display, then this field is required?
Try something like this:
Instead:
$.each($.viewMap, function() {
this.hide('500');
});
$.viewMap[$(this).val()].show('500');
do:
$.each($.viewMap, function() {
this.hide('500').prop('required',false);
});
$.viewMap[$(this).val()].show('500').prop('required',true);
View on jsFiddle