点击后调用其他表单 - Jquery, PHP Calling other form after click

Jquery, PHP Calling other form after click

本文关键字：其他表单调用 | 更新日期: 2023-09-26

我最近才开始学习javascript(几个月前开始学习PHP)。

我的代码是这样写的:

e。g

 http://controljuridico.com/video01/

我有三个文件。

Html文件，格式为。
点击"妒忌"(发送)按钮后的函数的javascript文件。
处理数据的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 File (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....";
   }
       ?>

所以，这工作得很好，但是。如果我想要这个呢:

点击"羡慕"按钮后，在这个表单的左侧还会显示另一个类似的表单。

我的意思是，这就像选择步骤一样如果你选择了第一步，我需要另一个步骤，以此类推我希望这另一个步骤出现在前一个形式的左边。

有可能吗?如何?

提前感谢您的帮助!我真的很感激。

例如，您可以在页面首次加载时通过css隐藏'second form'，如下所示:

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

，当你的成功函数触发时，像这样删除CSS:

success: function(){
  ...
  $('#second_form').show();
}

简短的回答:是的。

在jquery中，有. insertbefore()。实现你想要的一种简单的方法是，在php中回显新表单，而不是

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

执行以下操作:

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

这将插入新表单，由PHP回显，在前一个下。当然你也必须删除

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