I'm trying to get the value of the previous input in Blade.
<input name="people" type="number" cols="5">
#for($i=1; $i<$people; $i++)
<input type="text" cols="50">
#endfor
Depending on the number value from first input I want to generate input fields in the same Blade document.
But the shown trick is wrong, I'm getting an error "Undefined variable: people". Is it possible to do that?
I am using Laravel 5.2.
It doesn't depend on blade. You can use the code below in anywhere.
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div style="margin: 20px 10px;">
<input name="people" id="people" type="number" value="2" cols="5">
<script type="text/javascript">
$('#people').change(function(){
$('#inputs').html('');
for (var i = 0; i < $('#people').val(); i++) {
$('#inputs').append('<input type="text" name="input_'+$('#people').val()+'" value="'+$('#people').val()+'"><br>');
}
});
</script>
</div>
<div id="inputs"></div>
</body>
</html>
Related
``I am new in using ckeditor and working on simple crud application using ckeditor. it is working well in the create blade but not showing in the update blade.
here is my blade code
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ckeditor').ckeditor();
})
</script>
</head>
<body>
<form method = "post" action="{{url('updateblog')}}" enctype = "multipart/form-data">
#csrf
#method('PATCH')
<label for="title">Title</label>
<textarea class="ckeditor form-control" name="title">{!!$blog ->title!!}</textarea><br>
</form>
Try this, this worked for me:
<textarea class="ckeditor form-control" name="title">{{ $blog->title }}</textarea>
I hope i can help you.
I work on Laravel + Vuejs. Something has just happened, since then my script as copied hereunder doesn't work, chrome doesn't detect any vuejs script.
Astonishingly, the same script works well if I copy it into backup directory & run PHP artisan instance from there. Need advise. Actually problem seems with routerview which could not activate due to unknown problem. did i wrongly uninstall something which need to reinstall again ? because seems router doesn't work
kash.blade.php: - Main script
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}"
rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>
route.js: - where I describe the component route as to where login.vue lies
let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]
Login.vue: - Just a simple vue script with two text boxes.
<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" #submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail"
placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>
I have watched this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial for using jcrop, but it is for Php, when I'm using it with Laravel, the program stops at Validation, says image filed is required, like I haven't chosen an image, but I do have ! , and I'm seeing the image in the box . Note: when I push the upload button in crop modal, I get this error :
POST http://localhost:8000/server/ctrl.php?fileapi155837244028211 404 (Not Found) , it seems i need to set a post rout , but how ? i don't know . does anyone know how we should work with jcrop in laravel ?
here is my code :
<link href="{{asset('crop-userpic\style.css')}}" rel="stylesheet"/>
<link href="{{asset('crop-userpic\jcrop\jquery.jcrop.min.css')}}" rel="stylesheet"/>
<form method="post" action="{{route('testing')}}" enctype="multipart/form-data">
#csrf
<div class="container">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="image" id="image">
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success">
<div class="js-progress bar"></div>
</div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body">
<div class="js-img"></div>
</div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
<input type="submit" name="submit" value="sumbit" />
</form>
<script src="{{asset('crop-userpic\jquery.min.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.easing.min.js')}}"></script>
<script>
var FileAPI = {
debug: true,
media: true,
staticPath: '{{asset('crop-userpic\FileAPI')}}'
};
</script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.min.js')}}"></script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.exif.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.Fileapi.js')}}"></script>
<script src="{{asset('crop-userpic\jcrop\jquery.Jcrop.min.js')}}"></script>
<script src="{{asset('crop-userpic\statics\jquery.modal.js')}}"></script>
<script src="{{asset('crop-userpic\script.js')}}"></script>
and this is the image : https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
as you can see the image is in the box , but when i push submit , i get the validation error image field is required , like i don't have an image at all
please help me . i don't know what to do . and i love this Jcrop .
I need get attributes of element inside Parsley validation, I can using jQuery and selector, but I think it not the best way, have another way to do it?
See below my validation and html code:
(function () {
'use strict';
// Validate xml extension.
window.ParsleyValidator.addValidator('filetype',
function (value, requirement) {
var ext = value.split('.').pop().toLowerCase();
return ext === requirement;
}, 32)
.addMessage('en', 'filetype', 'The selected file must be an %s file.');
}());
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/parsley.js/2.0.7/parsley.js"></script>
<div class="container">
<form class="form-horizontal" role="form" data-parsley-validate>
<div class="form-group">
<label for="file" class="col-sm-2 control-label">File</label>
<div class="col-sm-4">
<input type="file"
name="file[]"
id="file"
class="form-control"
multiple="multiple"
data-buttonText="Escolha arquivo"
data-iconName="fa fa-folder-open"
data-parsley-filetype="xml"
required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-default">Salvar</button>
</div>
</div>
</form>
</div>
The current version doesn't really give you access; everything you need should be in requirement. It could be an array with multiple values, though.
A future should allow you to access any attribute starting with data-parsley-filetype-, but there's no way to know from your example what you are actually trying to achieve, so I don't know if that would help.
you need to access the argument directly:
window.Parsley
.addValidator('customvalidator', {
validateNumber: function (value, requirement) {
var element = arguments[2].$element.parent();
//logic here...
},
requirementType: 'integer'
});
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>