Form refreshes after clicking Submit - html

Both of these methods successfully send the data, but refresh the form (I'm trying to keep it hidden via jquery after clicking submit)
#1) <button type="submit" class="btn btn-info" value="Submit" id="submit">SUBMIT</button>
#2) <input type="submit" class="btn btn-info" value="Submit" id="submit">
Based on other solutions, I tried these 2 approaches. While they don't refresh the form, they don't send the data either.
#3) <button type="submit" class="btn btn-info" value="Submit" id="submit" onclick="return false;">SUBMIT</button>
#4) <input type="submit" class="btn btn-info" value="Submit" id="submit">
Entire code:
<?
if (!empty($_POST)) {
include_once 'form.php';
$message = 'Thank You';
}
?>
-----------
<script>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'other_radio') {
$('#other').show();
} else {
$('#other').hide();
}
});
});
</script>
-----------
<div class ="form-hide">
<form method="post" role="form" id="survey">
<div class="form-group">
<label>How did you hear about us?</label>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="Facebook">Facebook</label>
</div>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="Online Ad">Online Ad</label>
</div>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="TripAdvisor">TripAdvisor</label>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" value="Submit" id="submit" onclick="return false;">
</div>
</form>
<? if ($message): ?>
<div class="text-center alert alert-success">
<?= $message ?>
</div>
<? endif; ?>
</div>
--------------------
<script>
$('#submit').click(function(){
$('.form-hide').hide();
});
</script>
And form.php is for Google Sheets API integration, not sure if I need to include that here?
$client = new Google_Client();
try {
$client->setAuthConfig('account.json');
} catch(Exception $ex) {
exit('account.json not found.');
}
$client->setScopes(['https://www.googleapis.com/auth/drive','https: //spreadsheets.google.com/feeds']); ........

Related

Why are my elements not display after a click event, while the same piece of code works in a different place?

I implemented a button to display an input field after the button has been clicked, I checked that it worked but as I was doing some final debugging, the button doesn't work again. The strange thing is that, the same piece of code works for a different button. Would you please have a look how I can fix the bug? Thanks a lot!
Here is the code for buttons and input field. The button "Change Password" works, the "Reject" button does not.
<div>
#if($user->user_status=="pending")
<a style="float:right" class="btn btn-primary text-right" href="/users/approve_user/{{$user->id}}">Approve</a>
<a style="float:right" class="btn btn-primary text-right" onclick="rejectClick()">Reject</a>
#else
<a style="float:right" class="btn btn-primary text-right" href="/users/delete_user/{{$user->id}}">Delete</a>
<a style="float:right" class="btn btn-primary text-right" onclick="passwordClick()">Change Password</a>
#endif
</div>
<div class="form-group">
<form action="/users/reject_uesr/{{$user->id}}" method="post">
<label for="textInput" class="hide" id="textTitle">Reject Reason: </label>
<input class="form-control hide" name="reject_reason" value="" type="text" id="textInput" placeholder="Please write down the reason to reject this user:" />
<input class="btn btn-primary hide" type="submit" id="textSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<div class="form-group">
<form action="/users/change_password/{{$user->id}}" method="get">
<label for="textInput" class="hide" id="password">New Password </label>
<input class="form-control hide" name="password" value="" type="text" id="passwordInput" placeholder="Please Enter The New Password:" />
<input class="btn btn-primary hide" type="submit" id="passwordSubmit" value="Submit">
{{csrf_field()}}
</form>
</div>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>
Here is the code for script:
<script>
function rejectClick(){
document.getElementById('textTitle').className="show";
document.getElementById('textInput').className="show";
document.getElementById('textSubmit').className="btn btn-primary show";
}
function passwordClick(){
document.getElementById('password').className="show";
document.getElementById('passwordInput').className="show";
document.getElementById('passwordSubmit').className="btn btn-primary show";
}
</script>

How to display datetime-local from database using jquery

