Setting the form action to a jquery tab

Question

I have installed a jquery UI tabs system on my web page , but the I have had a series of problems , one of them being: I can make a form request to my PhP at the same page and then process the result on it self. In other words: I want to set the action of the form in question to the the same tab, loaded from another file via ajax, that contains the form in the first place, so it can read and display a table with the search results.

Here are some codes, hope it helps.

The index (continas the #tabs div):

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="maskMoney.js"></script>

        <title>Financeiro</title>
    </head>

    <body>
        <script>
            $(function() {
                $( "#tabs" ).tabs({
                    ajaxOptions: {
                        error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                            "A tab não pode ser carregada ou está sob manutenção, desculpe o transtorno." );
                        }
                    }
                });
            });

        </script>


        <div>
            <div id="tabs">
                <ul>
                    <li><a href="financeiro_ver.php">Buscar saída</a></li>
                    <li><a href="financeiro_criar.php">Criar saída</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript" src="create.js"></script>
    </body>
</html>

And here it is one of the forms I place under a tab (the financeiro_ver.php file):

<?php
include 'all.php';

if (isset($_POST['efetuar'])) {
    $saida = new Saida();
    if (isset($_POST['situacao'])) {
        $saida->situacao = $_POST['situacao'];
    } else {
        $saida->situacao = 'npago';
    }
    $sql = "UPDATE financeiro SET situacao = '".$saida->situacao."' WHERE id = '".$_POST['saidaId']."'";
     mysql_query($sql);
}

if (!isset($_SESSION)) {
    session_start();
}
$_SESSION['ID_FUNCIONARIO'] = 46;
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <title>Financeiro</title>
    </head>

    <body>
        <form id="form0" name="form0" method="post" action="financeiro_ver.php"> <!--action="http://sim.medgoldman.com.br/financeiro/financeiro_ver.php" style="background-color:#EEEEEE"> -->
              <table border="0" align="center" cellpadding="10" cellspacing="0">
                <tr>
                    <td align="center">GRUPO:
                        <select name="categoria" id="produto">
                            <option value="adm">Despesas Administrativas</option>
                            <option value="imp">Importações</option>
                            <option value="ban">Bancos</option>
                            <option value="matriz">Despesas Matriz</option>
                            <option value="outros">Outros</option>                            
                        </select></td>
                    <td align="center">PERÍODO:
                    <td>de: <input name="data1" id="data1" value=""></input></td>
                    <td>até: <input name="data2" id="data2" value=""></input></td>
                    </select></td>
                    <td align="center"><input name="buscar" type="submit" id="buscar" value="   Buscar   " /></td>
                </tr>
            </table>
        </form>
        <?php
        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
            echo '<form name="form2" method="post" <!--action="http://sim.medgoldman.com.br/financeiro/financeiro_ver.php" --> style="background-color:#EEEEEE">';
        }
        ?>
        <table  class ="viewTable" align="center">
            <?php
            if (isset($session->message)) {

                $mens ="<th>" . $session->message . "</th>";
                echo utf8_encode($mens);
            }

            if (isset($_POST['buscar'])) {

                $query = "SELECT * FROM financeiro " .
                        "WHERE categoria = '" . $_POST['categoria'] .
                        "' AND data >= '" . $_POST['data1'] .
                        "' AND data <= '" . $_POST['data2'] . "'";

                if (mysql_query($query, $database->connection)) {
                    $categoriaSel = mysql_query($query, $database->connection);

                    $output = '<tr><th colspan="3">Categoria ';
                    if ($_POST['categoria'] === 'adm') {
                        $output .= "Despesas administrativas";
                    } elseif ($_POST['categoria'] === 'imp') {
                        $output .= "Importações";
                    } elseif ($_POST['categoria'] === 'ban') {
                        $output .= "Bancos";
                    } elseif ($_POST['categoria'] === 'outros') {
                        $output .= "Outros";
                    } elseif ($_POST['categoria'] === 'matriz') {
                        $output .= "Despesas Matriz";
                    }
                    $output .= "</th>";
                    $output .= "<tr><th>Data</th><th>Descrição</th><th>Valor</th></tr>";

                    $valorSomaUS = 0;
                    $valorSomaRS = 0;

                    while ($saidasSel = mysql_fetch_array($categoriaSel)) {
                        $valorDisplay = number_format($saidasSel['valor'], '2', ',', '.');
                        $output .= "<tr";
                        if ($saidasSel['situacao'] === 'pago') {
                            $output .= ' class="pago"';
                        } else if ($saidasSel['situacao'] === 'npago') {
                            $output .= ' class="npago"';
                        }
                        $output .= ">";
                        $output .= "<td class=\"datout\">" . $saidasSel['data'] . "</td>";
                        $output .= "<td class=\"desout\">" . $saidasSel['descricao'] . "</td>";
                        if ($saidasSel['cambio'] === "us") {
                            $output .= "<td class=\"valout\"> U$ " . $valorDisplay . "</td>";
                            $valorSomaUS += $saidasSel['valor'];
                        } else {
                            $output .= "<td class=\"valout\"> R$ " . $valorDisplay . "</td>";
                            $valorSomaRS += $saidasSel['valor'];
                        }

                        //VERIFICA USUARIO PARA ADICIONAR PAGO/NPAGO:
                        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
                            $output .= '<td><input name="situacao" type="checkbox" value="pago"';
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= ' checked';
                            }
                            $output .=">Pago</input></td>";
                        }

                        //VERIFICA USUARIO PARA VER PAGO/NPAGO:
                        if ($_SESSION['ID_FUNCIONARIO'] == '46') {
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= '<td>pago</td>';
                            } else {
                                $output .= '<td>não pago</td>';
                            }
                        }
                        if ($_SESSION['ID_FUNCIONARIO'] == '30' && $saidasSel['categoria'] === "imp") {
                            if ($saidasSel['situacao'] === 'pago') {
                                $output .= '<td>pago</td>';
                            } else {
                                $output .= '<td>não pago</td>';
                            }
                        }

                        //VERIFICA USUARIO PARA ADICIONAR DELETAR:                   
                        if (($_SESSION['ID_FUNCIONARIO'] == '46') && ($saidasSel['categoria'] === 'adm' || $saidasSel['categoria'] === 'outros' || $saidasSel['categoria'] === 'matriz')) {

                            $output .= "<td><button class=\"deletar\" href=\"financeiro_deletar.php?id=" . $saidasSel['id'] . "\">Deletar</button>";
                        } elseif (( $_SESSION['ID_FUNCIONARIO'] == '30' || $_SESSION['ID_FUNCIONARIO'] == '46' ) && $saidasSel['categoria'] === 'imp') {

                            $output .= "<td><button class=\"deletar\" href=\"financeiro_deletar.php?id=" . $saidasSel['id'] . "\">Deletar</button></td>";
                        }

                        $output .="</tr>";

