#javascript #jquery #laravel-5 #ajaxform
#javascript #jquery #laravel-5 #ajaxform
Вопрос:
Я пытаюсь передать значение в свой серверный интерфейс (API, разработанный с использованием laravel 5.7), но я не могу передать значение. Если я использую button для отправки, то значение не будет передано, если я использую «ввод» вместо «кнопки», то смогу передать значение. и я не получаю значение ответа. Приветствуется любая помощь по этой проблеме
мой HTML-код
<form>
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="text" class="form__input" id="uname" name="username" required
onkeypress="return isAlphabet(event)" maxlength="30">
<label class="form__label" for="uname">
<span class="form__label-content">What we calls you?</span>
</label>
</div>
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="tel" class="form__input" id="mobile" name="phonenumber" required
onkeypress="return isNumberKey(event);" maxlength="10">
<div id="error"></div>
<label class="form__label" for="uno">
<span class="form__label-content">What's your number?</span>
</label>
</div>
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="email" class="form__input" id="email" name="email"
pattern="[^@] @[^@] .[a-zA-Z]{2,6}">
<label class="form__label" for="uemail">
<span class="form__label-content">What's your Email?</span>
</label>
</div>
<button type="submit" class="col-md btn btn-default bg-orange btn-lg wow fadeInUp form_input">Get
Notified</button>
</form>
Мой код Jquery
$("form").submit(function (event) {
event.preventDefault();
$('#mobile').val().length != 10 ? ($('#errorID') ? $("#mobile").after('<div id="errorID" class="alert alert-danger">Please enter Valid mobile</div>') : null) : ($("div").remove("#errorID"), mob = ($("#mobile").val()));
$.ajax({
type: "POST", url: "localhost:8000/api/astroinfo", data: { username: $("#uname").val(), phonenumber: mob, email: $("#email").val() },
success: function (data) {
$("div").remove(".modal-body");
if (data.status == '0') {
$(".modal-header").after('<div id="errorID" class="alert alert-success">Successfully Submitted<br>We will revote you soon</div><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">Close</button></div>');
} else if (data.status == '1') {
$("modal-header").after('<div id="errorID" class="alert alert-danger">Something Went Wrong</div><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">Close</button></div>');
}
},
error: function (data) {
$("div").remove(".modal-body");
$(".modal-header").after('<div id="errorID" class="alert alert-danger">Sending Unsuccesful</div><div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">Close</button></div>');
}
});
});
Код Laravel
<?php
namespace AppHttpControllers;
use Exception;
use IlluminateHttpRequest;
use AppHttpRequests;
use AppHttpControllersController;
use Appinfo;
use Mail;
class AstrolgerinfoCtrl extends Controller
{
public function info(Request $request)
{
$insert=new info([
"name"=> $request->username,
"number"=> $request->phonenumber,
"email"=> $request->email
]);
$insert->save();
return response()->json(['status'=>0],200);
}
}
Комментарии:
1. проверьте консоль и InspectElement > Networktab, отправляется запрос ajax на сервер или нет?
2. Кроме того, троичное выражение, которое вы используете для проверки, излишне запутано и его трудно прочитать. Также обратите внимание, что
$('#errorID')
условие всегда будет равноtrue
, что повлияет на логический поток. Если вы пытаетесь проверить, существует ли элемент, используйте$('#errorID').length != 0
Ответ №1:
<form id="form1">
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="text" class="form__input" id="uname" name="username" required
onkeypress="return isAlphabet(event)" maxlength="30">
<label class="form__label" for="uname">
<span class="form__label-content">What we calls you?</span>
</label>
</div>
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="tel" class="form__input" id="mobile" name="phonenumber" required
onkeypress="return isNumberKey(event);" maxlength="10">
<div id="error"></div>
<label class="form__label" for="uno">
<span class="form__label-content">What's your number?</span>
</label>
</div>
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
<input type="email" class="form__input" id="email" name="email"
pattern="[^@] @[^@] .[a-zA-Z]{2,6}">
<label class="form__label" for="uemail">
<span class="form__label-content">What's your Email?</span>
</label>
</div>
<button type="submit" class="col-md btn btn-default bg-orange btn-lg wow fadeInUp form_input">Get
Notified</button>
</form>
Комментарии:
1. Просто хочу добавить идентификатор attr в форму и присвоить это значение идентификатора форме в кнопке