0

ここ数日、javascript を学んでいます (数か月前に PHP を始めました)。

だから、私のコードはこれを作ります：

例えば 

 http://controljuridico.com/video01/

私は3つのファイルを持っています。

  1. フォームを含む Html ファイル。

  2. 「enviar」（送信）ボタンをクリックした後の関数を含むJavaScriptファイル。

  3. データを処理する php。

HTML ファイル (index.html)

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

       <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="css/css.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery.js" type="text/javascript" language="JavaScript"></script>
<script src="js/js.js" type="text/javascript" language="JavaScript"></script>
    </head>
      <body>
   <div id="content">
    <h1>Test.</h1>
    <h1>Step 1) choose city</h1>
    <br />
    <br />
    <label>test(*)</label>
    <hr />
    <br />
    <form name="form_data" id="form_data">

        <label>(*) City</label>
        <br />
        Medellin
        <input type="radio" name="ciudad" value="Medellin" />
        Manizales
        <input type="radio" name="ciudad" value="Manizales"/>
        Cali
        <input type="radio" name="ciudad" value="Cali"/>
        <br />
        <label>(*) Especialidad</label>
        <br />
        <input type="button"  value="Enviar" id="btn_enviar" /> 
        <br />
        <br />
        <label id="mensaje"></label>
    </form>
    <div id="resultado" ></div>
        </div>
               </body>
            </html>

js.js ファイル

       $(document).ready(function(){
   $('#btn_enviar').click(function(){

    if( validaRadio( 'ciudad','Ciudad' ) == false) return false;


    $.ajax({
        type:'POST',
        url :'upload.php',
        data: $('#form_data').serialize(),
        beforeSend : function(){
            $('#mensaje').html('Enviando datos...');
        },
        success: function (data){
                        $('#mensaje').html('Datos enviados  correctamente.');
                $('#resultado').html(data); 
        },
        complete: function(){
             $('#form_data').slideUp();
             $('#resultado').slideDown();

        }
    });

        }); 


          });

PHP ファイル (upload.php)

 <?php

  $sergu = $_POST['ciudad'];
   if ($_POST['ciudad'] == "Medellin") {
    ?>
    <label>Ciudad Ingresada:</label>
    <br />
    <label><?php echo $_POST['ciudad'] ?></label>
    <hr />
    <?php
    }else{
    echo "it is not medellin....";

   }
       ?>

したがって、これは非常にうまく機能しますが。これが欲しいとしたらどうしますか：

「enviar」ボタンをクリックすると、このフォームの左側に別の同様のフォームも表示されます。

つまり、ステップ 1 を選択した場合にステップを選択するのと同じように、もう 1 つのステップが必要で、この別のステップが前のフォームの左側に表示されるようにしたいということです。

可能です？どうやって？

よろしくお願いします。ほんとうにありがとう。

4

2 に答える 2

0

簡単な答え: はい。

jquery には .insertBefore() があります。あなたが（一種の）欲しいものを実装する簡単な方法は、phpで新しいフォームをエコーアウトすることです。

$('#resultado').html(data);

以下をせよ：

$(data).insertBefore('#resultado');

これにより、PHP によってエコー出力された新しいフォームが前のフォームの下に挿入されます。もちろん、あなたも削除する必要があります

$('#form_data').slideUp();

それ以外の場合、フォームは非表示になります。

于 2013-01-06T01:57:33.320 に答える
0

たとえば、次のように css を介してページが最初に読み込まれるときに、「2 番目のフォーム」を非表示にすることができます。

<form id="second_form" style="display: none">...

成功関数が起動したら、次のように css を削除します。

success: function(){
  ...
  $('#second_form').show();
}
于 2013-01-06T01:53:27.823 に答える