//SOMA DOS VALORES DO PERIODO:                                  
                        $valorSomaUS = number_format($valorSomaUS, '2', ',', '.');
                        $valorSomaRS = number_format($valorSomaRS, '2', ',', '.');
                        $output .= "<tr> <td class=\"valsoma\" colspan=\"3\"> Soma do período = R$ " . $valorSomaRS . " e U$ " . $valorSomaUS . "</td></tr>";
                        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
                            $output .= '<tr><td><input id="efetuar" type="submit" value=" Efetuar " name="efetuar"></input></td><td><input type="hidden" value="' . $saidasSel['id'] . '" name="saidaId"></input></td></tr>';
                        }
                    }
                    echo utf8_encode($output);
                } else {
                    $session->message("Nenhuma saída para este período.");
                }
            }
            ?>
        </table>
        <?php
        if ($_SESSION['ID_FUNCIONARIO'] == '19') {
            echo '</form>';
        }
        ?>
    </body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 11:55

http://jsfiddle.net/mZLDk/

$(document).ready(function() {
// Tab initialization
// This is setup for two tab groups and is not needed
$('#tabs, #fragment-1').tabs({
    select: function(event, ui){
        var tabNumber = ui.index;
        var tabName = $(ui.tab).text();
        //Here I setup an event for each change this changes some inner html 
        //of a tag but can be applied  in your situation
        if(tabNumber = 1 ) {
            document.getElementById('fragment-1a').innerHTML = "changed";
        } else {
        }
        //This was just some debuging code for me
        console.log('Tab number ' + tabNumber + ' - ' + tabName + ' - clicked');
    }
    });
});

You would replace the line

            document.getElementById('fragment-1a').innerHTML = "changed";

with

        document.forms[0].action = "An Action";

Im really excited as this is my first working answer for some one on this site so please tell me if it works

THE BIG LONG STORY OF HOW A COMPLETE JAVASCRIPT NOOB FOUND YOUR ANSWER

As an idea you could try making it so the tabs event changes the setting IE this

jQuery - trapping tab select event

but how does that apply to you well I found something else here

http://www.tek-tips.com/viewthread.cfm?qid=1235640

this talks about chagines a form action based uppon an event which you can change onlcick.

But now an example that brings the two together

http://jsfiddle.net/mZLDk/

please note you need a default action for the form for this to work — ert3, Jun 18 '12 at 05:30

Setting the form action to a jquery tab

1 Answers1