[英]How to submit form without refreshing?
I am trying to remove the refresh time after I click the end button to submit the form into the database. 单击结束按钮以将表单提交到数据库后,我试图删除刷新时间。
I am not that experienced when it comes to jquery and I rely only to video tutorials and forums at this current time but I am on my learning curve. 关于jquery,我还没有那么丰富的经验,目前我仅依靠视频教程和论坛,但我的学习曲线很靠前。 as you can see I already converted the start button into jquery to remove the refresh time when I click start button. 如您所见,当我单击开始按钮时,我已经将开始按钮转换为jquery以删除刷新时间。
<tbody class="table table-bordered table-striped">
@foreach($user as $task)
<tr class="form-group">
{{-- <form action="{{ route('amber.timestone.home.start') }}" method="POST" class="align-center"> --}}
{{csrf_field()}}
<td class="d-flex">
<input type="hidden" name="id" id="hidden-id_{{$task->id}}" value="{{ $task->id }}">
<button type="button" id="str-btn" data-id="{{$task->id}}" class="btn btn-primary"
@if(!empty($task->start))
disabled
@elseif(!empty($task->duration))
readonly
@endif
>Start</button>
{{-- <span class="btn btn-primary" onclick="myAlert({{$task->id}})">Test</span> --}}
</td>
{{-- </form> --}}
<form action="{{ route('amber.timestone.home.end', $task->id) }}" method="POST">
{{csrf_field()}}
<td>
<input class="my-2" type="text" id="ref_{{$task->id}}" name="ref" value="{{ $task->ref }}"
@if(empty($task->start))
readonly
@elseif(!empty($task->duration))
readonly
@endif
>
{{-- <input class="my-2" type="hidden" name="ref" value="{{ $task->ref }}"> --}}
</td>
<td>
<textarea name="remarks" id="remarks_{{$task->id}}" cols="30" rows="4"
@if(empty($task->start))
readonly
@elseif(!empty($task->duration))
readonly
@endif
>{{ $task->remarks }}</textarea>
</td>
<td>
<select id="campaign_{{$task->id}}" class="custom-select custom-select-lg mb-3" name="campaign"
@if(empty($task->start))
disabled
@elseif(!empty($task->duration))
disabled
@endif
>
<option @if($task->campaign == 'cert') selected @endif value="cert">Cert Focus</option>
<option @if($task->campaign == 'omni') selected @endif value="omni">Omni</option>
<option @if($task->campaign == 'textblast') selected @endif value="textblast">TextBlast</option>
</select>
</td>
<td>
<select id="type_{{$task->id}}" class="custom-select custom-select-lg mb-3" name="type"
@if(empty($task->start))
disabled
@elseif(!empty($task->duration))
disabled
@endif
>
<option @if($task->type == 'cert') selected @endif value="cert">Cert</option>
<option @if($task->type == 'email') selected @endif value="email">Email Support</option>
<option @if($task->type == 'chat') selected @endif value="chat">Chat Support</option>
</select>
</td>
<td>
<p id="startTime"></p>
{{ $task->start }}
</td>
<td>
{{ $task->end }}
</td>
<td>
{{ $task->duration }}
</td>
<td class="d-flex">
<input type="hidden" name="id" value="{{ $task->id }}">
<button type="submit" id="end-btn_{{$task->id}}" class="btn btn-danger float-right ml-3"
@if(!empty($task->end))
disabled
@elseif(empty($task->start))
disabled
@endif
>End</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection
@section('reporter')
<script>
$(document).ready(function() {
$('#report').DataTable( {
"bLengthChange": false,
"lengthMenu": [ 3, 10 ],
searching: false
});
$('#str-btn').click(function(e){
var id = $(this).data('id');
$.ajax({
url: "{{ url('amber/timestone/start') }}"+'/'+id,
type: "GET",
success: function(data){
console.log(data)
$("#startTime").text(data.start)
$("#end-btn_"+id).removeAttr("disabled");
$("#ref_"+id).removeAttr("readonly");
$("#remarks_"+id).removeAttr("readonly");
$("#campaign_"+id).removeAttr("disabled");
$("#type_"+id).removeAttr("disabled");
$("#str-btn").Attr("disabled");
}
})
$(this).prop("disabled", true);
});
});
You can get your form and add listener on submit, then you can call to event.preventDefault()
to avoid refreshing. 您可以获取表单并在提交时添加侦听器,然后可以调用event.preventDefault()
以避免刷新。
Would be something like this: 将是这样的:
<form action="{{ route('amber.timestone.home.start') }}" method="POST" class=" form-data-table align-center">
...
Javascript part: Javascript部分:
$('.form-data-table').on('submit', function(event){
event.preventDefault();
... remaining code
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.