We Keep Coding

Cannot read property 'submit' of null i use laravel and javascript

I want to add a product to my favorites, but I do not want to make a load for the entire page, so I use JavaScript as shown in the code where I made an ancor disruption and created a form and took an id from the form and implemented it by using the submit function, but the following error appears and does
Uncaught TypeError: Cannot read property 'submit' of null
Please advise the importance
Thank you
this view
<div class="product-info">
<div class="tab-content" id="myTabContent">
<!-- Start Single Tab -->
<div class="tab-pane fade show active" id="man" role="tabpanel">
<div class="tab-single">
<div class="row">
#foreach($products as $p)
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<form action="{{route('cart.store')}}" method="post" id="add-cart-{{$p->id}}">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$p->id}}">
<input type="hidden" name="Product_Name_ar" value="{{$p->Product_Name_ar}}">
<input type="hidden" name="Price" value="{{$p->Price}}">
<div class="single-product">
<div class="product-img">
<a href="{{route('product', ['product' => $p->id])}}">
<img class="default-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
<img class="hover-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
#if(Auth::guard('customer')->check())
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="document.getElementById('favorite-{{$p->id}}').submit()" class="{{ Auth::guard('customer')->user()->favorite_products()->where('product_id', $p->id)->count() != 0 ? 'favorite' : '' }}">
<i class="fa fa-heart "></i><span>Add to Favorite</span></a>
<form id="favorite-{{$p->id}}" action="{{route('product.favorite', $p->id)}}" method="post">
{{ csrf_field() }}
</form>
#else
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="toastr.info('To add favorite list you to need login first', 'info', {
closeButton: true,
progressBar: true
})">
<i class="fa fa-heart "></i>
<span>Add to Favorite</span></a>
#endif
</div>
<div class="product-action-2">
<button style="background: transparent; border: none; color: black" class="btn btn-warning">Add to chart</button>
</div>
</div>
</div>
<div class="product-content">
<h3>{{ $p->Product_Name_ar }}</h3>
<div class="product-price">
<span>{{ $p->Price }} K.D</span>
</div>
</div>
</div>
</form>
</div>
#endforeach
</div>
</div>
</div>
<!--/ End Single Tab -->
</div>
</div>
This Controller
class Favoritecontroller extends Controller
{
public function add($id) {
$customer = Auth::guard('customer')->user();
$isFavorite = $customer->favorite_products()->where('product_id', $id)->count();
if($isFavorite == 0) {
$customer->favorite_products()->attach($id);
}else {
$customer->favorite_products()->detach($id);
}
return redirect()->back();
}
}
This Route
Route::group(['middleware' => ['auth:customer']], function () {
Route::post('favorite/{id}/add', 'FavoriteController#add')->name('product.favorite');
});

I assume your JS fails here
... onclick="document.getElementById('favorite-{{$p->id}}').submit()"
The proper way to do it
... onclick="addToWhishList({{$p->id}})"
Then in your JS
<script>
function addToWhishList(formId) {
//console.log(formId);
document.getElementById('favorite-' + formId).submit();
}
</script>
Check working Demo

Show/Hide elements that are generated in a foreach loop

I am looping out forum entries and next to each one i have placed a button to show or hide the reply to comment form, i got this to work using a simple JS script. However because the script is looped out it only works for the top one. presumably because it cannot identify each element using an id because id won't be unique (and class would cause all of them to show/hide). I did think of adding something like {{$comment->id}} to the id so it would be unique but i cannot then use the JS script? can i?
Below is the relevant code:
#extends('layout')
#section('head')
<script>
$(document).ready(function(){
$("#showhidereply").click(function(){
$("#replycomment").toggle();
});
});
</script>
#stop
#section('content')
...
<!-- Comments -->
#foreach ($post->comments as $comment)
<span class="pull-right">
<div class=" btn-group">
<button class="btn btn">
<span class="glyphicon glyphicon-picture"></span> Owner's Name Here
</button>
<button class="btn btn btn-primary" id="showhidereply">
<span class="fa fa-reply"></span>
</button>
</div>
</span>
<p>{{ $comment->body }}</p>
</div>
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="input-group" style="padding-top: 5px;">
<input type="text" name="body" class="form-control"></input>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Reply to Comment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#stop
I did have someone make a suggestion of changing to:
Button
<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
<span class="fa fa-reply"></span>
</button>
Form
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">
Script
<script>
$(document).ready(function(){
// change the selector to use a class
$(".showhidereply").click(function(){
// this will query for the clicked toggle
var $toggle = $(this);
// build the target form id
var id = "#replycomment-" + $toggle.data('id');
$( id ).toggle();
});
});
</script>
But that still doesn't work but the elements are all now unique.
Many Thanks!

