I'm getting the error of MethodNotAllowedHttpException when I run the below code:
<h1>Temp Form</h1>
<form method="post" action="" role="form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="panel panel-default ">
<div class="container">
<div class="panel-body">
<div class="form-group">
<label for="firstName">First Name *</label>
<input name="fname" type="text" class="form-control" id="firstName" placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="lastName">Last Name *</label>
<input name="lname" type="text" class="form-control" id="lastName" placeholder="Enter Last Name" required>
</div>
<div class="form-group">
<label for="qualification">Qualification *</label>
<input name="qualification" type="text" class="form-control" id="qualification" placeholder="BE, MCA, MBA Etc." required>
</div>
<div class="form-group">
<label for="emailAddress">Email address *</label>
<input name="email" type="email" class="form-control" id="emailAddress" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contactmessage">Message</label>
<textarea name="desc" type="text" class="form-control" id="contactmessage" placeholder="Message" rows="2"></textarea>
</div>
<input type="submit" id="add" class="btn btn-primary" onclick="addUpdateData(id)" value="Add"></button>
</div>
</div>
</div>
</form>
Code for routes.php :
Route::post('welcome/addupdate','FormController#addUpdateData');
code for controller :
public function addUpdateData(Request $req)
{
$id = $req->input('id');
if($id=="add")
{
$bs = new Basicusers;
$bs->fname = $req->fname;
$bs->lname = $req->lname;
$bs->qualification = $req->qualification;
$bs->email = $req->email;
$bs->desc = $req->desc;
$bs->save();
return "Data Successfully Added";
}
}
What I want is, when user clicks on add button, value in variable data add is passed, and on controller, I will check value for variable and if its add, than I will perform add operation.
meanwhile if the user click on edit button which is provided below in form, that row will be filled in form elements and the add button is changed to update button and value of variable data will be now update and I want to perform update operation...
I'm getting error when I am passing data using POST method
moreover I don't know how to get data passed using POST method..
for GET method I am using $id = Input::get('id'); method and its working
Here is JavaScript Function :
function addUpdateData(data) {
$(function() {
$.ajax({
method: "post",
url: "welcome/addupdate",
data: {
id: data
},
success: function(response) {
alert(response);
}
});
});
}
Try to use absolute path in your ajax request: url: "/welcome/addupdate"
Add a some ID for your form (ex. #form) and pass into the addUpdateData function serialized data from the form.
$('#add').on('click', function(e) {
e.preventDefault();
var data = $('#form').serialize();
addUpdateData(data);
});
Add also a input field as hidden type into the form which should have an ID of the existing resource. Then on the controller action you can get an array of the passed data and if if the ID of the resource exists the perform update. If not then create them.
Related
I have a form outlined in my app.component.html file as below, when I click the Send button to submit the form I get an error in my Javascript saying that the chatForm is undefined.
I've had a look at a few different tutorials and I can't seem to find why this function is not operating as I expect. What am I doing wrong?
Also when I'm submitting the form how do I get the value of the input that is present in my form? I have a name of message defined on the form, how can I use this variable?
app.component.html
<div class="container">
<h2>Message Form</h2>
<form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
<div>
<label for="message">Message</label>
<input type="text" id="message" name="message" [(ngModel)]="message" required>
</div>
<button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
Send
</button>
</form>
</div>
app.component.ts
public sendMessage(form): void {
console.log("Message sent: " + form.value);
}
You should get the data by using
form.value.message
My example look like this
<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
<div class="form-group">
<label for="UserName">Your email</label>
<input
type="text"
ngModel
class="form-control"
id="UserName"
name="UserName"
required
/>
Then in my component I can access to the form data like this
onSubmit(formValue: NgForm) {
const registerModel: AccountModel = {
UserName: formValue.value.UserName,
Password: formValue.value.Password
};
Im fill data into the model and it shown like this way.
after click input field display this way.
this is blade (model-edit-users)
<div class="md-form col-md">
<input type="text" id="name" name="name" class="form-control" required>
<label for="name" class="">User Name</label>
</div>
this is javascript code i used.
$('#users_view_table tbody').on('click', '#editUser', function (e) {
e.preventDefault();
var data = oTable.row($(this).parents('tr')).data();
var dataname = data.name;
$("#model-edit-users").modal('show');
$('#model-edit-users').on('shown.bs.modal', function () {
$('#name').val(dataname);
});
});
anyone help me to solve this UI issue
You can try to use <md-input-container> like following
<md-input-container>
<label>User Name </label>
<input type="text" id="name" name="name" class="form-control" required>
</md-input-container>
<div class="form-group">
<label>User Id:</label>
<input type="text" class="form-control" ng-model="a.userId">
</div>
<label>Items:</label>
<input type="text" class="form-control" ng-model="a.item">
<label>Quantity:</label>
<input type="text" class="form-control" ng-model="a.quantity">
<label>Card:</label>
<input type="text" class="form-control" ng-model="a.card">
<label>Other:</label>
<input type="text" class="form-control" ng-model="a.other">
<button type="button" ng-click="addData(a.userId)">Add</button>
Directive Code:-
scope.addData = function (userId) {
var prev = userId;
if(prev == userId){
scope.list=[];
scope.list.push(scope.a);
}
};
I have some data which I am pushing in an array, I want to push the data for same userId from previous. If user changes the userId then it wont push the data. I am trying to check the previous value but this logic doesnt work. Anyone can suggest some different logic.
Good time.
I'm new in Asp.net-MVC .
I have a form which it gets data from user and there is a span in this page which I want to post data of inputs and value of span to my data base.
I wanted to use model binder but I don't know how to name spans same as my model.
here is my action :
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,TourId,FirstName,LastName,Email,Phone,Comment,FrequentTraveler,TravelersCount,Date,ContactTimePreference,Country,Archived")] Request request)
{
if (ModelState.IsValid)
{
db.Requests.Add(request);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(request);
}
span is getting value from JavaScript
<span class="col-md-5" id="selecteddate"></span>
and here is my form but I write just one of the inputs here for Shorthand. :
<form role="form" method="post" action="/Tour">
#Html.AntiForgeryToken()
<div class="form-group">
<label for="FName">First Name:</label>
<input type="text" name="FirstName" class="form-control" id="FName" placeholder="Enter FirstName" />
</div>
</form>
I want to post value of span id="selecteddate" to data base in column named Date
appreciate if any one could tell me how it could be possible or if you have any better way as suggestion?
One solution for this is, add a hidden html input to your <from>. When you do your submit, you write its value as a copy from your span using javascript.
<form role="form" method="post" action="/Tour" onsubmit="prepare()">
#Html.AntiForgeryToken()
<div class="form-group">
<label for="FName">First Name:</label>
<input type="text" name="FirstName" class="form-control" id="FName" placeholder="Enter FirstName" />
</div>
<input type="hidden" name="Date" />
</form>
#section Scripts {
<script type="text/javascript">
function prepare() {
document.getElementsByName("Date")[0].value = document.getElementById("selecteddate").innerHtml;
}
</script>
}
I am pretty new in HTML 5 and I have the following doubt.
I have a form like this:
<form class="form-horizontal" action="/IDES/salvaRegistrazione" method="POST" name="formRegistrazione">
<div class="form-group">
<label class="control-label col-sm-2" for="inputNome">Nome</label>
<div class="col-sm-10">
<input id="inputNome" class="form-control" type="text" value="" required="required" placeholder="Nome" name="nome">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail" class="form-control" type="email" value="" required="required" placeholder="E-mail" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail2">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail2" class="form-control" type="email" placeholder="Inserisci nuovamente E-mail" name="inputEmail2">
</div>
</div>
<input id="submitRegistrazione" class="btn btn-default pull-right" type="submit" value="Registrati" name="submitRegistrazione">
</form>
As you can see the input tag have setted the required="required" attribute and as you can see in this JSFiddle if you don't insert the value into the input tag it is automatically shown an HTML error message popup:
https://jsfiddle.net/fntwyn9j/
Now my problem is that into my form I have also 2 field having type="email".
My problem is that I want that if the second email value (the one inserted in the field having id="inputEmail2") is not equal to the first email value (the one inserted into the field having id="inputEmail") appear a custom message (in the same HTML5 style) that say to me that the 2 fields have not the same value and the form is not submitted.
Searching on the web I found this example that use event listener to add custom message: http://jsfiddle.net/B4hYG/9/
But is seems to me that don't work and I have no idea about how to implement the previous requirement.
How can I solve this issue and implement this kind of HTML5 custom validation?
Solved by myself:
$(document).ready(function() {
document.getElementById("inputEmail2").addEventListener("input", function (e) {
valoreInpitEmail = $('#inputEmail').val();
valoreInpitEmail2 = $('#inputEmail2').val();
//alert("value inputEmail: " + valoreInpitEmail + " value inputEmail2: " + valoreInpitEmail2);
//if (e.target.value != "") {
if(valoreInpitEmail != valoreInpitEmail2) {
alert("EMAIL DIVERSE");
//alert("BLABLABLA");
e.target.setCustomValidity("Le E-mail inserite non corrispondono, per favore inserirle nuovamente");
}
else {
// Let the browser decide whether this is a valid email address
// This actually prevents that the call of setCustomValidity()
// in the IF doesn't get removed thus the user cannot submit the form
//alert("ELSE");
e.target.setCustomValidity("");
}
});
});