I have a form that come with action like this.
<form action="edit.php" method="post">
.
.
<button class="btn btn-success" name="submit_mult" type="submit">Edit</button>
</form>
I need this to use for first button, and now I want to use same form for second button this time is for delete, but is because this form action using for "edit.php", so I use formaction="delete.php,this will This overrides the action attribute of the form when you click on that button.
But I want the second button to be show outside of form not inside of form, and I tried to figure out how that works..
Wrote like this...
<div id="delete"><button class="btn btn-success" formaction="Multi_Edit/delete.php" name="submit_mult" type="submit">delete</button></div>
Is not working when I put this button in outside of form, but is works fine inside of form.
How can I solve this to make works that button outside of forms with formaction="delete.php" if this works fine with jquery, how to write that in jquery!
try this
put and id to the form
<form action="edit.php" method="post" id="myForm" >
.
.
and an id to the button
<div id="delete"><button class="btn btn-success" formaction="Multi_Edit/delete.php" name="submit_mult" id="myDeleteButton" type="submit">delete</button></div>
then via jquery handle the form submit
$("#myDeleteButton").click(function(){
$("#myForm").attr('action','Multi_Edit/delete.php');
$("#myForm").submit();
});
You can use the form attribute, form="theForm":
<form action="edit.php" method="post" id="theForm">...</form>
<div id="delete"><button form="theForm" class="btn btn-success" formaction="Multi_Edit/delete.php" name="submit_mult" type="submit">delete</button></div>
See here: http://www.sitepoint.com/the-html5-form-attribute/
Related
Before i make this question i use javascript method to prevent multiple submit on my blade template. But i know it's client side that still possible to get attack by.
This is my javascript code
<script>
function submitForm(btn) {
// disable the button
btn.disabled = true;
// submit the form
btn.form.submit();
}
</script>
<input id="submitButton" type="button" value="Submit" onclick="submitForm(this);" />
my question is, is there another way to prevent without client side in laravel?
The most straightforward way to guarantee the uniqueness of a form submission (In the sense of stopping someone mashing submit twice) is to generate a random token and storing it in a session AND a hidden field.
If it doesn't match, reject the form, if it does match, accept the form and nuke the session key.
OR
Force Laravel to regenerate a new session token after each time a token is verified correctly. (Easy Way Out)
To achieve this, create a new function tokensMatch() in app/Http/Middleware/VerfiyCsrfToken.php (which will overwrite the inherited one). Something like this:
protected function tokensMatch($request)
{
$tokensMatch = parent::tokensMatch($request);
if ($tokensMatch) {
$request->session()->regenerateToken();
}
return $tokensMatch;
}
In case you validate the form and the validation fails, the old data will be passed back to the form. So you need to make sure not to pass back the old token by adding _token to the $dontFlash array in app/Exceptions/Handler.php
protected $dontFlash = ['password', 'password_confirmation', '_token'];
Step 1: write a class name in the form tag Exp: "from-prevent-multiple-submits"
<form class="pt-4 from-prevent-multiple-submits" action="{{ route('messages.store') }}" method="POST">
#csrf
Step 2:
Write a class in button section
<button type="submit" id="submit" class="btn btn-primary from-prevent-multiple-submits">{{ translate('Send') }}</button>
Step 3:
write this script code
<script type="text/javascript">
(function(){
$('.from-prevent-multiple-submits').on('submit', function(){
$('.from-prevent-multiple-submits').attr('disabled','true');
})
})();
</script>
give id to submit button
<input class="main-btn" id="register" type="submit" value="Make Appointment">
give id to form
<form id="appointment_form" method="post" action="{{route('appointment')}}">
in your js add these
$('#appointment_form').on('submit', function () {
$('#register').attr('disabled', 'true');
});
Step 1: give id to form
<form action="{{ route('web.reports.store') }}" method="POST" enctype="multipart/form-data" id="kt_stepper_form">
Step 2: give id or add class to submit button
<button type="submit" class="btn btn-primary submit-btn" data-kt-stepper-action="submit">
<span class="indicator-label">
Submit
</span>
<span class="indicator-progress">
Please wait... <span
class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
Step 3: and then, you can add some jquery script like this
$('#kt_stepper_form').on('submit', function(){
$('.submit-btn').attr('disabled', true);
$('.indicator-label').hide();
$('.indicator-progress').show();
});
with code above, button will be disabled and show indicator progress when user clicked the button
I want to submit my form in multiple tab using only one button but it is not working.I already put the button inside the form but it is also not working.Can I know what the solution to this problem?
<form method="POST">
<ul class="tab">
<li>DOCTOR'S DIAGNOSIS</li>
<li>OTHERS</li>
</ul>
<div id="diagnosis" class="tabcontent">Tarikh Penilaian : <input id="test_Date" name ="test_Date" type="date"></div>
<div id="others" class="tabcontent">Masa Penilaian : <input id="test_time" name ="test_time"></div>
<div><button type="submit" name="btn_reg" id="btn_reg"></button></div> </form>
I tried to combine the browse button and submit button together .When the button is clicked , Iam able to select the file.
But the file doesn't get uploaded
This is the form
HTML:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method="post" id="myform" enctype="multipart/form-data">
<input type="file" name="upload" id="upload" style="display:none">
<button id="browse">Upload</button>
</form>
JQuery
$(document).ready(function(){
$("#upload").change(function(){
$("#myform").submit();
});
$("#browse").click(function(){
$("#upload").click();
});
});
Then I submitted the data
PHP :
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$file=$_FILES["upload"]["name"];
$folder='uploads/';
$err=$_FILES["upload"]["error"];
$target=$folder.$file;
$temp=$_FILES["upload"]["tmp_name"];
echo $err;
move_uploaded_file($temp, $target);
}
I got the output as 4 . This means that no file was uploaded .How can i resolve this issue?
There is a easy an elegant way to achieve that.
Add the type="submit" to the button because not all web browser are using "submit" as default button type
Add a form event listener that triggers when "submit" event is raised
Example code:
$(document).ready(function(){
$('#myform').submit(function(e) {
// Remove following two lines in order to perform the submission
// I added the two lines in order to avoid the real submission (Test purposes)
e.preventDefault();
alert('Submitted!')
})
$("#upload").change(function(){
$("#myform").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="example.html" method="post" id="myform" enctype="multipart/form-data">
<input type="file" name="upload" id="upload">
<button id="browse">Upload</button>
</form>
Remember to remove the "preventDefault" and the "alert" lines that I included in order to execute the code snippet without redirect you to another page.
Actually In my form page of Angularjs, have two submit buttons i.e In one field set i have one button for update and another button at the outside of all field sets for submission of whole page.
Code
<form ....... data-ng-submit="Register()">
<fieldset>
............
.............
<div data-ng-submit="update()">
<button type="submit" class="btn btn-success">Update Vehicle</button>
</div>
</fieldset>
<fieldset> .........</fieldset>
</form>
After submission of form to the ctrl
.ctrl(function(){
**we have two methods in it.......**
$scope.update=function(){
}
$scope.register=function(){
}
}
While updating the fieldset it goes to register method and its executes the logic in it.
how to format the data-ng-submit="update()", such that it will call the update() method in Controller
I'm trying to change the form tag below in order to use jQuery. Already, clicking the buttons changes the display from rows to columns and vice-versa but I want to avoid the page refresh. I'm really new at jQuery and can't honestly say what my mistakes are when trying to change it myself.
<form id="rowsToColumns" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<form id="columnsToRows" action="index.php?main_page=specials&disp_order=1" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
I'm also trying for the buttons to call a different stylesheet upon click. This stylesheet is not needed for the display to change from/to rows/columns as I mentioned above. The actual page is written using php as shown below:
<?php $this_page = zen_href_link($_GET['main_page'], zen_get_all_get_params()); ?>
<div id="style_changer">
<?php if($current_listing_style == 'rows') {?>
<form id="rowsToColumns" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="columns"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Column</button>
</form>
<?php } else { ?>
<form id="columnsToRows" action="<?php echo $this_page;?>" method="POST">
<input type="hidden" name="style_changer" value="rows"/>
<button type="submit" class="btn btn-large btn-primary" type="button">Change to Rows</button>
</form>
<?php } ?>
</div>
If the question is "how to change a form in order to use jQuery and avoid the page refresh", then the jquery form plugin is your friend, as it turns any html form into an ajax-powered one.
Simply follow their instructions and you'll get it working in no time (provided your form already works as is).
You can prevent the Default form Submission by preventing the default action on the submit button..
$('button[type=submit]').submit( function(e){
e.preventDefault(); // Stops the form from submitting
});
Well, for a very vague method you can use $.ajax and take advantage of reading the <form>'s pre-existing attributes to decide on submission method and read the elements' values as submissiong data:
$('form').on('submit',function(e){
var $form = $(this);
// submit the form, but use the AJAX equiv. instead of a full page refresh
$.ajax({
'url' : $form.attr('action'),
'method' : $form.attr('type'),
'data' : $form.serialize(),
'success' : function(response){
// process response (make CSS changes or whatever it is
// a form submission would normally do)
}
});
// prevent the normal submit and reload behavior as AJAX is now
// handling the submission
e.preventDefault();
});
However, for this to work you'll need some variation of a stripped-down PHP response just for the purpose of the AJAX request (avoid resending headers, script tags, etc. and just return the raw data that jQuery can use to make a UI decision).