Try using this,
<button class="btn btn btn-primary" data-id="{{ $comment->id }}" onclick="showHide('replycomment-{{ $comment->id }}');">
<span class="fa fa-reply"></span>
</button>
//javascript code
<script>
function showHide(id){
$("#"+id).toggle();
}
</script>

How to add a "required" checkbox in this code

I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>

You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />

you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle

add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>

Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}

how to change textbox value from ng repeat

I make my own autocomplete in html, I use ng-repeat to show the suggestion. this is the code:
<div content-for="title">
<span>Add Friend</span>
</div>
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<div class="list-group-item">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="Email" auto-complete autocomplete="off"/>
<div href="#" ng-repeat="x in cobas | filter:add.email">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}
</div></div>
</div>
<button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button>
</form>
</div>
</div>
</div>
</div>
what I want is, when I click the suggestion result, the value of that textbox is change to the suggestion result using ng-click, can someone help me?

You have to add function in your controller, like below:
$scope.autocomplete = function (completeText) {
$scope.add.email = completeText;
};
and then in html call the function on ng-click like below,
<div href="#" ng-repeat="x in cobas | filter:add.email" ng-click="autocomplete(x.name)">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}</h5
</div>
</div>

How to prevent html list menu items from refreshing after assigning permission

Please I am assigning user permission based on user type read from session data in Node.js and the hide html li elements based on the type of user. It seems to work but the behaviour it awful in the sense that. Whenever I load a page, all the menu items refresh/ loads again before they are hidden. How do I prevent this behaviour. It there something I have doing wrong or the approach is just not good. I have reference the client-side code on each page within the application
This is my code for the client side
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
if (data == 'Student') {
$("#Offer").find("#shareitem").show();
$("#Offer").find("#offeritem").hide();
$("#Offer").find("#returnitem").hide();
$("#Offer").find("#recallitem").hide();
$("#Offer").find("#renewitem").hide();
$("#Offer").find("#guestoffer").hide();
$("#Offer").find("#manageoffers").hide();
$("#Overview").hide();
$("#WithHolding").hide();
} else if (data == 'Admin') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else if (data == 'Teacher') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else {
$("#Offer").hide();
$("#Discover").hide();
$("#Overview").hide();
$("#WithHolding").hide();
$("#myAccount").hide();
$("#Message").hide();
}
})
});
This is my code on the server side
outer.get('/permission',function(req,res) {
if (req.user)
{
var UserType = req.user.UserType;
switch (UserType) {
case "Admin":
if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) {
res.send(UserType)
}
break;
case "Student":
if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) {
res.send(UserType)
}
break;
case "Teacher":
if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) {
res.send(UserType)
}
break;
default :
if (req.isAuthenticated()) {
res.send(UserType)
}
}
}else{
res.send('undefined')
}
});
// This is my Navbar which contains the menus and it is called or references on each page through out the application
<script src="/javascript/ClientJs/HideMenus.js"></script>
//This my Javascript file which contains the permission instructions(client side)
<nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><%=__('Borrowing Sys')%></a>
<div class="nav-collapse collapse" aria-expanded="true">
<ul id="menu"class="nav">
<li id="home"><%=__('Home')%></li>
<li id="Offer" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="offeritem"><%=__('Offer Item')%></li>
<li id="recallitem"><%=__('Recall Item')%></li>
<li id="renewitem"><%=__('Renew Item')%></li>
<li id="returnitem"><%=__('Return Item')%></li>
<li id="odivider"class="divider"></li>
<li id="guestoffer"><%=__('Guest Offer')%></li>
<li id="shareitem"><%=__('Share Item')%></li>
<li id="manageoffers"><%=__('Manage Offers')%></li>
</ul>
</li>
<li id="Discover"class="dropdown">
<%=__('Discover Items')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><%=__('Discovery Map')%></li>
<li><%=__('Send a Request')%></li>
<li><%=__('Available Items')%>
</li>
</ul>
</li>
<li id="Message" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Private Messages')%></li>
</ul>
</li>
<li id="Overview"class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Data Analysis')%></li>
<li><%=__('User Activity Logs')%></li>
<li class="divider"></li>
<li><%=__('Remove Offers')%></li>
<li><%=__('Students Request')%></li>
</ul>
</li>
<li id="myAccount" class="dropdown">
<%=__('My Account')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li id="youroffers"><%=__('Your Offers')%></li>
<li id="reservations"><%=__('Reservations')%></li>
<li id="divider"class="divider"></li>
<li id="profile"><%=__('My Profile')%></li>
<li id="invite"><%=__('Invite Friend')%></li>
<li ><%=__('Log out')%></li>
</ul>
</li>
</ul>
<!-- add search form -->
<div id="WithHolding" class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent">
<button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design
<!DOCTYPE html>
<html lang="en">
<% include ./MyLayout/header %>
<body>
<% include ./MyLayout/navbar %>
<script src="/javascript/ClientJs/RenewItem.js"></script>
<div class="container">
<div class="row-fluid">
<div id="content" class="span12">
<div class="row-fluid">
<form class="form-horizontal span12" method="post" action="RenewItems">
<fieldset>
<legend><%=__('Renew Item')%>
<h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6>
</legend>
<br>
<% if(SuccessMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-success alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Success !')%></strong><%= SuccessMessage %>
</div>
</div>
</div>
<% } %>
<% if(ErrorMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Error!')%></strong> <%= ErrorMessage %>
</div>
</div>
</div>
<% } %>
<div class="row-fluid">
<div class="span8">
<div class="control-group">
<label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label>
<div class="controls">
<input id="BookingNumber" name="BookingNumber" type="text" value="" required=""
title="<%=__('Please enter Booking number for the transaction')%>"
placeholder="<%=__('Booking Number')%>">
</div>
</div>
<div class="control-group">
<label for="ItemName" class="control-label"><%=__('Item Name:')%></label>
<div class="controls">
<input type="text" id="ItemName" name="ItemName" value="" required=""
title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>">
</div>
</div>
<div class="control-group">
<label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label>
<div class="controls">
<input id="StudentID" name="StudentID" type="text" value="" readonly required=""
title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>">
</div>
</div>
<div class="control-group">
<label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label>
<div class="controls">
<input id="ItemNumber" name="ItemNumber" type="text" value="" readonly
required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>">
</div>
</div>
<div class="control-group">
<label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label>
<div class="controls">
<input type="text" id="StudentEmail" name="StudentEmail" value=""
placeholder="<%=__('Student/Guest Email')%>" readonly required=""
title="<%=__('Student/Guest Email ID cannot be empty')%>">
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label>
<div class="controls">
<input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly
placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Duration:')%></label>
<div class="controls">
<select Id="Duration" name="Duration" class="form-control">
<option value="1 week"><%=__('1 week')%></option>
<option value="2 weeks"><%=__('2 weeks')%></option>
<option value="3 weeks"><%=__('3 weeks')%></option>
<option value="4 weeks"><%=__('4 weeks')%></option>
</select>
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label>
<div class="controls">
<input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>"
readonly required="" title="<%=__('Please specify duration of extension')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Remarks:')%></label>
<div class="controls">
<textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required=""
title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="reset" class="btn btn-default"><%=__('Cancel')%></button>
<button type="submit" class="btn btn-primary"><%=__('Renew')%></button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<% include ./MyLayout/footer_bottom%>
</html>

