I try to get the data value form the text input, console not log it...
Just after I use breakpoint but without it's not console anything
What's the problem?
var x = ''
$(() => {
$("#enter").click(() => {
x = $('#dataText').val();
console.log(x);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-column justify-content-center align-items-center vh-100">
<div>
<h1> welcome to performance parser</h1>
</div>
<div>
<form>
<div class="mb-5 p-4">
<label for="enterFolderName" class="form-label">Folder name</label>
<input id="dataText" type="text" class="form-control" id="enterFolderName">
<button id="enter" type="submit" class="btn btn-primary mt-3">Submit</button>
</div>
</form>
</div>
</div>
The form submits, the page reloads (no action).
To see the value EITHER check the "Preserve log" or use preventDefault:
var x = ''
$(() => {
$("#enter").click((e) => {
e.preventDefault(); // stop submit
x = $('#dataText').val();
console.log(x);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="d-flex flex-column justify-content-center align-items-center vh-100">
<div>
<h1> welcome to performance parser</h1>
</div>
<div>
<form>
<div class="mb-5 p-4">
<label for="enterFolderName" class="form-label">Folder name</label>
<input id="dataText" type="text" class="form-control" id="enterFolderName">
<button id="enter" type="submit" class="btn btn-primary mt-3">Submit</button>
</div>
</form>
</div>
I would personally use
$("form").on("submit",e => {
Related
I have a list thats nested inside a list, I made it with NodeJS, Express, EJS and MongoDB.
creating the first list works, however when creating items in the second list, they only appear after I refresh the website or create another item (creating an item automatically refreshes and site), I have struggled with this bug for a few day now, please dont laugh at me if its something stupid I am fairly new and this is my first real project.
route for the custom list
app.route("/BucketList/:customListID")
.get(function (req, res) {
previousRoute = "/BucketList";
if (req.isAuthenticated()) {
loggedIn = true;
const customListID = req.params.customListID;
const customListName = req.params.customListName
Country.findOne({ _id: customListID }, function (err, foundList) {
if (!err) {
if (!foundList) {
res.redirect("/BucketList")
} else {
foundList.save();
res.render("list", { customListID: customListID, customListName: customListName, customListCode: foundList.code, newListItems: foundList.items });
}
} else {
console.log(err);
}
})
} else {
loggedIn = false;
res.redirect("/login");
}
})
.post(function (req, res) {
const customListID = req.params.customListID;
const customListName = req.params.customListName;
const itemName = req.body.newItem;
const item = new Item({
name: itemName
});
Country.findOne({ _id: customListID }, function (err, foundList) {
foundList.items.push(item);
foundList.save();
res.redirect("/BucketList/" + customListID);
});
})
<section class="vh-100" style="background-color: hsl(0, 0%, 100%);">
<div class="container py-5">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<form class="d-flex justify-content-center align-items-center mb-4"
action="/BucketList/<%=customListID%>" method="post">
<div class="form-outline flex-fill">
<input type="text" id="form3" class="form-control form-control-lg" name="newItem"
placeholder="New Item" autocomplete="off" />
</div>
<button type="submit" class="btn btn-primary btn-lg ms-2" name="list"
value="<%= customListID %>">Add</button>
</form>
<% newListItems.forEach(function(item) { %>
<ul class="list-group mb-0">
<li
class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
<div class="d-flex align-items-center">
<input class="form-check-input me-2" type="checkbox" value=""
aria-label="..." />
<%=item.name%>
</div>
<form action="/deleteItem" method="post">
<button type="submit" id="item-remove-button" title="Remove item"
name="itemDeleteButton" value="<%= item._id %>"
onchange="this.form.submit()">
<i class=" fas fa-times text-primary"></i>
</button>
<input type="hidden" name="listID" value="<%= customListID %>"></input>
</form>
</li>
</ul>
<% }) %>
</div>
</div>
</div>
</div>
</div>
</section>
I encountered a issue using the vuejs #submit.prevent in my login form. When I clicked the login button it doesn't work in my website. And I did the catch error in the function but the console still show nothing. Please help. What I trying to do is when the clicking the form then it will submit the value to my login() function in methods and it will call my laravel back-end API for validate the user information.
Here is the following code below:
<template>
<section class="container mt-3">
<div class="row content d-flex justify-content-center align-items-center">
<div class="col-md-5">
<div class="box shadow bg-white p-4">
<h3 class="mb-4 text-center fs-1">Login Form</h3>
<form #submit.prevent="login()" class="mb-3">
<div class="form-floating mb-3">
<input type="email" class="form-control rounded-0" v-model="form.email" id="floatingInput" placeholder="name#email.com">
<label for="floatingInput">Email</label>
</div>
<div class="form-floating ">
<input type="password" class="form-control rounded-0" v-model="form.password" id="floatingPassword" placeholder="password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" id="autoSizingCheck2" class="form-check-input">
<label class="form-check-label">Remember me</label>
</div>
<div class="d-grid gap-2 mb-3">
<button type="button" class="btn btn-dark btn-lg border-0 rounded-0">
Login
</button>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="#" title="Forgot Password" class="text-decoration-none">
Forgot Passowrd?
</router-link>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="register" title="Forgot Password" class="text-decoration-none">
Don't have an accounts?
</router-link>
</div>
<div class="sign-up-accounts">
<p class="text-center">
Or Sign up with
</p>
<div class="social-accounts d-flex justify-content-center">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
import store from '../store';
import router from '../router';
export default {
name:'Login',
data(){
return {
form:{
email:'',
password:''
},
}
},
methods: {
login() {
store.dispatch('login', this.form)
.then(res=>{
router.push('/');
}).catch(error=>{
console.log(error);
});
},
}
}
</script>
<style scoped>
</style>`````
Here is the store file:
state:{
user:{
data:{},
token:sessionStorage.getItem("Token"),
}
},
actions:{
login({commit}, user){
axiosClient.post('/login', {email:user.data.email, password:user.data.password})
.then(res=>{
console.log(res.data.token);
console.log(res);
res.data.email = user.email;
res.data.password = user.password;
commit('authUsers', res);
})
},
mutations:
authUsers: (state, userData)=> {
state.user.data = userData.data.email;
state.user.token = userData.data.token;
console.log(userData);
sessionStorage.setItem('Token', userData.data.token);
sessionStorage.setItem('Email', userData.data.email);
},
This issue was solved by remove a type="button" in the login button
I want to insert multiple rows from dynamic input fields.
So I'm using the following formm and the following script which adds dynamically input fields.
$(document).ready(function() {
$("body").on("click", ".add_new_frm_field_btn", function() {
var random = 1 + Math.floor(Math.random() * 1000); //generate random values..
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
//added data-index and outer..class
$(".form_field_outer").append(`<div class="col-12 outer" data-index="${index}_${random}"><div class="card-body form_field_outer_row"> <div class="form-row"><div class="form-group col-md-4"> <label for="inputState">Casting</label><select id="id_casting" class="form-control" name="rows[${index}][id_casting]">
<option selected>Choose...</option><option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option> </select></div><div class="form-group col-md-4"><label for="inputState">Type de contrat</label><select id="id_modele_contrat" class="form-control" name="rows[${index}][id_modele_contrat]"> <option selected>Choose...</option><option>...</option> </select></div><div class="card-body "><button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button></div>
</div></div></div> `);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="mb-4">Projet</h5>
<!-- <form id="projetform" method="post" action="ajout_projet" class="myForms" enctype="multipart/form-data"> -->
<form method="POST" id="projetform" class="myForms" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" id="id_projet" name="id_projet" />
<div class="form-group">
<label for="inputAddress">Numéro de projet</label>
<input type="text" class="form-control" id="numero_projet" name="numero_projet" placeholder="Description">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-xl-8 col-left">
<div class="card mb-4">
<div class="card-body">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select class="form-control" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="rows[1][id_modele_contrat]">
<option selected>Choose...</option>
#foreach($models_contrat as $model_contrat)
<option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-xl-4 col-right">
<div class="card mb-4 casting_details ">
<div class="card-body casting_details2 ">
<div class="d-flex flex-row mb-3 ">
<!-- Pictures ot the selected casting will come here-->
</div>
</div>
</div>
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary mb-1">Add</button>
</div>
Ajax code :
$('#submit').click(function(){
$.ajax({
url:"{{route('ajout_projet.store')}}",
method:"POST",
data:$('#projetform').serialize(),
type:'json',
success: function(e){
console.log(e)
},
error: function(error){
console.log(error)
}
});
});
I put in my controller :
$data = $request->input('rows');
dd($data);
When I add in my frontEnd for example 4 input fields that is four rows , the dd($data); shows only the first row :
array:1 [
1 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
]
]
while it should show the 4 additional input fields values like :
array:4 [
1 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
],
2 => array:2 [
"id_casting" => "19"
"id_modele_contrat" => "1"
],
........
]
I tries many solutions but it stills the same problem n it takes only the first row in consideration and not all the additional input fields.
I am stuck in this point for a week and do not know what to do yet.
what i know is the problem is in my html or jquery code but i don't know exactly what is triggering this problem.
please help
UPDATE
migration files :
public function up()
{
Schema::create('projets', function (Blueprint $table) {
$table->increments('id_projet');
$table->string('numero_projet',10);
}
public function up()
{
Schema::create('projets_castings', function (Blueprint $table) {
$table->increments('id_projet_casting');
$table->integer('id_projet')->nullable()->unsigned();
$table->integer('id_casting')->nullable()->unsigned();
$table->integer('id_contrat')->nullable()->unsigned();
$table->integer('actif')->default('1');
$table->timestamps();
$table->foreign('id_projet')->references('id_projet')->on('projets');
$table->foreign('id_casting')->references('id_casting')->on('castings');
$table->foreign('id_contrat')->references('id_contrat')->on('contrats');
});
}
maybe that can help someone else
I solved my problem by changing my html to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form method="POST" id="projetform" class="myForms" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="mb-4">Projet</h5>
<!-- <form id="projetform" method="post" action="ajout_projet" class="myForms" enctype="multipart/form-data"> -->
<input type="hidden" id="id_projet" name="id_projet" />
<div class="form-group">
<label for="inputAddress">Numéro de projet</label>
<input type="text" class="form-control" id="numero_projet" name="numero_projet" placeholder="Description">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-xl-8 col-left">
<div class="card mb-4">
<div class="card-body">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row outer" data-index="1">
<input type="hidden" id="id_projet_casting" name="id_projet_casting" />
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select class="form-control" name="rows[1][id_casting]" id="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="rows[1][id_modele_contrat]">
<option selected>Choose...</option>
#foreach($models_contrat as $model_contrat)
<option data-id="{{$model_contrat->id_modele_contrat}}" value="{{$model_contrat->id_modele_contrat}}">{{$model_contrat->modele_contrat}}</option>
#endforeach
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<button type="submit" name="submit" id="submit" class="btn btn-primary mb-1">Add</button>
</div>
I have a form group with 3 inputs. The first input is a time input and the other 2 are custom form components. I setup a form.patchValue which updates the form values as seen below, however it does not update the UI, the time input is still empty.
How can I use patchValue to update the input ?
this.scheduleAutoReportForm = new FormGroup(
{
reportAt: new FormControl( '12:00' , Validators.required),
days: new FormControl([],Validators.required),
email: new FormControl([],[Validators.required])
}
);
this.scheduleAutoReportForm.patchValue({
reportAt: '24:00',
days:["2","4"],
email: ['placeholder#gmail.com']
});
this.ref.detectChanges();
Update
I experimented and it turns out that the textbox gets updated but not the time.
<div class="modal-header">
<h4 class="h-primary modal-title">Schedule Auto Report</h4>
<mh1-icon-button [icon]="faTimes" [iconClasses]="['btn', 'btn-sm', 'mx-0']" iconSize="lg" (click)="closeModal()">
</mh1-icon-button>
</div>
<div class="modal-body card">
<!-- This is where the form starts -->
<form [formGroup]='scheduleAutoReportForm' (ngSubmit)='onSubmit()'>
<div class="row">
<div class="col-3">
<label for="reportAt" ><h5>Send Report At:</h5></label>
<input type="time" name='reportAt' formControlName='reportAt' class="form-control" required>
</div>
</div>
<div class="row">
<div class="col-3">
<label for="test" >test</label>
<input type="text" name='test' formControlName='test' class="form-control" >
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<sentryx-day-selector formControlName="days"></sentryx-day-selector>
</div>
</div>
<div class="row mt-2">
<div class='col-12'>
<sentryx-email-chips formControlName="email"></sentryx-email-chips>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<button type="submit" class="btn btn-md btn-secondary"
[disabled]="!scheduleAutoReportForm.valid">Submit</button>
<button type="cancel" class="btn btn-md btn-secondary">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer card">
{{scheduleAutoReportForm.value | json}}
{{schedule | json}}
</div>
Did you try calling updateValueAndValidity() after patching the value?
See
What is updateValueAndValidity
The bug is very weird, I have been stucking here for hours just can find why my function in controller is fired.
Here is my HTML code:
<div class="col-md-9 clearfix" id="customer-account" ng-controller='ProfileController'>
<div class="box clearfix">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_old">oldpassword</label>
<input type="password" class="form-control" id="password_old" ng-model="passwordold">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_1">newpassword</label>
<input type="password" class="form-control" id="password_1" ng-model="passwordnew1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password_2">retype</label>
<input type="password" class="form-control" id="password_2"ng-model="passwordnew2">
</div>
</div>
<p>{{passwordnew2}}</p>
</div>
<!-- /.row -->
<div class="text-center">
<button type="submit" class="btn btn-primary">
<i class="fa fa-save" ng-click="changePwd(passwordold,passwordnew1,passwordnew2)"></i> save
</button>
</div>
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>
</div>
</div>
After I click the Button, which ng-click attribute as you can see, nothing happen.
Here is my controller code:
controller('ProfileController', ['$scope','UserFactory','SharedDataFactory',
function($scope,UserFactory,SharedDataFactory){
$scope.user = UserFactory.user;
$scope.passwordold;
$scope.errorMessageChangepwd='error';
$scope.showErrMsgChangepwd = false;
$scope.passwordnew1;
$scope.passwordnew2;
$scope.changePwd = function(passwordold,passwordnew1,passwordnew2){
console.log("aaaaaaaaaa");
if (passwordnew1!==passwordnew2){
$scope.showErrMsgChangepwd= true;
$scope.errorMessageChangepwd = 'error';
}else{
UserFactory.changePwd(passwordnew1)
.catch(function(err){
console.log(err.data);
}).then(function(response){
console.log(response);
});
}
};}]);
I called console.log("aaaaaaaaaa"); in the first line of my function, but after I click the button, nothing is shown on console.
And also
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>`
does not show error aaaa as expected but aaa on the browser.
what could be wrong?
Thanks.
You need to add ng-controller="ProfileController" in the top of your form.
Which looks like missing on your code.