需要重新加载页面以进行不同的按钮操作

Question

我有两个textarea。一个用于将英语转换为阿拉伯语，另一个用于将阿拉伯语转换为英语。

此操作有两个不同的按钮。而且我正在使用相同的textareas来反复行动。

如果我首先执行Enlish到Ar convertion，那么它不允许我在没有页面加载的情况下使用Ar到。

这里有什么问题。

<div class="col-xs-3">
                    <a id="Bar2en" rel="leanModal" name="ar2en" href="#ar2en" class="btn btn-block btn-lg btn-primary">Arabic to English</a>
                </div>
                    <div class="col-xs-3">
                    <a id="Ben2ar" rel="leanModal" name="ben2ara" href="#ar2en"  class="btn btn-block btn-lg btn-success">English to Arabic</a>
                    </div>

<div id="ar2en">
    <div class="container">
    <div class="row">
   <div class="col-xs-1 col-md-1">
       </div>

       <div class="col-xs-4 col-md-4">
        <div class="row">
            <div class="row" style="margin-top: 5%;">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    Arabic : 
                </div>
                </div>
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <textarea style="height:200px" id="arabic" name = "arabic" type="text" class="form-control"></textarea>                            
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <a class="btn btn-block btn-lg btn-success" id="ar2eng" href=""> Ar to En </a>
                </div>
                </div>
            </div>
        </div>
       </div>
       <div class="col-xs-4 col-md-4">
        <div class="row">
            <div class="row" style="margin-top: 5%;">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    English : 
                </div>
                </div>
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <textarea style="height:200px" name = "english"  id="english" type="text" class="form-control"></textarea>                            
                    <label id="engL">Enter text in the box</label>
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">                           
                </div>
                </div>
            </div>
        </div>
       </div>       
    </div>
     </div>    
</div>

Jquery的：

    $( "#ar2en" ).click(function() {
            var arabic = document.getElementById("arabic").value;
            //alert (arabic)
            ar2en(arabic);
            return false;
            });

        function ar2en(arabic)
        {               
            var xmlhttp;
            english.innerHTML = '';
            if (window.XMLHttpRequest)
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }           
            xmlhttp.onreadystatechange=function()
            {
                //document.getElementById("old-records").innerHTML = "";                
                if (xmlhttp.readyState == 4 && xmlhttp.status==200)
                {
                    var div2 = document.getElementById("english");
                                div2.innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","processAra.php");              
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send('arabic=' + arabic + '&type=' + 'ar' ) ;           
            //alert(arabic);
        }               
// -----------
    $( "#english" ).keyup(function() {
            //var cat = $("#cats option:selected").html();
//          alert(test);
            var english = document.getElementById("english").value;
            //alert (arabic)
            en2ar(english);
            return false;
            });
        function en2ar(english)
        {               
            var xmlhttp;
            arabic.innerHTML = '';
            if (window.XMLHttpRequest)
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }           
            xmlhttp.onreadystatechange=function()
            {
                //document.getElementById("old-records").innerHTML = "";                
                if (xmlhttp.readyState == 4 && xmlhttp.status==200)
                {
                    var div2 = document.getElementById("arabic");
                                div2.innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","processAra.php");              
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('arabic=' + english + '&type=' + 'en' ) ;          
            //alert(arabic);
        }   
        $("#Ben2ar")
        .click(
            //location.reload(true);
             function ()
             {
             $("#ar2eng").hide();
             $("#engL").show();
            return;
             }
        );
        $("#Bar2en")
        .click(
            //location.reload(true);
             function ()
             {
             $("#ar2eng").show();
             $("#engL").hide();
            return;
             }
        );