We Keep Coding

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?

My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

Are you sure want to delete?

I have on my delete function a message for confirmation of delete when i put ok nothing is done
Function from controller
public function destroy($id)
{
$client =client::find($id);
$client->delete();
return redirect('client');
}
view client
<form action="{{url ('client/'.$client->id)}}" method="post">
{{csrf_field()}}
{{method_field('DELETE')}}
<a href="{{url('client/'.$client->id.'/show')}}"
class="btn btn-default btn-sm">Details</a>
<a href="{{url('client/'.$client->id.'/edit')}}"
class="btn btn-primary btn-sm">Editer</a>
<a class="btn btn-danger btn-sm" title="Delete"
href="javascript:if(confirm('Are you sure want to
delete?')) $('#frm_{{$client->id}}').submit()">
Supprimer
</a>
</form>

in your route file just change like this
Route::get('/client/{id}/delete', 'ClientController#destroy');
in your view
Delete

$('#frm_{{$client->id}}').submit() is a jQuery code, are you sure your page have jQuery properly loaded?
Better use plain javascript: document.getElementById("myForm").submit()

i think you forget to add id attribute for you form
<form action="{{url ('client/'.$client->id)}}" id="frm_{{$client->id}}" method="DELETE">

This can be done easily by:
<a onclick="if(confirm('Are you sure you want to delete this item?')){ deleteFunction() };">Delete</a>

Raising an Ajax event after knockout rendering is done? (explained with screenshots)

<div data-bind="style: { display: isShortlisted() === false ? 'inline-block' : 'none'}">
<form id="shortlistForm" action="#MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxShortlist(Model.Application))" method="post" style="display:inline;">
#Html.AntiForgeryToken()
<input type="hidden" name="ApplicationKey" value="#Model.Application.ApplicationKey" />
<button type="submit" class="btn-act jui-tooltip" title="Shortlist">
<i class="fa fa-2x fa-star"></i>
</button>
</form>
</div>
<div data-bind="style: { display: isShortlisted() === true ? 'inline-block' : 'none'}">
<form id="unshortlistForm" action="#MVC.GetLocalUrl(MVC.HireOrgJobApplication.AjaxUnshortlist(Model.Application))" method="post" style="display: inline;">
#Html.AntiForgeryToken()
<input type="hidden" name="ApplicationKey" value="#Model.Application.ApplicationKey" />
<button type="submit" class="btn-act-active jui-tooltip" title="Remove from shortlist">
<i class="fa fa-2x fa-star" style="color:#f3b700;"></i>
</button>
</form>
</div>
$('form#shortlistForm').ajaxForm(function () {
viewModel.isShortlisted = true;
});
$('form#unshortlistForm').ajaxForm(function () {
viewModel.isShortlisted = false;
});
I have a code for a button that "shortlists" an applicant.
To briefly explain, my intention is to turn the "shortlistForm" button to
"unshortlistForm (which means it's already shortlisted)" button when it's clicked.
Please look at the attached screenshot:
So the start which looks like this
should turn like below when it's clicked.
when I check my network status on google chrome, it successfully "posts" to the correct link.
But the problem is, I have to REFRESH it to see the changed star.
Right now when I click the button, it gives me
just a page with 'true' written.
I want it to happen immediately without giving me that page, or having me refresh the page to see the change.
I am assuming this is happening because I cannot render Ajax-forms before knockout rendering is done. How can I make the ajax to form after the knockout is generated?
Please help !!

Making javascript work after dynamically adding html

I have a file upload button with auto upload enabled as follows:
<form id="fileupload" action="home/uploadprofilepic" method="POST" enctype="multipart/form-data">
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files">
</span>
</form>
$(document).ready(function()
{
$("input[name=files]").change(function() {
$(this).closest("form").submit();
});
});
However, I want to dynamically insert this as html. I need to add the autoupload javascript too. This is what I have so far :
$('#uploadPicId').popover({
title : 'Edit Profile Picture', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<form id="fileupload" action="home/uploadprofilepicmeta" method="POST" enctype="multipart/form-data">'+
'<span class="btn btn-success fileinput-button">'+
' <i class="icon-plus icon-white"></i>'+
' <span>Add files...</span>'+
' <input type="file" name="files">'+
'</span>'+
'</form>'
});
I need to add javascript to make the autoupload work. Is there any way to do this? I am pretty lost.
Thanks.

Change your above js to be like this instead:
$(document).ready(function()
{
$("body").on("change", "input[name=files]", function() {
$(this).closest("form").submit();
});
});
The key difference is your setting up the event listener on the entire body and if the event was launched from the given input, fire your function no matter if the html was added dynamically or not.

How to simulate the action in a form when submit?

first: always is the same action.
two: the form has multiple "CSS SUBMITS" like
<form action="/myaction" method="POST">
<a id="foo1" name="foo1" href="#" role="form_button">submit1!</a>
<a id="foo2" name="foo2" href="#" role="form_button">submit2!</a>
<a id="foo3" name="foo3" href="#" role="form_button">submit3!</a>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
<script>
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('form').submit(); } );
</script>
how can I do in /myaction this:
if ($_POST['foo1']) { action; return; } // :(
if ($_POST['foo2']) { action; return; } // :(
if ($_POST['foo3']) { action; return; } // :(
if ($_POST['canfoo']) { action; return; } // THIS WORKKKKKSS!!
How can I do to foo1, foo2, foo3 to work?
(I use jQuery like:
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('#actiontodo').val(this.id); $('form').submit(); } );
), then, in the other side (action),
I do:
IF ($_POST['ACTIONTODO'] == "foo") { action; return; }
BUT, I DON'T LIKE THIS SOLUTION! I WANT THE <A behave as well as <input type="submit"
Thank you very much for your help!

You shouldn't give priority to visual over usability, that's a huge mistake. Anyway, you can stylize any button/input to suit your needs without any problem, just grab a good CSS tutorial.
Don't reinvent the wheel.

You can use any element you want to trigger a .submit() event.
http://api.jquery.com/submit/
For example, this form:
<form id="targetForm" action="/myaction">
<input type="text" value="Oh hai!"/>
</form>
Can be submitted by the following jQuery:
$('#targetForm').submit();
However, you can style buttons and input fields without too much trouble in CSS.
Update:
I'd agree with Ben that you should reconsider doing form submissions this way.
For multiple submission triggers..
So if you have multiple triggers you need a hidden field to record this information for POST.
Something like this will do the trick...
<form id="targetForm" action="/myaction">
<input type="text" name="myText" value="Oh hai!"/>
<input type="hidden" name="whichTrigger" value="default" />
</form>
And then each trigger would do ...
$('#whichTrigger').val("myTriggerName"); // A different value for each one of course.
$('#targetForm').submit();

I solved this problem as is:
<form action="/myaction" method="POST">
<div id="foo1" name="foo1" href="#" role="form_button"><button type="submit">submit1!</button></div>
<div id="foo2" name="foo2" href="#" role="form_button"><button type="submit">submit2!</button></div>
<div id="foo3" name="foo3" href="#" role="form_button"><button type="submit">submit3!</button></div>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
!!!!!!!!!!!!!!!!!!! THANKS!