problem with inserting data into mysql ajax

0

good day I am new in this design and I am learning by means of tutorials I have this small problem to see if someone can help me. the form is only sent once I send the record and then when I try to send another error if I delete the record I send from the database and I send it and it is sent but to send again I have to delete the record sent this is the code

js

    $(document).ready(function() {
    /*  comienzo ajax añadir jugadores*/
$("#jugador-add").on('click', function() {
            // reset the form
$("#insertarjugador")[0].reset();
            // remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
            // empty the message div
$(".messages").html("");

            // submit form
$("#insertarjugador").unbind('submit').bind('submit', function() {

$(".text-danger").remove();

var form = $(this);

                // validation
var jNombre = $("#jNombre").val();


if(jNombre == "") {
$("#jNombre").closest('.form-group').addClass('has-error');
$("#jNombre").after('<p class="text-danger">El Nombre Es Obligatorio</p>');
} else {
$("#jNombre").closest('.form-group').removeClass('has-error');
$("#jNombre").closest('.form-group').addClass('has-success');
}

if(jNombre) {
                    //submi the form to server
                    $.ajax({
                        url : form.attr('action'),
                        type : form.attr('method'),
                        data : form.serialize(),
                        dataType : 'json',
                        success:function(response) {

                            // remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');

                            if(response.success == true) {
                                $(".messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                  '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                                '</div>');

                                // reset the form
                                $("#insertarjugador")[0].reset();



                            } else {
                                $(".messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                  '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                                '</div>');
                            }  // /else
                        } // success
                    }); // ajax subit
                } /// if


                return false;
            }); // /submit form for create member
        }); // /add modal
        /*  final ajax añadir jugadores*/
    });

insert

<?php require_once('../../Conexion/conexion.php');?>
<?php
if($_POST) {

    $validator = array('success' => false, 'messages' => array());

    $jNombre = $_POST['jNombre'];


    $sql = "INSERT INTO tbljugadores (jNombre)
  VALUES ('$jNombre')";
    $query = $connect->query($sql);

    if($query === TRUE) {
        $validator['success'] = true;
        $validator['messages'] = "Agregado Correctamente";
    } else {
        $validator['success'] = false;
        $validator['messages'] = "No Se Pudo Agregar El Jugadore";
    }

    // close the database connection
    $connect->close();

    echo json_encode($validator);

}


 ?>

modal form

<div class="modal fade" id="addjugador" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
  <br />
  <div class="x_panel">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Añadir Jugador</h4>
</div>

  <div class="modal-body">
    <div class="messages"></div>
<form  action="jugador-insert.php" class="form-horizontal form-label-left input_mask" method="POST" id="insertarjugador" name="insertarjugador" role="form">

<div  class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input  type="text" class="form-control has-feedback-left"  name="jNombre" id="jNombre" placeholder="Nombre">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>


      <div class="form-group">

      </div>
      <div class="ln_solid"></div>
      <div class="form-group">
        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
          <button class="btn btn-primary" type="reset">Limpiar</button>
          <button id="aceptar_jugador"  type="submit" class="btn btn-success">Guardar</button>
        </div>
      </div>

    </form>
  </div>


</div>
</div>
</div>

code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Admin lsoftbol</title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- Datatables -->
    <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap-wysiwyg -->
    <link href="../vendors/google-code-prettify/bin/prettify.min.css" rel="stylesheet">
    <!-- Select2 -->
    <link href="../vendors/select2/dist/css/select2.min.css" rel="stylesheet">
    <!-- Switchery -->
    <link href="../vendors/switchery/dist/switchery.min.css" rel="stylesheet">
    <!-- starrr -->
    <link href="../vendors/starrr/dist/starrr.css" rel="stylesheet">
    <!-- bootstrap-daterangepicker -->
    <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../build/css/custom.min.css" rel="stylesheet">
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <?php include("../include/adm-menu.php"); ?>

        <!-- top navigation -->
        <?php include("../include/adm-navmenu.php"); ?>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>GESTION DE JUGADORES</h3>
              </div>


            </div>

            <div class="clearfix"></div>

<!-- comienzo  modal añadir Jugador-->
<?php include("modaladd-jugador.php");?>
<!-- Final modal añadir jugador -->

<!-- comienzo  modal añadir Jugador-->
<?php include("modaledit-jugador.php");?>
<!-- Final modal añadir jugador -->

<!-- comienzo  modal ver mas datos jugador-->
<?php include("modalver-jugador.php");?>
<!-- Final modal añadir ver mas datos jugador-->



            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>LISTA DE JUGADORES</h2>
                  <ul class="nav navbar-right panel_toolbox">
                    <a id="jugador-add" data-toggle="modal" data-target="#addjugador" class="btn btn-outline btn-primary">Añadir Jugador</a>

                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">


                  <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>FOTO</th>
                        <th>NOMBRE</th>
                        <th>EQUIPO</th>
                        <th>POS</th>

                        <th>TELEFONO</th>
                        <th>EMAIL</th>

                        <th>ESTADO</th>
                        <th>ACCION</th>

                      </tr>
                    </thead>

                  </table>
                </div>
              </div>
            </div>

          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <?php include("../include/adm-pie.php"); ?>
        <!-- /footer content -->
      </div>
    </div>

    <!-- jQuery -->
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="../vendors/nprogress/nprogress.js"></script>
    <!-- bootstrap-progressbar -->
    <script src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script src="../vendors/iCheck/icheck.min.js"></script>
    <!-- Datatables -->
    <script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="../vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script src="../vendors/jszip/dist/jszip.min.js"></script>
    <script src="../vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="../vendors/pdfmake/build/vfs_fonts.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="../vendors/moment/min/moment.min.js"></script>
    <script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap-wysiwyg -->
    <script src="../vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
    <script src="../vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
    <script src="../vendors/google-code-prettify/src/prettify.js"></script>
    <!-- jQuery Tags Input -->
    <script src="../vendors/jquery.tagsinput/src/jquery.tagsinput.js"></script>
    <!-- Switchery -->
    <script src="../vendors/switchery/dist/switchery.min.js"></script>
    <!-- Select2 -->
    <script src="../vendors/select2/dist/js/select2.full.min.js"></script>

    <!-- Autosize -->
    <script src="../vendors/autosize/dist/autosize.min.js"></script>
    <!-- jQuery autocomplete -->
    <script src="../vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js"></script>
    <!-- starrr -->
    <script src="../vendors/starrr/dist/starrr.js"></script>
    <!-- jquery.inputmask -->
    <script src="../vendors/jquery.inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="../build/js/custom.min.js"></script>
<script type="text/javascript" src="personal/prueba.js"></script>
  </body>
</html>
    
asked by invitadoooo 06.08.2018 в 22:13
source

0 answers