CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
user3492795
user3492795

Reputation: 193

Hiding DIV when form is submitted

I developed a PHP form which auto submits data and shows data using mySQL queries. I have a div which I require to hide upon auto submit of the form. Since the page is refreshing, the jQuery of the hide is being lost.

Form Code:

<div id="map"><iframe src="url oof source" width="700" height="300" frameborder="0"></iframe></div><br />

<div>

<div class="dropdown">
<span style="color:#131787; font-size:2em; font-family:Arial, Helvetica, sans-serif;;">some text</span>
</div>

<div >
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>">
<select name="country" onchange='this.form.submit()'> 
    <?php $result= mysql_query('Query'); ?> 
<option value="x" selected>Select your destination</option>
    <?php while($row= mysql_fetch_assoc($result)) { ?> 
        <option value="<?php echo htmlspecialchars($row['country']);?>" > 
            <?php echo htmlspecialchars($row['country']); ?> 
        </option> 
    <?php } ?> 
<input type="hidden" name="action" value="submit" /><br /><br/>
</select>
</form>
</div>

</div>

Upon Auto submit, it captures the choice in a variable and displays data.

Example of some data which is displayed upon submit:

<?php
if(isset($_GET["action"])) { 
    $var1= $wpdb->get_results("Query");
    $var2= $wpdb->get_results("Query");
    $var3= $wpdb->get_results("Query");
    $var4= $wpdb->get_results("Query");


if (empty($var1))
    { echo '<h3 style="color:red;">No Results</h3>';} 
else 
    {foreach ( $var11 as $var1 ) {
        foreach ( $var22 as $var2 ){
}}}

?>

The script I am trying to use to hide the div is the below:

<script>$(document).ready(function() { $('#map').hide(); }</script>

The hiding is not happening upon refresh. Could you kindly help me out in this guys please.

Upvotes: 0

Views: 821

Answers (3)

Reynderke
Reynderke

Reputation: 36

Can't you just do it like this ?

 <?php
if(isset($_GET["action"])) { 
$var1= $wpdb->get_results("Query");
$var2= $wpdb->get_results("Query");
$var3= $wpdb->get_results("Query");
$var4= $wpdb->get_results("Query");
$vis="display:none;";


if (empty($var1))
{ echo '<h3 style="color:red;">No Results</h3>';} 
else 
{foreach ( $var11 as $var1 ) {
    foreach ( $var22 as $var2 ){
}}}else
{
  $vis="";
}

?>

the html the div you want to hide

<div style="<?php echo $vis; ?>" > </div>

Or you might do it like this : <?php if(isset($_GET["action"])) { $var1= $wpdb->get_results("Query"); $var2= $wpdb->get_results("Query"); $var3= $wpdb->get_results("Query"); $var4= $wpdb->get_results("Query");

if (empty($var1))
    { echo '<h3 style="color:red;">No Results</h3>';} 
else 
    {foreach ( $var11 as $var1 ) {
        foreach ( $var22 as $var2 ){
}}}else

{

?>



<div>

<div class="dropdown">
<span style="color:#131787; font-size:2em; font-family:Arial, Helvetica, sans-serif;;">some text</span>
</div>

<div >
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>">
<select name="country" onchange='this.form.submit()'> 
    <?php $result= mysql_query('Query'); ?> 
<option value="x" selected>Select your destination</option>
    <?php while($row= mysql_fetch_assoc($result)) { ?> 
        <option value="<?php echo htmlspecialchars($row['country']);?>" > 
            <?php echo htmlspecialchars($row['country']); ?> 
        </option> 
    <?php } ?> 
<input type="hidden" name="action" value="submit" /><br /><br/>
</select>
</form>
</div>

</div>
 <?php } ?>

This result's in not even needing javascript for it when using php.

Upvotes: 0

Leonardo Pizzoni
Leonardo Pizzoni

Reputation: 15

there's an error here:

<script>$(document).ready(function() { $('#map').hide(); **}**</script>

the code should be:

<script>$(document).ready(function() { $('#map').hide(); **});**</script>

Upvotes: 0

dkasipovic
dkasipovic

Reputation: 6120

Well you could just add it to isset($_GET['action']) condition, like: 

<?php
if (isset($_GET["action"])) {
    $var1 = $wpdb - > get_results("Query");
    $var2 = $wpdb - > get_results("Query");
    $var3 = $wpdb - > get_results("Query");
    $var4 = $wpdb - > get_results("Query");


    if (empty($var1)) {
        echo '<h3 style="color:red;">No Results</h3>';
    } else {
        foreach($var11 as $var1) {
            foreach($var22 as $var2) {
            }
        }
    }
    echo '<script>$(document).ready(function() { $(\'#map\').hide(); });</script>';
}
?>

But also, this might be better:

<?php
$display = "block";
if (isset($_GET["action"])) {
    $var1 = $wpdb - > get_results("Query");
    $var2 = $wpdb - > get_results("Query");
    $var3 = $wpdb - > get_results("Query");
    $var4 = $wpdb - > get_results("Query");

    if (empty($var1)) {
        echo '<h3 style="color:red;">No Results</h3>';
    } else {
        foreach($var11 as $var1) {
            foreach($var22 as $var2) {
            }
        }
    }
    $display = "none";
}
?>

And then when you show the div, you could use:

<div id="map" style="display: <?php echo $display; ?>">...</div>

Upvotes: 3

Related Questions