0

Here is my code. I would like to get the text from the span associated with the input with in LI while submitting the form and after page reloads the text should stick to the div with id "getSpan"

<html>
<head>
</head>
<body>
<form id="myForm" action="so.php" method="get">
    <li><span>some text1</span><input name="Load" type="submit" value="Google" /></li>
    <li><span>some text2</span><input name="Load" type="submit" value="MSN" /></li>
    <li><span>some text3</span><input name="Load" type="submit" value="Yahoo" /></li>
</form>     
<div id="container">
    <?php
        if (isset($_GET['Load'])) {
            $value = $_GET['Load'];
            echo "<iframe width=\"560\" height=\"349\" src=\"http://www.{$value}.com\"></iframe>";
        }
    ?>
    <div id="getSpan"></div>
</div>
</body>
</html>

I tried using hidden type input but the url is showing 2 parameters one for the main input and other for the hidden input which I am trying to avoid.

UPDATE I also tried mixed get and post as suggested by @Paul S but if I use the post method, I cant bookmark the URL's. Someone please help me in solving this issue.

Thanks.

4
  • why you don't use javascript to make it done? its more easier to do same thing with jquery or javascript Nov 14, 2012 at 23:29
  • But I need a form with get method to show the query in URL after form submission. I am not sure if this can be done with javascript. Is that possible ?
    – Dharma
    Nov 14, 2012 at 23:34
  • 1
    Yes sure, following will help you stackoverflow.com/questions/824349/… Nov 14, 2012 at 23:38
  • Thanks for that but if the page doesnt reload, will the form be submitted ? I tried this with no luck. I need the url to show the query which is dynamic. Here i used static data. If you have any working example kindly share that. Thanks.
    – Dharma
    Nov 14, 2012 at 23:46

3 Answers 3

1

You cannot read any static content that is not being passed via GET/POST. One workaround is to hardcode the return value and match it up with your text, such as:

<?php
    if (isset($_GET['Load'])) {
        $value = $_GET['Load'];
        switch ($value) {
            case 'Yahoo': $myValue = 'some text1'; break;
            case 'MSN':   $myValue = 'some text2'; break;
        }
        echo "<iframe width=\"560\" height=\"349\" src=\"http://www.{$myValue}.com\"></iframe>";
    }
?>
6
  • Actually i posted just a lookalike of my code. In actual I have dynamic content into the input name and value. So I cant use the switch. IS there any workaround that restricts the hidden input's name value pair not to appear in URL after form submission ?
    – Dharma
    Nov 14, 2012 at 23:32
  • Just use POST? GET requests show up in the URL. POST requests only show up in the header (as in not in myscript.php?stuffhere).
    – Paul S.
    Nov 15, 2012 at 0:00
  • but I need the main query string to show up in the URL. while the hidden query not to show :(
    – Dharma
    Nov 15, 2012 at 0:02
  • 1
    You can do a mix of both. <form id="myForm" action="so.php?vars=here" method="POST">
    – Paul S.
    Nov 15, 2012 at 0:04
  • 1
    You need to switch to full GET then.
    – Paul S.
    Nov 15, 2012 at 4:34
1

jQuery is what you need, plz try :

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
    $(function(){
        var formAction = $("#myForm").attr('action');
        $("button.submitBtn").click(function(e){
            var getValue = $(this).text().toLowerCase();
            var spnValue = $(this).parent().find("span:first").text();
            $("#myFrame").attr("src", "http://www."+getValue+".com");
            $("#getSpan").text(spnValue);
            window.history.pushState("","", "so.php?page="+getValue);
        });
    });
</script>
</head>
<body>

<ul>
    <li><span>some text1</span><button class="submitBtn">jQuery</button></li>
    <li><span>some text2</span><button class="submitBtn">MSN</button></li>
    <li><span>some text3</span><button class="submitBtn">digg</button></li>
</ul>     
<div id="container">
<iframe id="myFrame" width="560" height="349" src="http://www.jquery.com">
</iframe>
<div id="getSpan"></div>
</div>
</body>
</html>

There is no forms no reloading, this will work with all modern browser.

BTW, google and yahoo doesn't give you ability to include their pages in iFrame

I hope this help

1
  • Thanks Mohammad for taking your time for my concern. I tried using the same, but just check if I click on the MSN input button, the page URL changes to "..//so.php?page=MSN" Now copy the same url and paste in another browser you wont get that page. Means, you cant bookmark the URL or send the MSN state webpage URL across to your friends to directly land them into the webpage which is currently loaded with MSN. But the default one is shown. If this is not as expected or I am implemwnting this code in wrong way, please correct me.
    – Dharma
    Nov 16, 2012 at 3:25
0

Thanks Mohammed and Paul. I am able to solve this issue :) I used GET method on form to show the desired query in URL which can be bookmarked while for the other query, I used isset to check form submission and get the value from cache file I created. Thanks Guys.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.