HTML - PHP UPDATE Database when button is clicked - javascript

I have html page that has several button. I want to update my database column when I click a button.
In index.html
<form action="db.php" method="post">
<button type="submit" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak</button>
<button type="submit" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak</button></form>
And it looks like that
http://prntscr.com/fa5eba
My db table Webtek
http://prntscr.com/fa5ffl
What I want is to update 'birinci_lamba' to 1 when 1_y is clicked and update 'birinci_lamba' again to 0 when 1_k is clicked.
So, what should be my db.php page ? Or any other advise to do that ?

You use a from-tag, so you should use <input.. instead of <button... You seem to use bootstrap and <input class="btn btn-danger" /> should also work.
Then, you need to give your inputs a name attribute:
<form action="db.php" method="post">
<input type="submit" name="1_y" id="1_y" class="btn btn-success">1.Lambayı Yeşil Yak />
<input type="submit" name="1_k" id="1_k" class="btn btn-danger">1.Lambayı Kırmızı Yak /></form>
Your db.php file could look like that:
<?php
if(isset($_POST['1_k'])){
mysql_query("..."); //your update-query
} elseif(isset($_POST['1_y']){
mysql_query("..."); //your other update-query
}

Related

Checkbox inserted via append with javascript does not post data

So I have this code in javascript wherein it inserts data into a table within a form input. Whenever i press on submit, it does nothing.
Javascript
<script>
$('document').ready(function() {
$('.addtag').click(function() {
var inputVal = document.getElementById("catinput").value;
$("#tbl").append('<tr><td><input type="checkbox" class="cb" id="'+inputVal+'" name="usertags[]"
value="'+inputVal+'"></td><td> <label for="'+inputVal+'">'+inputVal+'</label><br/></td></tr>');
});
})
</script>
html
<form method="post" action="publishchapter.php" id="contentform" runat="server" enctype="multipart/form-data">
<button type="submit" id="draft" formaction="chapterpreview.php" ><?php echo $bid; ?>Preview</button>
<button type="submit" id="publish" name="submit" value="Submit" >Publish</button>
<span> Tags</span><br/>
<input id="catinput"/> <button type="button" class="addtag">Add</button><br/>
<div class="c1f">
<div class="c1"><table id="tbl" class="AvailableGroupLab availGrpLabs avalLabs">
</table>
</div>
</div>
</form>
All other inputs placed within the form does post but for some reason, any checkbox added to the table does not put out any post data
Here is the live website. Sample website
edit: This one does equate to adding or appending a new row to a table. The code here works already in adding a new row to the table via javascript. But once it is posted to another page, it does not post data whatsoever and it is just blank.

Popover for buttons in a foreach loop PHP

I have a little problem. After some tests and searching work I thought, I ask my questions.
I have a <form> in a for each loop. and for every Button (its a basket button that puts a product in the basket) I reload the page, but before the refresh, I want to get a little popover that shows that something is done. I thought the best thing should be a Popover.
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="right" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
This is my form and my JS looks like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
I get the Popover but only for the 1st value/button in my for each loop
How can I fix this and get the Popover be working for all buttons?
Below is a screenshot of how it looks like.
my foreach loop:
[{foreach from=$myArray item=_product name=_sProduktliste}]
...some template code to show article, price, img ....
<div class="col-12" style="z-index:10;">
[{oxhasrights ident="TOBASKET"}]
<form action="[{$oViewConf->getSelfActionLink()}]" method="post" class="form-inline">
<input type="hidden" name="fnc" value="tobasket_alsobought">
<input type="hidden" name="aproducts[[{$nKey}]][am]" value="1">
<input type="hidden" name="aproducts[[{$nKey}]][aid]" value="[{$_product->oxarticles__oxid->value}]">
<input type="hidden" name="aproducts[[{$nKey}]][anid]" value="[{$_product->oxarticles__oxid->value}]">
<button style="margin:3px auto;border:1px solid #080;border-radius:.25rem;background-color:white;" data-toggle="crossSell_popover" data-trigger="focus" data-content="[{oxmultilang ident="WIDGET_NEWBASKETITEMMSG"}]" data-placement="bottom" type="submit" class="btn btn-info basket" title="[{oxmultilang ident="DETAILS_ADDTOCART"}]"><i class="simg simg-shopping-cart" style="margin-right:0;display:inline;"></i></button>
</form>
[{assign var="nKey" value=$nKey+1}]
[{/oxhasrights}]
</div>
</div>
[{if $nKey >= 12}]
[{php}]break;[{/php}]
[{/if}]
[{/if}]
[{/foreach}]
You need to adapt your jquery script to apply it on multiple element.
Check the answer from here:
Jquery matching multiple elements with same id/class
i solved it.
Marat his answer helped me.
i changed :
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover("max-width", "80%");
});
</script>
to
<script>
window.onload = function(){ $('[data-toggle="crossSell_popover"]').popover() };
</script>
i also changed the name to "crossSell_popover" to avoid issues with other functions in the shop.
and # the bottom i use
[{oxscript add="$('[data-toggle=\"crossSell_popover\"]').popover();"}]
to add the js to the base template.
Thanks a lot have a nice day

Multiple submit buttons in angular2 form

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>
Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.
You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.
i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

Input field with two buttons

I have a form with one input field, but two buttons. The idea is to check in or out with a code. The process comes to the php file, where it ends with just a blank page. What´s wrong?
EDIT
I changed "btn_in" to "inputAnst_nr" And now it works to reg in. BUT, how to i fetch wich button is pressed?
HTML
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post" action="php/usr_time_reg.php">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in" class="btn btn-lg btn-info primary col-sm-offset-1" type="submit">In</button>
<button id="btn_out" name="btn_out" class="btn btn-lg btn-danger primary col-sm-offset-1" type="submit">Ut</button>
</div>
</form>
JS
$(document).ready( function () {
$("#btn_in").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
$("#btn_out").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
});
PHP
//Check if POST is empty
if(!empty($_POST)){
//Check if POST is "inputAnst_nr"
if(!empty($_POST['inputAnst_nr'])){
//Put POST_btn_in in variable
$posted_anst_nr = $_POST['inputAnst_nr'];
You could just use the same name attribute value for both buttons, just make sure you designate the appropriate value. Example:
<?php
if(isset($_POST['btn_in_out'])) {
$status = $_POST['btn_in_out']; // In or Out depending on which one you clicked
echo $status;
}
?>
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in_out" type="submit" value="In">In</button>
<button id="btn_out" name="btn_in_out" type="submit" value="Out">Ut</button>
</div>
</form>
Sample Output

Reset Form / remove error classes from jQuery validate

i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.
This is the button looks like:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
And the JS-Code in my "$(document).ready-function" is:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Your Updated Fiddle
JS Update
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
For bootstrapvalidator, this might useful when the form being display via bootstrap modal,
$("#editModal").on('hidden.bs.modal', function () {
//Removing the error elements from the from-group
$('.form-group').removeClass('has-error has-feedback');
$('.form-group').find('small.help-block').hide();
$('.form-group').find('i.form-control-feedback').hide();
});
#J Santosh answer worked for Bootstrap 3, great work.
For Bootstrap 4 I have done following changes:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
Simply have to change the class names. Hope it helps!
I'd reset the form by just using an input[type="reset"] (no jQuery required)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Regards

Categories

Resources