2012-04-17 2 views
1

Я пытаюсь выяснить способ иметь несколько ссылок и 1 всплывающее окно FancyBox. Когда пользователь нажимает на одну из стран, я бы хотел, чтобы страна была выбрана в моем выпадающем меню. Все работает отлично, но я не могу понять, как выбрать значение в раскрывающемся списке. Кто-нибудь может мне с этим помочь? Заранее спасибо :).Single FancyBox форма с несколькими ссылками

<script type="text/javascript"> 
jQuery(document).ready(function() { 

$("a.country-form").fancybox({ 
     'scrolling' : 'no', 
       'titleShow' : false, 
       'onClosed' : function() { 
      $("#country_error").hide(); 
     }  
    }); 

    $("#country_form").bind("submit", function() { 

     if ($("#country_country").val() == 0) { 
      $("#country_error").show(); 
      $.fancybox.resize(); 
      return false; 
     } 

     $.fancybox.showActivity(); 

     $.ajax({ 
      type : "POST", 
      cache : false, 
      url  : "process.php", 
      data : $("#country_form").serializeArray(), 
      success: function(data) { 
       $.fancybox(data); 
      } 
     }); 

     return false; 
    }); 
} 
</script> 

<a class="country-form" href="#country_form" >Submit textbook (Canada)</a> 
<a class="country-form" href="#country_form" >Submit textbook (United States)</a> 
<a class="country-form" href="#country_form" >Submit textbook (United Kingdom)</a> 

<div style="display:none"> 
<form id="country_form" name="country_form" method="post" action=""> 
<p id="country_error">* There was a problem with your submission.</p> 
<h1>Submit textbook in (COUNTRY HERE)</h1> 
<label for="country">Country: </label> 
<select name="country" id="country_country"> 
<option value="0">Country...</option> 
<option value=1>Canada</option> 
<option value=2>United States</option> 
<option value=3>United Kingdom</option> 
</div> 

ответ

2

набор атрибутов отн по ссылке

<a class="country-form" rel='1' href="#country_form" >Submit textbook (Canada)</a> 
<a class="country-form" rel='2' href="#country_form" >Submit textbook (United States)</a> 
<a class="country-form" rel='3' href="#country_form" >Submit textbook (United Kingdom)</a> 

Тогда попробуйте

$("a.country-form").fancybox({ 
     'scrolling' : 'no', 
     'onStart' : function(){ 
       $("#country_country").val($(this).attr('rel')); 
      }, 
       'titleShow' : false, 
       'onClosed' : function() { 
      $("#country_error").hide(); 
     }  
    }); 
+0

Ровно. Вы избили меня, @ crazyphoton. Вы также можете использовать 'id' вместо' rel'. Я также изменил бы выпадающие значения выбора на что-то значимое, например 'ca',' us' и 'uk', вместо 1, 2 и 3. –

+0

да, id также будет работать нормально! Но тогда его плохая идея установить id на 1,2 и 3. Таким образом, это должно быть что-то вроде id = "country-form-link-1", id = "country-form-link-2" и т. Д., Что означает вам нужно разобрать его, чтобы получить 1,2 и 3. rel казался более простым :) и да, c us uk может быть проще, если база данных не использует числа в качестве внешних ключей. – crazyphoton

+1

Все хорошие моменты, @crazyphoton. Есть и другой вариант, который может быть лучше, чем любая из этих идей: использование jQuery.data. Конечно, это потребует дополнительного шага по настройке соответствующих данных на трех якорях, но на самом деле это может быть хорошо. Во всяком случае, приятное решение! –

Смежные вопросы