I have an event calendar where it includes CRUD. Everything works fine but I couldn't display the start and end date on the edit modal. Previously I used moment.js so I used
$('#ModalEdit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
But due to certain reasons, now I'm using datetime-local function and I'm not sure how to display the date from the database. Or is there any other plugin that I can use to do them? Below is the code:
<script>
$(document).ready(function() {
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit #start').val(event.start);
$('#ModalEdit #end').val(event.end);
$('#ModalEdit').modal('show');
});
}
});
</script>
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<form method="POST" action="editEventTitle.php">
<div>
<label for="title">Activity</label>
<textarea id="title" name="title></textarea>
</div>
<div>
<label for="start">Date and Time</label>
<input type="datetime-local" name="start" id="start">
</div>
<div>
<label for="end">End date</label>
<input type="datetime-local" name="end" id="end">
</div>
<div class="checkbox">
<label class="text-danger"><input type="checkbox" name="delete"> Delete event</label>
</div>
<input type="hidden" name="id" class="form-control" id="id">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success ">Save changes</button>
</div>
</form>
</div>

Html Form not passing image file name to laravel controller

Laravel Blade Form not passing image . it comes out null but other types are passed.
this is the form;
<div class="modal-body">
<form method="POST" action="{{route('slide.store')}}" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" placeholder="Enter Slide Title" name="name">
</div>
<div class="form-group">
<label for="name">Description</label>
<input type="text" class="form-control" placeholder="Enter Slide Description" name="description">
</div>
<div class="form-group">
<label for="name" >Image</label>
<input type="file" name="image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="submit">Save</button>
</div>
</form>
</div>
this is the controller store function;
public function store(Request $request)
{
return $request->all();
$product = New Slide($request->except(['image']));
$product->save();
//store image
if($request->hasFile('image') && $request->file('image')->isValid()){
$product->addMediaFromRequest('image')->toMediaCollection('images/slides');
}
return redirect("slide/index/{$product->id}")->with('success', 'New Slide Added.');
}
and this is the route;
Route::resource('slide', 'SlideController');
I have included the enctype="multipart/form-data" already. I cant see what am doing wrong. Any help will be appreciated.

Close Popup modal after form is valid(all validation) in angular 4

we used data-dismiss in html form it's working fine. but the modal close every time when click submit button weather form is valid or invalid
Html code
<form #AddAirlineuser="ngForm">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CREATE PROFILE</h4>
</div>
<div class="modal-body">
<label>Name</label>
<p><input type="text" name="name" class="form-control" aria-label="..." ngModel></p>
<label>Email</label>
<p><input type="text" name="email" class="form-control" aria-label="..." ngModel></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="submit" class="btn btn-primary" (click) = "Btn_AddNewAirline(AddAirlineuser.valid,AddAirlineuser.value)">Submit</button>
</div>
</form>
TypeScript code
Btn_AddNewAirline(formstatus: any,data:any){
let AirlineData: any = {
name: data.name,
email: data.email
};
if(formstatus){
// TODO code form status is valid
}
}

button inside form should not submit form

in my form tag i have two buttons named SIGNIN and SIGNUP and form should be submit if SIGNIN button press. and if SIGNUP button press it should redirect to url given in anchor tag below but it always submitting the form. please help me.
<form action="controllers/user/vauth.php" method="post" role="form" class="userLogin" style="padding:20px;">
<div class='alert alert-danger' id='errorLabel' style="display:none;"></div>
<?php
if(isset($_SESSION['error'])) {
echo "<div class='alert alert-danger' id='errorLabel'>";
foreach($_SESSION['error'] as $error) echo "<p><b>".$error."</b></p>";
echo "</div>";
unset($_SESSION['error']);
}
if(isset($_SESSION['message'])) {
echo "<div class='alert alert-success'>".$_SESSION['message']."</div>";
unset($_SESSION['message']);
}
?>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="vemail" id="vemail" class="form-control" placeholder="Enter Email" value="<?php if(isset($_SESSION['values'])) echo $_SESSION['values']['email']; ?>">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="vpassword" id="vpassword" class="form-control" placeholder="Enter Password">
</div>
<div class="form-group">
Forgot Password ?
</div>
<button type="submit" class="btn btn-default" name="vsubmit">LOG IN</button><button class="btn btn-success" name="signup" style="float:right;">SIGN UP</button>
</form>
Add type="button" to your signup button