Заполнение элементов формы в диалоговом окне Jquery - PullRequest
Новая
       4

Заполнение элементов формы в диалоговом окне Jquery

1 голос
/ 30 июня 2011

Я новичок в Jquery или, по крайней мере, в более продвинутых функциях Jquery. Я пытался выяснить это время от времени несколько дней, и я начал волноваться.

У меня есть страница, на которой мы используем текстовые поля только для чтения HTML для отображения результатов. Текстовые поля заполняются PHP через поиск SQL Однако для этого примера я настроил переменные PHP, чтобы получить право на проблему.

Я пытаюсь заполнить поля формы в диалоговом окне на основе переменных php. Я сократил свой тестовый код, так что я надеюсь, что он сам по себе. Вот код для главной страницы: 

<?php
$Test1 = 'Test';
$Test2 = 'TestTest';
$Test3 = 'TestTestTest';
$Test4 = 'TestTestTestTest';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<title>Untitled Document</title>

<script>
  $(document).ready(function() {
    $('#popout1 a').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>') 
            .load($link.attr('href') + '#formTest' )
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 600,
                height: 400,
                modal: true,

        });

$link.click(function() {
    $dialog.dialog('open');
    $dialog.parent().appendTo($("#formTest"));
    return false;
    });
    });
}); 
</script>

</head>

<body>
<div id="formTest">
<form name="formTest" id="formTest">
<table>
    <th>Test</th>
        <tr>
            <td><label for="Test1">Test1:</label></td>
            <td><input type="text" readonly="readonly" name="Test1" value="<?php echo $Test1?>" /></td>
        </tr>       
        <tr>
            <td><label for="Test2">Test2:</label></td>      
            <td><input type="text" readonly="readonly" name="Test2" value="<?php echo $Test2?>" /></td>
        </tr>
        <tr>
        <td id="popout1"><a href="popoutTest.php" title="Popout Test">Click here for more data</a></td>
        </tr>
</table>
</form>
</div>
</body>
</html>

А вот код для всплывающей страницы: 

    <table>
    <th>More Tests</th>
        <tr>
            <td><label for="Test3">Test3:</label></td>
            <td><input type="text" readonly name="Test3" value="<?php echo $Test3 ?>" /></td>
        </tr>       
        <tr>
            <td><label for="Test4">Test4:</td>      
            <td><input type="text" readonly name="Test4" value="<?php echo $Test4 ?>" /></td>
        </tr>
</table>

Мой вопрос: как мне заполнить текстовые поля test3 и test4 на всплывающей странице переменными php, объявленными на главной странице.

1 Ответ

2 голосов
/ 30 июня 2011

Измените атрибут имени ваших входов на id.

<table>
    <th>More Tests</th>
        <tr>
            <td><label for="Test3">Test3:</label></td>
            <td><input type="text" readonly id="Test3" value="<?php echo $Test3 ?>" /></td>
        </tr>       
        <tr>
            <td><label for="Test4">Test4:</td>      
            <td><input type="text" readonly id="Test4" value="<?php echo $Test4 ?>" /></td>
        </tr>
</table>

Затем вы можете найти их с помощью jQuery. 

$('#Test3').val('the new value');
$('#Test4').val('the other new value');

Редактировать: вам нужно будет сохранить значения php где-то на главной странице, чтобы они были доступны, когда всплывающее окноотображается.

...