What about hiding everything first. Suppose your menu items are wrapped in a div or if menu items are in a OL/UL, you can set it up to hide on loading of page:
.menu-wrapper{
display:none;
}
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
//your stuff
}).always(function(){
$(".menu-wrapper").show();//this will toggle display:none
});
});

You are noticing this because of the delay in getting the response from the server.
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
To avoid this, hiding menus during initial loading and showing them once you get the response will be the correct approach.
BTW, I will not prefer to show and hide menu items in the client side. The best option will be to get the list of allowed menu items from the server and rendering in the client side.
Please remember, an user can change the CSS styles to see the hidden menu and he could do operations that are not allowed, unless your server validates each request.
Change your html to render the menus in hidden mode, by adding the css class.
.menu-wrapper {
display:none;
}
<ul id="menu" class="nav">
<li id="home"class="hidden-menu"><%=__('Home')%></li>
<li id="Offer" class="dropdown menu-wrapper">
</li>
<li id="Discover" class="dropdown menu-wrapper">
</li>
<li id="Message" class="dropdown menu-wrapper">
</li>
<li id="Overview" class="dropdown menu-wrapper">
</li>
<li id="myAccount" class="dropdown menu-wrapper">
</li>
</ul>
Then after you get the permissions from the server, enable the nodes.
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
// If the menu should be shown then remove the css class
if(data === 'Admin') {
$("#Discover").removeClass('hidden-menu');
}
})
});