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">×</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">×</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">×</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>