동적으로 iframe의 src 내용을 변경합니다.

Question

검색 결과를 표시하는 페이지를 만들고 있습니다. 이 페이지에는 1 개의 드롭 다운 상자 (및), 1 개의 텍스트 상자, 1 개의 버튼 및 1 개의 iframe이 있으며 여기에는 내가 가지고있는 페이지가 들어 있습니다. 내 테이블. 이제는 그 목록에 firstname, lastname 및 middlename이라는 헤더가있는 사용자 목록이 있습니다. 모든 데이터는 시작시 표시됩니다. 이제 드롭 다운 상자에서 firstname을 선택한 다음 내 이름으로 된 키를 누릅니다. 내 것과 같은 이름을 가진 사람들을위한 필터 결과. 예를 들어 매개 변수를 추가하는 표 페이지에서 필터를 사용했습니다. //localhost/test/table.php?fname=test

이제 iframe이 내 홈페이지를 변경하지 않는 유일한 것으로 변경해야합니다. 이제 iframe src는 양식 제출을 사용하지 않고 드롭 다운 상자에서 선택한 항목을 기반으로 클릭시 변경됩니다. 값은 텍스트 상자의 텍스트를 기반으로합니다. 또한 가능한 경우 src 링크에서 http : //를 사용하지 않아도됩니다.

그럼 난 거의 온 클릭 부분이 스크립트를 사용하여 iframe이 페이지를 변경합니다 수행 :

<script type='text/javascript'> 
     function goTo(){ 
     top.table.location = 'http://localhost/test/home.php; 
     } 
     </script> 

그것은 다음과 같이해야한다 : 자, 여기

$dropdownvalue = dropdownselectedtext 
$textvalue = valueoftextbox 

//localhost/test/table.php?$dropdownvalue$textvalue 

내 첫 작품이다. 더 나은 이해를 위해 논평했다. '#'다음에 텍스트가있는 것은 어떤 값을 의미한다고 가정하십시오. 참고로.

$acct_no = "#LOG_IN_ID OF USER"; 

      echo "<script type='text/javascript'> 
      function goTo(){ 
      top.table.src = '#SOMEURLHERE'; 
      } 
      </script>"; 

      echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'> 
      <tr> 
       <td style='padding-left:30px;padding-top:20px;'> 
        <h3>SELECTION TEST</h3> 
       </td> 
       <td align='right' style='padding-right:30px;' height='120px'> 
        <select name='filter' id='filter'> 
         <option value='fname'>fname</option> 
         <option value='lname'>lname</option> 
         <option value='mname'>mname</option> 
        </select> 
        <input type='text' value='Enter text here' id='textbox'> 
        &nbsp; 
        <input type='button' value='Search' onClick='goTo();'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue 
       </td> 
      </tr> 
      <tr> 
       <td colspan='2' align='center'> 
        <iframe src='table.php?ref=$acct_no' name='table' width='730px' height='300px' frameborder='0'></iframe> 
       </td> 
      </tr> 
      </table>"; 

Answer 1

<script> 컨테이너를 PHP 영역 밖에 두는 것이 좋습니다.

<script type="text/js" language="javascript"> 
    //Your function goes here 
</script 

<?php echo "<form name='someName' action='#'> 
echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'> 
<tr> 
    <td style='padding-left:30px;padding-top:20px;'> 
     <h3>SELECTION TEST</h3> 
    </td> 
    <td align='right' style='padding-right:30px;' height='120px'> 
     <select name='filter' id='filter'> 
    <option value='fname'>fname</option> 
    <option value='lname'>lname</option> 
    <option value='mname'>mname</option> 
     </select> 
     <input type='text' value='Enter text here' id='textbox'> 
     &nbsp; 
     <input type='button' value='Search' onClick='javascript: return goTo(\"this.parent.filter.value, this.parent.textbox.value\");'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue 
    </td> 
</tr> 
<tr> 
    <td colspan='2' align='center'> 
     <iframe src='' name='table' width='730px' height='300px' frameborder='0'></iframe> 
    </td> 
</tr> 
</table></form>";?> 

당신은 당신의 전체 섹션에 <form> 태그를 사용하지 않았기 때문에 관리 분야는 어렵다. 또한, 이전 게시물에서 정의한 자바 스크립트를 사용해보십시오.

Answer 2

(각 값에 대해) 상자 아래로 드롭 핸들러 onchange를/온 클릭이를 사용해보십시오 :

javascript: return goto(\"$dropdownvalue\", \"$textvalue\");

을 그리고, 그것은

<script type='text/javascript'> 
    function goto(var1, var2){ 
     finLink = "http://localhost/test/table.php?" + var1 + var2 
     top.table.location = finLink; //Not sure if it will be top.table.location or top.table.src 
    } 
</script> 

Answer 3

사용할 수있는 통합 jquery for this :

$('#myiframeid').attr('src', 'http://some.url.here');