Sort form by javascript to form array

Asked

Viewed 352 times

0

I need to save the form data in an array, but also need to give the option for the user to add multiple answers and questions as it is a quiz site.

The problem is that this button is not working inserir a descrição da imagem aqui

Current code:

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    i++;
    $('#dynamic_field2').append('<div id="row' + i + '" class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Pergunta: </label> <div class="col-sm-8"> <input type="text" class="form-control" name="' + i + '[Pergunta]" placeholder="Pergunta"> </div> <button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button><button type="button" name="add" id="addx" class="btn btn-success">ADD Alternativa</button></div>');

  });
  var v = 1;
  $('#addx').click(function() {
    v++;
    $('#dynamic_field2').append('<div id="row' + v + '" class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Alternativa: </label> <div class="col-sm-8"> <input type="text" class="form-control" name="1[Alternativas][0][Resposta]" placeholder="Pergunta"> </div> <button type="button" name="remove" id="' + v + '" class="btn btn-danger btn_remove">X</button><button type="button" name="add" id="plusalt" class="btn btn-success">ADD Alternativa</button></div>');

  });

  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

});
<html>

<head>

  <title>Cadastro de Quiz</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

</head>

<body>
  <div class="container theme-showcase" role="main">
    <div class="page-header">
      <h1>Crie seu quiz!</h1>
    </div>

    <form class="form-horizontal" name="formfunc" method="POST">

      <td>
        <button type="button" name="add" id="add" style="margin:10;" class="col-sm-5 btn btn-success">Adicionar Pergunta</button>
        <input class="col-sm-5 btn btn-success" type="submit" style="margin:10;" value="Cadastrar">
      </td>

      <table class="table" id="dynamic_field">
        <tr>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Titulo
                        </label>
            <div class="col-sm-10">
              <input type="hidden" class="form-control" name="0[Principal]" value="Informações" />
              <input type="text" class="form-control" name="0[Configuracoes][0][Titulo]" value="O quanto você sabe sobre: Mortal Kombat 9?" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Imagem Padrão:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][Image_padrao]" value="URL IMG" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Imagem Fonte:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][ImageFont]" value="Exemple" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Imagem Fonte URL:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][ImageFontUrl]" value="Exemple.COM" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Tags:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][Tags]" value="Jogos, Mortal Kombat 9" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Descrição:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][Descricao]" value="Quiz de Mortal Kombat 9!" />
            </div>
          </div>

          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">
                            Tipo:
                        </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="0[Configuracoes][0][Type]" value="1" />
            </div>
          </div>

        </tr>
      </table>

      <div id="dynamic_field2" style=" background: #c3c3c3">

      </div>


    </form>
</body>

</html>

Finally, the array must look like this

    array (
  0 => 
  array (
    'Principal' => 'Informações',
    'Configuracoes' => 
    array (
      0 => 
      array (
        'Titulo' => 'O quanto você sabe sobre: Mortal Kombat 9?',
        'Image_padrao' => '.png',
        'ImageFont' => 'Exemple',
        'ImageFontUrl' => 'Exemple.com',
        'Tags' => 'Jogos, Mortal Kombat 9',
        'Descricao' => 'Quiz de Mortal Kombat 9!',
        'Type' => 1,
      ),
    ),
  ),
  1 => 
  array (
    'Pergunta' => 'Qual é o chefão principal do jogo?',
    'Image_pergunta' => '',
    'ImageFont' => '',
    'ImageFontUrl' => '',
    'Alternativas' => 
    array (
      0 => 
      array (
        'Resposta' => 'Sub-Zero',
        'ce' => 0,
        'Image_resposta' => '',
        'ImageFont' => '',
        'ImageFontUrl' => '',
      ),
      1 => 
      array (
        'Resposta' => 'Shao Kahn',
        'ce' => 1,
        'Image_resposta' => '',
        'ImageFont' => '',
        'ImageFontUrl' => '',
      ),
    ),
  ),
  2 => 
  array (
    'Pergunta' => 'Qual é o chefão principal do jogo?',
    'Image_pergunta' => '.png',
    'ImageFont' => '',
    'ImageFontUrl' => '',
    'Alternativas' => 
    array (
      0 => 
      array (
        'Resposta' => 'Sub-Zero',
        'ce' => 0,
        'Image_resposta' => '',
        'ImageFont' => '',
        'ImageFontUrl' => '',
      ),
      1 => 
      array (
        'Resposta' => 'Shao Kahn',
        'ce' => 1,
        'Image_resposta' => '',
        'ImageFont' => '',
        'ImageFontUrl' => '',
      ),
    ),
  ),
)
javascript html

  • Try to point out your problem more directly, so the question is very broad. But we can already say that you are generating an invalid html with repeated ids.

  • I was able to solve the problem in question mentioned in the topic, but it is doubling the alternatives if there is more than one https://www.enigmaticos.club/mac.php

1 answer

0

what I could suggest to you is to use jquery:

$(document).ready(function() {

  var arrayPergunta = [];
  var arrayResposta = [];

  $('#add').click(function() {

    var pergunta = { Titulo: $("#titulo").val()
                    , Image_padrao: $("#imagem_padrao").val()
                    , ImageFont: $("#imagefont").val()
                    , ImageFontUrl: $("#ImageFontUrl").val()
                    , Tags: $("#Tags").val()
                    , Descricao: $("#Descricao").val()
                    , Type: $("#Type").val()
                    };

        var resposta =  { Resposta: "1"
                                        , ce: "2"
                      , Image_resposta: "3"
                      , ImageFont: "4"
                      , ImageFontUrl: "5"
                                    };

        var arrayTotal = $(pergunta).slice();

        arrayTotal.push(resposta);

        console.log(arrayTotal);

  });

});

in Fiddle: https://jsfiddle.net/2fd4rh9p/

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.