Переключить видимость с помощью Ajax и переключателей

Question

На моем page1.php Я хочу переключить видимость page2.php.

Я использую следующий код:

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona 
<input type="radio" name="city" value="Manchester"> Manchester 

Я называю page2.php, используя этот код:

function getPage2() 
{ 
    $.ajax({ 
     type: "GET", 
     url: "page2.php", 
     success: function(result){ 
      $("#show_results").html(result); 
     } 
    }); 
}; 

Я хочу, чтобы показать page2.php только если переключатель выбрано и ничего не показывать (скрыть его), если ни один из переключателей или переключатель «Machester» не выбран.

---

UPDATE

я решил. Это было очень легко.

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona 
<input type="radio" name="city" value="Manchester" onclick="getPage2(this.value);"> Manchester 

Я показываю, и я скрыть page2.php, используя этот код: в любом случае

function getPage2() 
     { 

    var var_name = $("input[name='city']:checked").val(); 

    $.ajax({ 
       type: "GET", 
       url: "page2.php", 
       success: function(result){ 


    if(var_name == "Barcelona") 
       $("#show_results").html(result).show(); 
       else 
       $("#show_results").html(result).hide(); 
       } 
      }); 
     }; 

Спасибо, ребята.

Answer 1

Вы можете использовать селектор JQuery для этого:

$('input').click(function(){ 
    $('input').show(); // Show all inputs 
    $(this).hide(); // Hide the clicked input 

    $.ajax({ 
     type: "GET", 
     url: "page2.php", 
     success: function(result){ 
      $("#show_results").html(result); 
     } 
    }); 
}) 

Конечно, это работает только для страницы только с этими входами.

У вас должны быть классы или идентификаторы ваших радиостанций, предназначенные для их непосредственного использования с помощью селектора.

Вы будете иметь что-то вроде этого:

$('.radio-page').click(function(){ // ...

Answer 2

Вы можете просто загрузить прятки состоянии содержимого с исходной страницы. Таким образом, вы можете избежать вызова ajax.

<input class="radios" type="radio" name="city" value="Barcelona"> Barcelona 
<input class="radios" type="radio" name="city" value="Manchester"> Manchester 
<div id="content" style="display:none">Hide-able content</div> 

И тогда просто сценарий появится, когда выбрана «Барселона».

$("input[type='radio']").click(function() 
{ 
    if($(this).val() == "Barcelona") $("#content").show(); 
    else $("#content").hide(); 

});