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>
Related
I have a modal and in this modal, I have a checkbox, The checkbox function can only be used on the first line table.
Code is like this, the checkbox function works but only on the first row of the table, henceforth the modal process doesn't work, I've tried adding
<?php echo $data['id_user']; ?>
to the ID but it still doesn't work.
<div class="form-group">
<label for="ubah_password">Ubah Password</label>
<div class="form-group">
<input type="checkbox" id="ubah_password" name="ubah_password" value="1">
<label class="prevent-select" for="ubah_password"> Ya, saya ingin mengubah password</label>
</div>
</div>
<div id="form_password" style="display: none;">
<div class="form-group">
<label for="editPassAdmin">Password Baru</label>
<input type="password" class="form-control form-control-sm" id="editPassAdmin" name="editPassAdmin" placeholder="Masukkan password baru">
</div>
<div class="form-group">
<label for="password_confirm">Konfirmasi Password</label>
<input type="password" class="form-control form-control-sm" id="password_confirm" name="password_confirm" placeholder="Masukkan kembali password baru">
</div>
</div>
<script>
var checkbox = document.getElementById("ubah_password");
var formPassword = document.getElementById("form_password");
checkbox.addEventListener("change", function() {
if (this.checked) {
formPassword.style.display = "block";
} else {
formPassword.style.display = "none";
}
});
</script>
The HTML ID attribute is designed to be unique, so even if you repeat it, you need to select them all, then individually in your JavaScript to load the modal.
Also, the name attributes should probably be unique enough for your form PHP code to tell which password you are changing.
For example, you could change the ID attributes to something like:
id="ubah_password[<?php echo $data['id_user']; ?>]"
I have a problem with the javascript field. When I type a number in the first form the same number appears in the second form, Please help me solve this.
Thanks before
The first field :
<div class="form-group">
<label>Price</label>
<input type="text" class="form-control" id="formattedNumberField" name="price" placeholder="IDR. .." required>
</div>
Second Field :
<div class="form-group">
<label>Insurance</label>
<input type="text" class="form-control" id="formattedNumberField2" name="insurance"
placeholder="IDR. .." required>
</div>
Javascript :
var fnf = document.getElementById("formattedNumberField");
fnf.addEventListener('keyup', function(evt) {
var n = parseInt(this.value.replace(/\D/g, ''), 10);
fnf.value = n.toLocaleString();
}, false);
i set a function for my button but the button doesn't follow it and it isn't being used anywhere else either
<div id="main2" class="main">
<form>
<label class="Courier" for="EventName"></label><br/>
<input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
<input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
<input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
<input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
<input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
<input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
<textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/>
<button id="submitEvent">Submit</button>
</form>
<br/>
<div id="newEvent"></div>
</div>
Javascript for the button below
$('#submitEvent').on('click' , function submitEvent(){
var event = $('#EventName');
var location = $('#location');
var DateAndTime = $('#DateAndTime');
var Duration = $('#Duration');
var Clothing = $('#Clothing');
var Food = $('#Food');
var Notes = $('#Notes');
var data ={
event: event,
location:location,
DateAndTime: DateAndTime,
Duration: Duration,
Clothing: Clothing,
Food: Food,
Notes: Notes
};
var eventRef = database.ref('Events');
var newEventRef = eventRef.push(data, function(err) {
if (err) {
console.error('Error Saving Data', err)
}
else{
console.log('success saving data');
$('#EventName').val('');
$('#location').val('');
$('#DateAndTime').val('');
$('#Duration').val('');
$('#Clothing').val('');
$('#Food').val('');
$('#Notes').val('');
}
})
})
i expect it to submit this to at least put on the console that the upload to firebase was successful or not but it doest do either it just refreshes my page to index.html and instead of the usual url it will be http://localhost:63342/Event%20Planner/www/index.html?Notes=1
when its usually
http://localhost:63342/Event%20Planner/www/index.html
Change this:
$('#submitEvent').on('click' , function submitEvent(){
to this:
$(document).on('click', '#submitEvent', function(){
I presume you are using .on() because the #submitEvent button is added dynamically. However, you must attach the .on event to an element that already exists when the DOM is initially rendered -- $(document) is a safe and common choice.
Reference:
Event delegation
I recommend you use the submit method https://api.jquery.com/submit/
<form id="yourFormName">
<label class="Courier" for="EventName"></label><br/>
<input class="Courier" required type="text" id="EventName" placeholder="Event name"><br/>
<input class="Courier" required type="Text" id="location" placeholder="venue"><br/>
<input class="Courier" required type="Text" id="DateAndTime" placeholder="Date and time"><br/>
<input class="Courier" required type="Text" id="Duration" placeholder="Duration"><br/>
<input class="courier" required type="Text" id="Clothing" placeholder="Dress code"><br/>
<input class="courier" required type="Text" id="Food" placeholder="Food"><br/>
<textarea class="courier" id="Notes" name="Notes" rows="4" cols="50">Enter additional notes here</textarea><br/>
<button type="submit">Submit</button>
</form>
And then
$( "#yourFormName").submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
Cheers!
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.
I am using angularJS directive and i want to find each input whether it has any errors, for example: required or pattern is incorrect.
HTML:
<form validation name="loginForm" ng-submit="form(this)">
<label> example 1
<input type="text" name="firstname" ng-model="user.firstname" ng-model-options="{ updateOn: 'mousedown blur'}" required
ng-pattern="validationPatterns.firstname">
</label>
<label> example 2
<input type="text" name="lastname" ng-model="user.lastname" ng-model-options="{ updateOn: 'mousedown blur'}" required
ng-pattern="validationPatterns.lastname">
</label>
<button class="btn" type="submit">Continue</button>
</form>
Directive: This outputs the names of each input name ( firstname and lastname and it includes all the objects like $required, $errors, $invalid etc...)
element.find('button').on('click', function () {
var input = element.find('input');
angular.forEach(input, function (inputs) {
var inputName = $(inputs).attr('name');
console.log(scope.loginForm[inputName]);
});
});
Now how do I check each element input, for example:
if input[name].$error.required=== true, show an error message. I wanted to check this on the directive not the HTML
You can do something like this:
<div class="input-group">
<label for="firstname">Firstname</label> <input name="firstname" type="text"
class="form-control input-sm" ng-model="user.firstname" required />
<span
ng-show="loginForm.firstname.$error.required && loginForm.firstname.$dirty">Required!
</span>
</div>
Hope this helps!