Pass value of a dropdown to a textbox in a different page - PHP/jQuery/AJAX

Question

I want to pass the value of a dropdown in index.php to a textbox in test.php via Ajax.

Test.php is iframed in index.php. Once i change the dropdown, value of that dropdown needs to be updated in the test.php without reloading the page.

Thanks!!

Index.php

<script type="text/javascript">
            $(document).ready(function() {
        $('#dropdown1').change(function() {
            var value = $('#dropdown1').val()
            window.location = 'index.php?value=' + value;
        })
    })
</script>

<body>
    <h1>Ajax</h1>
    <select id="dropdown1">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
        <option value="4">Value 4</option>
    </select>

    <div>
        <iframe src="test.php" frameborder="0"></iframe>
    </div>
</body>

Test.php

<body>
    <?php

        echo "<h1> The Current Value: " . $_GET["value"] . "</h1>";

    ?>
</body>

No one will help you if you don't even try yourself. Post what you've tried so far — Johan, Oct 04 '13 at 07:15
Sorry Johan. Henceforth any questions I'll update what i've tried too. For now I've udpated with what i've tried. I'm able to pass that value on the same page using ajax but I don't know how to pass it to the other page. — Unknown User, Oct 04 '13 at 09:38
You should be able to pass the value between the frame and the main page without involving the server. — Johan, Oct 04 '13 at 09:43
I'm trying it from past 4-5 days. I couldn't figure that out. Can you please? — Unknown User, Oct 04 '13 at 09:52
Try this: http://stackoverflow.com/questions/4689145/pass-jquery-variables-between-iframe-and-parent — Johan, Oct 04 '13 at 10:08

score 0 · Answer 1 · answered Oct 04 '13 at 07:15

0

If by "without reloading the page" you mean reloading index.php you can just post to test.php using target like so:

<iframe id="test_php"/>
<form target="test_php">
   <select onchange="this.parentNode.submit()"/>
</form>

This would require your test.php script to accept the post and "reload".

answered Oct 04 '13 at 07:15

Ingmar de Lange

289
3
16

Thanks for the reply. I'll update my codes then you'll be clear to answer my question guess so. – Unknown User Oct 04 '13 at 07:19

score 0 · Answer 2 · answered Oct 04 '13 at 08:37

0

my previous answer is probably the way to go - simple is better than complex.

if you insist on using ajax (to store changed values on your server), you could use a two-step approach:

1 update iframe without reloading using:

document.getElementById('iFrameID').contentWindow.document.body.innerHTML='Hello changed value!'

2 use ajax to update value on server, no callback needed.

answered Oct 04 '13 at 08:37

Ingmar de Lange

289
3
16

Hi - I'm sorry. I don't understand what you are saying. I've just started the php, jquery and other stuffs. If you don't mind an example would make me understand better. – Unknown User Oct 04 '13 at 09:32
I tried using Query String. Even though i'm not able to pass that value to the iframe file. I'll update the Query String code now. – Unknown User Oct 04 '13 at 09:35
there are a few things unclear, like which page do you not want to reload, index, test or both. mind that test.php is not a webserver, it's not waiting for incoming requests. you'll have to instruct it to do something, either by posting something to it (reload), changing it's uri (reload) or by calling a javascript function (setup in test.php) (no reload) – Ingmar de Lange Oct 04 '13 at 09:44
If you don't mind can i have a chat with you? So that i can say you everything in clear. – Unknown User Oct 04 '13 at 10:18
as far as I can tell by your example code, you need to choose between using either ajax or iframes. I would suggest doing a bit of exploring with the iframe example I gave you - using a target on a form in index.php pointing to an iframe containing test.php (submitting the form will not reload index.php, it will reload test.php which is requested with the updated value in $_REQUEST). it's very simple and you'll be able to process updated values server side while only having to redraw test.php (should be very fast). also you'll be able to handle errors much more easily. – Ingmar de Lange Oct 04 '13 at 10:32

Pass value of a dropdown to a textbox in a different page - PHP/jQuery/AJAX

2 Answers2