How do I separate the form data in two different boxes?

Question

How do I separate the form data in two different boxes?

Navigation

#1 by (2 votes)

1

I want to separate the data from the left part of the form, put each one in a box, a div different with that transparent background that they are and I am incapable. I did several tests without success. Nor am I able to vertically center personal data. What should I change to get it? I show what has been achieved so far. Thanks.

$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' ); 
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
            
        }//else
    }

	$('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.prop('orig_label',$btn.text());
            $btn.text('Enviando ...');
        });
        

                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 
            });        
        
      });	
});



$(function()
{
	$('#captcha_reload').on('click',function(e)
	{
	  e.preventDefault();
	  d = new Date();
	  var src = $("img#captcha_image").attr("src");
	  src = src.split(/[?#]/)[0];
	  
	  $("img#captcha_image").attr("src", src+'?'+d.getTime());
	});
});

#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: rgba(255,255,255,0.75);	
}
body
{
	background-color: #F4EAD5;
	background-image: url("http://i66.tinypic.com/vem2k6.jpg");
	background-size: cover;
}

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Formulario de contacto</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="form.css" >
        <script src="form.js"></script>
    </head>
    <body >
        <div class="container">
            <div class="row">
                <div class="text-center col-md-5 col-sm-12 col-xs-12" id="form_container">
                    <p>Miguel A. Espeso</p>
                    <p>Olivar, 5</p>
                    <p>05400, La Parra (Avila)</p>
                    <p>Tlf: 920 37 19 47</p>
                    <p>[email protected]</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
                <div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
                    <h2>Contacte</h2> 
                    <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. </br>Gracias. </p>
                    <form role="form" method="post" id="reused_form">
                        <div class="row">
                            <div class="col-sm-12 form-group">
                                <label for="message"> Mensage:</label>
                                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="name"> Nombre:</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="email"> Email:</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:30px;">
                            <div class="col-sm-5">
                                <img src="captcha.php" id="captcha_image"/>
                                <br/>
                                <a id="captcha_reload" href="#">recargar</a> 
                            </div>
                            <div class="col-sm-6">
                                <label for="email">Ingrese el código de la imagen aquí:</label>
                                <input type="text" class="form-control" required id="captcha" name="captcha" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 form-group">
                                <button type="submit" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                            </div>
                        </div>
                    </form>
                    <div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Su mensaje se envio con exito</h3> </div>
                    <div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
                </div>
            </div>
        </div>
    </body>
</html>

html css bootstrap formularios

asked by Miguel Espeso 29.12.2017 в 15:26

source

1 answer

Identification Submenu (Group and child) selected in a Navigation Drawer on Android Extract random elements from an array in php

score 2 · Accepted Answer

You can not identify two elements with the same id, it must be unique.

I think this was what I understood.

Note: Change the background image because I do not have access from the job you had.

Greetings.

$(function() {
  function after_form_submitted(data) {
    if (data.result == 'success') {
      $('form#reused_form').hide();
      $('#success_message').show();
      $('#error_message').hide();
    } else {
      $('#error_message').append('<ul></ul>');

      jQuery.each(data.errors, function(key, val) {
        $('#error_message ul').append('<li>' + key + ':' + val + '</li>');
      });
      $('#success_message').hide();
      $('#error_message').show();

      //reverse the response on the button
      $('button[type="button"]', $form).each(function() {
        $btn = $(this);
        label = $btn.prop('orig_label');
        if (label) {
          $btn.prop('type', 'submit');
          $btn.text(label);
          $btn.prop('orig_label', '');
        }
      });

    } //else
  }

  $('#reused_form').submit(function(e) {
    e.preventDefault();

    $form = $(this);
    //show some response on the button
    $('button[type="submit"]', $form).each(function() {
      $btn = $(this);
      $btn.prop('type', 'button');
      $btn.prop('orig_label', $btn.text());
      $btn.text('Enviando ...');
    });


    $.ajax({
      type: "POST",
      url: 'handler.php',
      data: $form.serialize(),
      success: after_form_submitted,
      dataType: 'json'
    });

  });
});



$(function() {
  $('#captcha_reload').on('click', function(e) {
    e.preventDefault();
    d = new Date();
    var src = $("img#captcha_image").attr("src");
    src = src.split(/[?#]/)[0];

    $("img#captcha_image").attr("src", src + '?' + d.getTime());
  });
});

.col-md-5 {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid red;
  padding: 15px;
  margin: 15px 15px 15px 15px;
}

body {
  background-color: #F4EAD5;
  background-image: url("https://placeimg.com/1000/900/people");
  background-size: cover;
}

.row {
  text-align: center;
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de contacto</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="form.css">
  <script src="form.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <div class="col-md-12">
          <p>Miguel A. Espeso</p>
          <p>Olivar, 5</p>
          <p>05400, La Parra (Avila)</p>
          <p>Tlf: 920 37 19 47</p>
          <p>[email protected]</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
      <div class="col-md-5">
        <div class="col-md-12">

          <h2>Contacte</h2>
          <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. <br>Gracias. </p>
          <form role="form" method="post" id="reused_form">
            <div class="row">
              <div class="col-sm-12 form-group">
                <label for="message"> Mensage:</label>
                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 form-group">
                <label for="name"> Nombre:</label>
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
              <div class="col-sm-6 form-group">
                <label for="email"> Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
            </div>
            <div class="row" style="margin-bottom:30px;">
              <div class="col-sm-5">
                <img src="captcha.php" id="captcha_image" />
                <br/>
                <a id="captcha_reload" href="#">recargar</a>
              </div>
              <div class="col-sm-6">
                <label for="email">Ingrese el código de la imagen aquí:</label>
                <input type="text" class="form-control" required id="captcha" name="captcha">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <button type="submit" class="btn btn-lg btn-default pull-right">Enviar &rarr;</button>
              </div>
            </div>
          </form>
          <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Su mensaje se envio con exito</h3>
          </div>
          <div id="error_message" style="width:100%; height:100%; display:none; ">
            <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>