dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with javascript and hidden forms

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Post Problem with javascript and hidden forms

    Hi all, please anyone who knows and can help me with my problem. As you can see. I have a html where there are 2 buttons. (one hidden and one visible) This happens with the style tag and with the javascript in the body which switch the forms that are included in the divs. Until this point everything works great. But I want a 2nd javascript on the head which takes the form1 or form2 and then wokrs in a way to show the result of different php files inside the page(without refreshing or going to another page) This script in a simple page(without the first javascript which switches the cases) works totally fine and show the results inside the same page.

    But what is happening with that? I am feeling desperate. Where is the point that prevent javascript function (head) from working?? Really, please help me guys!!







    <html>
    <body>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    /* Document ready function of jquery. */
    $(document).ready(function(){
    $("#form1").submit(function(){
    var str = $(this).serialize();
    $.post("new5.php",
    str,
    function(data,status){
    $("#mydata").html(data);
    $("#mydata").show();
    /*$("#mystatus").html(status);
    $("#mystatus").show();*/
    }
    )
    })
    $("#form2").submit(function(){
    var str = $(this).serialize();
    $.post("factoryquery.php",
    str,
    function(data,status){
    $("#mydata").html(data);
    $("#mydata").show();
    /*$("#mystatus").html(status);
    $("#mystatus").show();*/
    }
    )
    })
    }
    );
    </script>
    </head>
    <style type="text/css">
    .hidden {
    display: none;
    {
    .visible {
    display: block;
    }
    </style>

    <button id="query1_Btn">View Query 1</button>
    <button id="query2_Btn">View Query 2</button>

    <div class="visible" id="query1">
    <form id ="form2" method="post" action="javascript:void(0);">

    Factories with greater productivity:
    <input name="count" type="radio" value="0" checked >At least one product
    <input name="count" type="radio" value="1">More than one
    <input name="count" type="radio" value="2">More than two
    <br>
    <p><input type ="submit" value="Submit"</p>
    </div>

    <div class="hidden" id="query2">
    <form id="form1" action="javascript:void(0);" method="post">
    Query2
    <input type="text" name="user" placeholder="enter a text" />
    <input type="submit" value="submit" />
    </form>
    </div>

    <script type="text/javascript">

    var query1Div = document.getElementById('query1');
    var query2Div = document.getElementById('query2');

    var query1Btn = document.getElementById('query1_Btn');
    var query2Btn = document.getElementById('query2_Btn');

    query1Btn.onclick = function() {
    query2Div.setAttribute('class', 'hidden');
    query1Div.setAttribute('class', 'visible');
    };

    query2Btn.onclick = function() {
    query1Div.setAttribute('class', 'hidden');
    query2Div.setAttribute('class', 'visible');
    };

    </script>

    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    I can never seem to stress enough just how valuable it is to use [ HTML] and/or [ CODE] bbcodes when posting source code. It really is a pain to look at code in a sans-serif font (rather than monospace) all clumped together with no formatting.

    Moving along, as far as all of the javascript at the top of the page in the <head> tag goes, other than lacking a few semi-colons I don't see any errors. I do notice there is no element on the page with an id of "mydata", thus once the AJAX request completes, the returned data cannot be placed on the page. So it's possible everything is working but the data returned from your AJAX request simply doesn't show up as you don't have an element on the page to hold the data.

  3. #3
    Join Date
    Apr 2014
    Posts
    2
    Thank you mate! Very kind of you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles