I am creating a little shop system for myself (learning purpose) using AngularJS and PHP, and I am stuck with the following problem:
I created a dynamic shopping cart and filled it on ng-click with some information of the clicked object in the list. I saved to a scope variable called scope.cartwhich is then shown by ng-repeat within the shopping cart table. I then also automatically created input fields which are hidden to pass them to the $_POST variable after submit. Because my POST is empty after submitting, I tried to use the ng-submit directive to create a json file out of the scope.cart array at the time the formula is sent, so I can then call it via PHP. But this doesn*t work either. Now I am stuck and have no clue what the problem could be.
However I think that the input field is empty even though the browser adds new fields dynamically in the source code, and when I hit submit there is the state of the empty cart.
Whats the best way to solve my problem and send the AngJS data to the server?
navApp.controller('MainCtrl', ['$scope', '$http', function (scope, http){
scope.submit = function() {
var time = Math.floor(Date.now() / 1000);
http.post('../dampfen/cfg/orders/cart_' + time + '.json', scope.cart).then(function(data) {
alert("Order successfully transferred!");
});
}
}]);
<div class="panel-body">
<table class="table table-hover">
<thead><tr><th colspan="4">Bestellung</th></thead><tbody>
<form name="orderForm" method="POST" ng-submit="submit()" action="index.php?checkout">
<tr ng-repeat="item in cart">
<input type="hidden" name="order[]" value="{{item.id}}" />
<td>1x</td><td><strong>{{item.name}}</strong></td><td>{{item.preis}} <span class="glyphicon glyphicon-euro"></span></td><td><button class="btn btn-xs btn-danger" ng-click="removeFromCart($index)"><span class="glyphicon glyphicon-remove"></span></button></td></tr>
</tbody>
</table>
</div>
<div class="panel-footer">
<p class="text-right"><strong>{{cart.sum}} <span class="glyphicon glyphicon-euro"></span></strong></p>
<p class="text-left"><button type="submit" class="btn btn-sm btn-success">Checkout</button> <button type="button" class="btn btn-sm btn-danger" ng-click="deleteCart()">Warenkorb löschen</button></p>
</form>
<form> elements cannot be child nodes of <tbody> elements.
You can have an entire table inside a form. You can have an entire form inside a table cell.
Anything else leads to browser error recovery that can dump the form outside the table leaving the inputs behind.
Use basic QA. Write valid HTML.
Related
If I use this code only <a href works > but I Want name="send" also work at a time(in isset($_POST['send']). but it's not working. so can I do for both cases?
I need to download and also send data to the database at the same time.
<a href="./users/assets/upload/file/<?php echo $result['product_file']; ?>">
<form method="POST" action=" ">
<div class="row" style="background-color: #8CC63F;">
<div class="col-lg-12 dw_text text-center">
<button type="submit" name="send" style="font-size: 30px;">FREE DOWNLOAD</button>
</div>
</form>
</a>
Before submitting the form you will need to correct your HTML. It looks like you are calling a url upon pressing the Free Download button.
To correct the HTML, you can either directly use link's url as the form's action (like this)
<form method="POST" action="./users/assets/upload/file/<?php echo $result['product_file']; ?>">
<div class="row" style="background-color: #8CC63F;">
<div class="col-lg-12 dw_text text-center">
<button type="submit" name="send" style="font-size: 30px;">FREE DOWNLOAD</button>
</div>
</form>
or use jQuery (as you mentioned in your comments) to submit the form to the same url. See an example below,
$.ajax({
type: 'POST',
url: "./users/assets/upload/file/<?php echo $result['product_file']; ?>",
data: $(this).serialize(),
success: function(data) { }
});
To keep the url neat in the above ajax submit, you can keep $result['product_file']; as a hidden field in the HTML. So, when we press the Free Download button, $(this).serialize() will serialize that value too. So, the url's would just looks something similar to this,
url: "./users/assets/upload/file",
In the PHP backend, the retrieval of product_file needs to be slightly ammended to accommodate this new change.
Hope this helps
Thank you
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 have a form with many fields and when I click the submit button, before saving the data in my database, I would like to show a bootstrap modal popup that displays a question to the user. The user can answer "yes" or "no" to the question. In these two cases, the data will be saved in the database. The difference between the "yes" and "no" button is the action.
I get some trouble to manage with this.
I know that Ajax and PHP are required but I do not really know how to do the trick.
A hand would be appreciate.
Sorry for my poor english.
You just need to call the modal when the submit is clicked. Then, do the ajax call based on what the user clicked.
SOme like this:
HTML
//Submit Button
<div class="form-group">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
//Modal to ask for confirmation
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="yes">Yes</button>
<button type="button" data-dismiss="modal" class="btn" id="no">No</button>
</div>
</div>
Then, you just need to add listeners to each button and do the corresponding action.
Javascript
<script type="text/javascript">
//If user submits, show modal.
$("#submit").click(function() {
showModal();
});
//If user selects Yes, do action A.
$("#yes").click(function() {
doAjax_A();
});
//If user selects No, do action B.
$("#no").click(function() {
doAjax_B();
});
</script>
All thats left is to do your Ajax Call.
More on: http://api.jquery.com/jquery.ajax/
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).