[英]Validate Dropdown without form tag
我们提供一个选项供用户选择“品牌和型号” ,然后单击“查看案例”按钮,根据选择的选项,它将重定向到正确的URL。
在这里,如果我们直接点击“查看案例”而不选择“品牌和型号”,而是将其重定向到错误的网址,则我们要在这两个下拉列表中添加验证。 我们在这里没有使用任何表单标签。
<div>
<div>
<select id="brand_select">
<option value="">My Brand</option>
<?php foreach ($brands as $key => $value)
{
?>
<option value="<?php echo $value->getCategoryId();?>"> <?php echo $value->getCategoryName();?></option>
<?php
}
?>
</select>
</div>
<div id="brandmodel">
<select id="model_select">
<option value="">My Model</option>
</select>
</div>
<div>
<div>
<a href="#" onclick="geturlandredirec()"><span> See Cases > </span> </a>
</div>
</div>
<div id="myDivLoader"></div>
<script>
var models = <?php echo json_encode($this->getbrandsArr()) ?>;
jQuery(document).ready(function(){
jQuery( "#brand_select" ).change(function() {
var brandId = jQuery(this).val();
url="<?php echo Mage::getbaseUrl()?>custom-phone-cases/customcase/ajaxBrandmodel";
new Ajax.Request(url, {
method: 'POST',
onLoading: showLoad,
onFailure: function(response){
},
parameters: {
id: brandId
},
onSuccess: function(response)
{
jQuery( "#brandmodel" ).html(response.responseText);
hideLoad();
}
});
});
});
function showLoad()
{
jQuery("#myDivLoader").html('<img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="Wait" />');
}
function hideLoad()
{
jQuery("#myDivLoader").html('');
}
function geturlandredirec()
{
var brandmodelValue=jQuery( "#model_select option:selected" ).val();
var finalUrl="custom-"+brandmodelValue+".html";
jQuery('#customcaseform').attr('action',finalUrl);
jQuery( "#customcaseform" ).submit();
/* Trying this code for My Model Validation */
var model_select = document.getElementById("model_select");
if (model_select.value == "")
{
document.getElementById('model_select').innerHTML="please select Model";
}
}
</script>
</div>
在自定义函数geturlandredirec()
您可以检查下拉列表是否具有值,并使用自己的代码手动进行验证。
喜欢
function geturlandredirect()
{
/* Trying this code for My Model Validation */
if (jQuery('#brand_select').val() && jQuery('#model_select').val()) {
var brandmodelValue=jQuery( "#model_select option:selected" ).val();
//var finalUrl="custom-"+brandmodelValue+".html";
var finalUrl="http://sbdev2.kidsdial.com:81/custom-"+brandmodelValue+".html";
jQuery('#customcaseform').attr('action',finalUrl);
jQuery( "#customcaseform" ).submit();
} else {
if (jQuery('#brand_select').val()) {
if (jQuery('#brandmodel').find('label.error').length) {
jQuery('#brandmodel').find('label.error').html("Please select a model to proceed");
} else {
jQuery('#brandmodel').append('<label class="error">Please select a model to proceed</label>');
}
}
if(jQuery('#model_select').val()) {
if (jQuery('.custom_case').find('.brand').find('label.error').length) {
jQuery('.custom_case').find('.brand').find('label.error').html("Please select a model to proceed");
} else {
jQuery('.custom_case').find('.brand').append('<label class="error">Please select a brand and then model to proceed</label>');
}
}
else {
if (jQuery('#brandmodel').find('label.error').length) {
jQuery('#brandmodel').find('label.error').html("Please select a model to proceed");
} else {
jQuery('#brandmodel').append('<label class="error">Please select a model to proceed</label>');
}
if (jQuery('.custom_case').find('.brand').find('label.error').length) {
jQuery('.custom_case').find('.brand').find('label.error').html("Please select a model to proceed");
} else {
jQuery('.custom_case').find('.brand').append('<label class="error">Please select a brand and then a model to proceed</label>');
}
}
return false;
}
}
设置为false时,您可以返回false,否则将继续进行常规流程以使其重定向。
向默认选择的option
添加一个值,例如<option value="-1">My Brand</option>
然后,您有多种选择:
添加名为custom--1.html
的文件作为404页的一种
当在geturlandredirec
函数中检测到默认值时显示allert / error / something:
var brandmodelValue = jQuery(“ #model_select选项:已选择”).val();
if(brandmodelValue == -1){alert('请先选择一个品牌!'); 返回; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.