I have multiple forms, each with a button for submission. After many attempts to get input values I haven't found a way to pass the data through ajax dynamically whenever a specific form is submitted.
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- CSRF Token -->
<meta name="csrf-token" content="bs8siABuGZ43djFWUcfS9pkN8JS0uLLuARF9H7I0">
</head>
<form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8" id="1" name="Clínicas Odontologicas">
<input name="_token" type="hidden" value="bs8siABuGZ43djFWUcfS9pkN8JS0uLLuARF9H7I0">
<div class="card-panel hoverable" id="forma1" name="formadepart" style="display: none;">
<h6>
Clínicas Odontologicas
</h6>
<br>
<label>Calificación:</label>
<br>
<div class="form-group">
<label>
<input class="with-gap" name="group1" type="radio" value="1" checked/>
<span>1</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="2"/>
<span>2</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="3"/>
<span>3</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="4"/>
<span>4</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="5"/>
<span>5</span>
</label>
</div>
<div class="row">
<div class="row">
<div class="form-group">
<div class="input-field col s12">
<i class="material-icons prefix">mode_edit</i>
<textarea id="comentario1" name="comment" class="materialize-textarea"></textarea>
<label for="comentario1">Comentarios</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-field">
<label for="calendarvisita1">Fecha de su visita</label>
<input id="calendarvisita1" type="text" name="datepicker" class="datepicker">
</div>
</div>
<div class="form-group">
<div class="input-field">
<label for="horavisita1">Hora de su visita</label>
<input id="horavisita1" type="text" name="timepicker" class="timepicker">
</div>
</div>
<input id="1" name="Clínicas Odontologicas" type="hidden" value="1">
<br>
<button class="btn lefty" name="buttondepart">Enviar</button>
<br/>
</div>
</form>
<form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8" id="2" name="Recepción Odontología">
<input name="_token" type="hidden" value="bs8siABuGZ43djFWUcfS9pkN8JS0uLLuARF9H7I0">
<div class="card-panel hoverable" id="forma2" name="formadepart" style="display: none;">
<h6>
Recepción Odontología
</h6>
<br>
<label>Calificación:</label>
<br>
<div class="form-group">
<label>
<input class="with-gap" name="group1" type="radio" value="1" checked/>
<span>1</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="2"/>
<span>2</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="3"/>
<span>3</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="4"/>
<span>4</span>
</label>
<label>
<input class="with-gap" name="group1" type="radio" value="5"/>
<span>5</span>
</label>
</div>
<div class="row">
<div class="row">
<div class="form-group">
<div class="input-field col s12">
<i class="material-icons prefix">mode_edit</i>
<textarea id="comentario2" name="comment" class="materialize-textarea"></textarea>
<label for="comentario2">Comentarios</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-field">
<label for="calendarvisita2">Fecha de su visita</label>
<input id="calendarvisita2" type="text" name="datepicker" class="datepicker">
</div>
</div>
<div class="form-group">
<div class="input-field">
<label for="horavisita2">Hora de su visita</label>
<input id="horavisita2" type="text" name="timepicker" class="timepicker">
</div>
</div>
<input id="2" name="Recepción Odontología" type="hidden" value="2">
<br>
<button class="btn lefty" name="buttondepart">Enviar</button>
<br/>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
In this part it should pass through ajax all the input values, but when submitted, the alert function shows nothing and when opening chrome debugger to see networks menu option, form data is not shown:
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
event.preventDefault();
// Getting the form ID
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var formaID = $(this).attr('id');
var formaDetalle = $("#" + formaID);
var url = $(this).attr('action');
var token = $('input[name="_token"]').attr('value');
var datos = $(formaDetalle).serialize();
$.ajax({
type: "POST",
url: url,
headers: {
'X-CSRF-Token': token
},
data: datos,
success: function(data) {
// Inserting html into the result div
alert(data);
},
error: function(jqXHR, text, error) {
// Displaying if there are any errors
$('#result').html(error);
}
});
return false;
});
});
</script>
formaID is getting the id from each form element and formaDetalle gets that specific submitted form id. It should pass all the values from every input element in the form when submitted through ajax with data which would be already serialized. Can you help me see why I'm not getting any values and form data?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire