1
여러 개의 링크와 1 개의 팝업 상자 FancyBox를 만드는 방법을 알아 내려고합니다. 사용자가 국가 중 하나를 클릭하면 내 드롭 다운 메뉴에서 해당 국가를 선택하고 싶습니다. 드롭 다운에서 값을 선택하는 방법을 알아낼 수 없다는 것을 제외하면 모든 것이 잘 작동합니다. 아무도 이것으로 나를 도울 수 있습니까? 미리 감사드립니다 :). 링크여러 개의 링크가있는 단일 FancyBox 양식
<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>
에
<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>
보십시오. 당신은 저를 때려 눕 혔습니다, @crazyphoton. 'rel' 대신에'id'를 사용할 수도 있습니다. 또한 선택 드롭 다운 값을 1, 2 및 3 대신에'ca','us' 및'uk'와 같은 의미있는 값으로 변경합니다. –
예, id도 잘 작동합니다! 그러나 id를 1,2,3로 설정하는 것은 나쁜 생각입니다. 따라서 id = "country-form-link-1", id = "country-form-link-2"등과 같은 것이어야합니다. rel을 더 쉽게 보일 수 있도록 해석해야합니다. :) 예, 데이터베이스가 외래 키로 숫자를 사용하지 않는 한 ca us는 더 쉽습니다. – crazyphoton
좋은 점, @crazyphoton. jQuery.data를 사용하는 것보다 더 좋은 아이디어도 있습니다. 물론 3 가지 앵커에 적절한 데이터를 설정하는 추가 단계가 필요하지만 실제로는 좋은 방법 일 수 있습니다. 어쨌든, 좋은 해결책! –