드롭 다운 선택에 따라 양식 동작 변경

Question

특정 드롭 다운 메뉴에서 선택한 항목에 따라 동작을 변경하려면 양식이 필요합니다. 변경시 사용자가 제출하기 전에 스크립트를 실행하고 동작을 변경해야합니다. 당신이 JS에 처음 왔을 때보다 쉽게 ​​말했습니다. 어떤 도움을 주셔서 감사합니다!

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> 

Answer 1

귀하의 코드가 선택 박스에서 선택한 항목을 얻을 수있는 부분이 없습니다.

document.form1.recipient.selectedIndex 

나머지는 확인을해야하고 나는 Fiddle

Answer 2

나는 당신의 전체 의도로 추측하고있어,하지만 난 가장 좋은 방법은 서버 측에서 PHP를 통해 것 여기에서 무슨 일을하는지 달성하는 것이라고 생각합니다. 양식을 특정 페이지로 직접 연결 한 다음 서버 측 언어를 사용하여 적절한 URL로 리디렉션하십시오.

클라이언트 측 (HTML)

(양식의 액션 속성은 하나 개의 고정 위치가 얼마나 주)

<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> 

번호 : 당신이 PHP를 사용하는 경우 예를 들어, 같은 것을 할 자바 스크립트가 필요합니다!

서버 측 (PHP)

폼 hander.php : 이

chgAction = function(form1) {....} 

이

코드가 작동

function chgAction(form1){...} 

에 있지만은 다음과 같습니다

<?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 
} 

Answer 3

은 교체 궁극적 인 꿈이 아닙니다. 그런를보다 효율적으로 사용하는 것을 무언가 : jQuery를 같이

(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);}()); 

: 변경 기능에, 당신은 사용하여 현재 선택한 요소를 얻을 수 있습니다에

(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)); 

Answer 4

: -

VAR CurrentValue에 = $ (" #recipient option : selected "). val(); 이 CurrentValue에 var에에 지정된대로 아래와 같이

그리고 확인하면 다음을 적용 : -

if(currentValue == "dept_advertising"){ 
$("#form1").attr("action",customURL); 
} 

Answer 5

이는 일이

<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>