Sélectionne l'action de formulaire à ouvrir

Question

J'ai un formulaire qui commence par un select. Basé sur le choix de ce premier choix (quel rapport est choisi) je dois changer le chemin d'action duquel .cfm le formulaire soumet à. Quelqu'un peut-il m'aider s'il vous plaît comment je devrais faire cela? Je suis ouvert à toute manière appropriée que ce soit HTML, ColdFusion ou jQuery (Javascript).

commence donc avec une sélection:

<select class="form-control" id="reporttype" name="reporttype"> 
       <option value="" selected="selected">Select Report</option> 
       <option id ="checklistreports" value="checklistreports" >Checklist Stats</option> 
       <option id ="locationreports" value="locationreports" >Location Stats</option> 
      </select> 

Si #checklistreports est choisi le formulaire doit être

<form name="generatereport" method="post" action="_checklists_queries.cfm">

Mais si #locationreports est choisi la forme doit être

<form name="generatereport" method="post" action="_location_queries.cfm">

Any aider avec ceci serait grandement apprécié.

J'essayais de faire dans l'instruction IF dans CF mais il m'a malheureusement bloqué sans résultat.

Answer 1

Vous pouvez utiliser un gestionnaire .change pour modifier l'attribut action du formulaire.

$("#reporttype").change(function() { 
    if ($(this).val() == "checklistreports") { 
     $("form[name=generatereport]").attr("action", "_checklists_queries.cfm"); 
    } else { 
     $("form[name=generaterport]").attr("action", "_location_queries.cfm"); 
    } 
}); 

Answer 2

Je recommande d'indiquer simplement les valeurs d'action du formulaire dans les valeurs des options.

$('#reporttype').change(function(){ 
 
    form_action = $(this).val(); 
 
    $('form').attr('action', form_action); 
 
    $('span').text(form_action); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="reporttype" name="reporttype"> 
 
     <option value="" selected="selected">Select Report</option> 
 
     <option value="_checklists_queries.cfm" >Checklist Stats</option> 
 
     <option value="_location_queries.cfm" >Location Stats</option> 
 
    </select> 
 
    
 
<form name="generatereport" method="POST" action="#"> 
 
    <p>This forms action value is <span>#</span></p> 
 
</form>

Answer 3

Vous pouvez toujours faire tout cela avec ColdFusion. C'est tellement plus simple. Voici une approche.

formPage 
<form action = "action.cfm" method="post"> 
<select name="pageToInclude"> 
<option value="locationQueries.cfm">Location</option> 
rest of form. 

action.cfm 
<cfinclude template = "#form.pageToInclude#"> 

Answer 4

Si les formes contient différents éléments, vous pouvez cacher les formes avec css et avec un gestionnaire onchange sur la sélection unhide la bonne forme.

html:

<select class="form-control" id="reporttype" name="reporttype"> 
    <option value="" selected="selected">Select Report</option> 
    <option value="checklistreports" >Checklist Stats</option> 
    <option value="locationreports" >Location Stats</option> 
</select> 

<form method="post" action="_location_queries.cfm" id="locationreports" style="display: none;"> 
    <input type="text" name="location" placeholder="location"> 
</form> 
<form method="post" action="_checklists_queries.cfm" id="checklistreports" style="display: none;"> 
    <input type="text" name="location" placeholder="checklist"> 
</form> 

js:

var locationReport = document.getElementById("locationreports"); 
var checklistReport = document.getElementById("checklistreports"); 

function onChangeForm(e) { 
    if (e.target.value === "locationreports") { 
    locationReport.style.display = "block"; 
    checklistReport.style.display = 'none'; 
    } else { 
    checklistReport.style.display = "block"; 
    locationReport.style.display = "none"; 
    } 
} 
document.getElementById("reporttype").onchange = onChangeForm; 

jsfiddle example

Answer 5

Vous avez déjà une réponse acceptée, mais je voudrais proposer une solution un peu plus propre à la réponse que vous avez sélectionné, ainsi qu'une alternative:

Option 1 (en-ligne et propre):

// Cache the selector for better reuse. 
var form = $("form[name=generatereport]"); 

$("#reporttype").change(function() { 
    var action = $(this).val() === 'checklistreports' ? '_checklists_queries.cfm' : '_location_queries.cfm'; 
    form.attr('action', action); 
}); 

L'option ci-dessus est juste une version plus compacte de la réponse que vous avez sélectionné, mais utilise la mise en cache de sélection, ce qui est bon pour la performance.

Option # 2 (Config 'Global' Options):

// Cache the selector 
var form = $('form[name=generatereport]'); 

// Now you can define the variable states for your app. 
var config = { 
    checklistreports: { 
     action: '_checklists_queries.cfm' 
    }, 
    locationreports: { 
     action: '_location_queries.cfm' 
    } 
}; 

// Updating is trivial 
$('#reporttype').change(function() { 
    var selected = $(this).val(); 
    form.attr('action', config[selected].action); 
}); 

Cette option est intéressante car elle vous permet de définir tous les différents "états" pour vos composants en un seul endroit, ce qui est agréable pour la lisibilité et la maintenance, et rend la mise à jour réelle des composants aussi simple que de rechercher les valeurs qu'elle devrait avoir.