I have a form that has a text field that is a required entry for one(1) of my two(2) buttons. The first(1st) button applies a code, in the text field, to the products in the cart section of my store. The second(2nd) removes all codes from all products in the cart section.
What's the best way of going about this?
Thx.
<div id="cart-coupon-menu" class="coupon-menu-hide">
<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/cart/couponPost') ?>" method="post">
<div class="discount">
<div class="discount-form">
<input type="hidden" name="remove" id="remove-coupone" value="0" />
<div class="input-box">
<input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->escapeHtml($this->getCouponCode()) ?>" placeholder="Enter a Coupon or Promo Code" autocomplete="off"/>
</div>
<div class="buttons-set">
<button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="discountForm.submit(false)" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
<button type="button" title="<?php echo $this->__('Cancel Coupon') ?>" class="button" onclick="discountForm.submit(true)" value="<?php echo $this->__('Cancel Coupon') ?>"><span><span><?php echo $this->__('Cancel Coupon') ?></span></span></button>
</div>
</div>
</div>
</form>
</div>
The above form will be serialized and set to a controller via AJAX and an appropriate response will be returned.
When the input box is null I want the input box to act as a required field and disallow submission via the first button. However, when it is null the second button should still allow for submission. When text is entered into the input box they both behave normally.
Currently i'm attempting to do something like this:
<script type="text/javascript">
//<![CDATA[
var discountForm = new VarienForm('discount-coupon-form');
discountForm.submit = function (isRemove) {
if (isRemove) {
$('coupon_code').removeClassName('required-entry');
$('remove-coupone').value = "1";
} else {
$('coupon_code').addClassName('required-entry');
$('remove-coupone').value = "0";
}
if(something where I identify if it is required and the field is null){return null;}
else{continue with ajax call;}
I think it's just a simple javascript something like:
<button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="isValid() ? discountForm.submit(false) : handleInvalid()" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
I used a ternary operator in there... so basically it says if isValid() returns true, execute: discountForm.submit(false) otherwise execute: handleInvalid().
Then the javascript functions would be:
function isValid() {
var couponCode = document.getElementById('coupon_code').value;
return /* whatever logic you want here... */
}
function handleInvalid() {
// do whatever you want to the coupon_code input to indicate it's required and pop up an error message
alert("Please enter a coupon code!");
}
You should give knockout a try. It updates your view(html) according to changes in your js code. See this example.
Related
I have a problem in automating a form with hidden inputs in PHP. Basically I'm doing an input for a barcode scanner where the user will input the barcode and it will auto-submit, just like in a cash registry.
The conflict which I think is the cause of the problem is because of a conditional form. Here is a snippet:
<form method="post" id="form1">
<div class="products">
<input type="text" name="code" class="form-control" autofocus required onchange="submit()" />
</div>
</form>
<?php
$query = 'SELECT * FROM product WHERE PRODUCT_CODE='.$code.' GROUP BY PRODUCT_CODE ORDER by PRODUCT_CODE ASC';
$result = mysqli_query($db, $query);
if ($result):
if(mysqli_num_rows($result)>0):
while($product = mysqli_fetch_assoc($result)):
?>
<form id="form2" method="post" action="pos.php?action=add&id=<?php echo $product['PRODUCT_CODE']; ?>" >
<input type="hidden" name="quantity" class="form-control" value="1" />
<input type="hidden" name="name" value="<?php echo $product['NAME']; ?>" />
<input type="hidden" name="price" value="<?php echo $product['PRICE']; ?>" />
<input type="submit" name="addpos" style="margin-top:5px;width: 462px" class="btn btn-info" value="Add"/>
</form>
<?php
endwhile;
endif;
endif;
?>
<script>
function submit() {
document.getElementById("form1").submit();
}
document.getElementById("form2").submit();
</script>
The data from form1 has no trouble auto-submitting, then the form2 will auto-submit but nothing happens. I need help on how can I make form2 auto-submit correctly too. I have tried different event handling for form2 but nothing happens. I only know a little bit of javascript so that's just how my script turned out.
Thank you, Programming kings!
Because the second form is inside the while loop, if there are multiple results there will be multiple forms with the same id = "form2".
You need an increment variable $incrm = 2 inside the loop,
form id='form<?php echo $incrm;?>',
with $incrm++ before ending it. I also recommend to add ann onchange event to the last input 'price' ; onchange = submit(this).
function submit(inp) {
inp.parentElement.submit();
}
the JS alert need to appear whenever i'm submitting the box,the alert message need to consists an value which is get from the input tag,the value of the input tags are fetched from mysql database using php,whenever i'm submitting the form the JS alert displays an message with the first value of the table,whenever i'm submitting the remaining form,also it gives an first value from the table without giving the related values
HOW to get it?
my code is below, check it. php while loop with html tags
<?php
include "connection.php";
$sqlll="SELECT * FROM feedback";
$result=mysqli_query($conn,$sqlll);
$count=mysqli_num_rows($result);
if($count > 0)
{
while($row=mysqli_fetch_assoc($result))
{
?>
<div class="msgshare">
<div class="contentt">
<div class="userr">
<h3><i class="fa fa-user-circle"></i><?php echo $row["username"] ?></h3>
<h5><?php echo $row["img_location"] ?></h5>
</div>
<div class="imgg">
<img src="../images/feedback/<?php echo $row["img_file"] ?>" height="400px" width="400px">
</div>
<div class="likes">
<form class="likeform" onsubmit="likeso()" method="POST" action="likes.php">
<input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">
<?php
$imga=$row['img_file'];
$sql="SELECT * FROM likes WHERE `username`='$user11' AND `image`='$imga' AND `likes`='true';";
$reslt=mysqli_query($conn,$sql);
$row1=mysqli_num_rows($reslt);
$sql3="SELECT * FROM likes WHERE `image`='$imga';";
$rslt=mysqli_query($conn,$sql3);
$count=mysqli_num_rows($rslt);
if($row1 > 0)
{
echo '<button style="cursor:pointer;" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="fa fa-heart pink"></i></button> '.$count.' likes';
}
else
{
echo '<button style="cursor:pointer;" class="willlike" name="like" type="submit" id="likepost" class="like-btn"><i id="empty" class="far fa-heart"></i></button> '.$count.' likes';
}
?>
</form>
</div>
<div class="descriptionn">
<p><span class="desc">DESCRIPTION : </span><?php echo $row["img_description"] ?></p>
</div>
</div>
</div>
<?php
}
}
else
{
echo "<p>There is no more Feedbacks are shared...</p>";
}
?>
the following is an JAVASCRIPT code for an onsubmit event.
<script>
function likeso()
{
var iage=document.querySelector('input').value;
var val="imagge=" + iage;
alert(val);
}
</script>
If you change the function call by adding event
<form class="likeform" onsubmit="likeso(event)" method="POST" action="likes.php">
And alter the function itself to use the event
function likeso(e)
{
var iage=e.target.querySelector('input').value;
var val="imagge=" + iage;
alert(val);
}
Also, you cannot duplicate ID values so
<input type="hidden" id="imgile" name="imaggg" value="<?php echo $row["img_file"] ?>">
should be changed to ( remove ID, it's not needed )
<input type="hidden" name="imaggg" value="<?php echo $row["img_file"] ?>">
The same holds for any element to which you assign an ID - it MUST be unique. If the purpose of the ID is to facilitate easy selection in Javascript using document.getElementById then having duplicate IDs makes a nonsense of that because which element should it select? Generally you can achieve most tasks without using an ID so in many cass it is best to remove them - especially when added in a loop.
I am using this table and trying to echo the "branchid" in an alert
There are two tables:
orders_address.php
<?php
session_start();
require_once('orders_address.vc.php');
?>
Here is a snippet of my for each table, the 'branchid' and the assign button is only the concern here'
<td>
<a href="order_address.vc.php<?php echo '?branchid='.$rowAddress['branchid']; ?>">
<input type="submit" class="btn button-color-blue font-color-white full_width" name="assign" value="ASSIGN">
</a>
</td>
<td class="table-text-center">
<?php
echo($rowAddress['branchid']);
?>
</td>
orders_address.vc.php
Below is the code when the button is clicked
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN')
{
$branchid = $_GET ['branchid'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
Currently I am getting an undefined index and the alert box is empty. the $_GET ['branchid'] does not seem to retrieve the column I want.
Thank you for any help.
<td>
<?php
$branchid = isset($rowAddress['branchid']) ? $rowAddress['branchid'] : 0;
?>
<form method="POST" action="order_address.vc.php">
<input type="hidden" name="branchid" value="<?php echo $branchid ?>" />
<input type="hidden" name="assign" value="ASSIGN" />
<input type="submit" value="ASSIGN" class="btn button-color-blue font-color-white full_width" />
</form>
</td>
<td class="table-text-center">
<?php echo $branchid; ?>
</td>
orders_address.vc.php:
if(isset($_POST['assign']) && $_POST['assign'] === 'ASSIGN') {
echo '<script type="text/javascript">';
echo 'alert('.$_POST['branchid'].')';
echo '</script>';
}
I am not sure why you have a form submit button wrapped around an anchor tag. When the submit tag is clicked I honestly don't know which one takes precedence, the anchor tag or the form submission.
Assuming that you have the table wrapped in an HTML form and a POST request is made. I suggest adding the branchid as the value of the submit button. Ex:
<input type="submit" class="..." name="assign" value="<?=$rowAddress['branchid']?>">
In receiving end you can then get branchid from $_POST['assign']
if (! empty($_POST['assign']))
{
$branchid = $_POST['assign'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
Its because you have $_GET['branchid'] in POST handle
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN') ...
But you send it as normal GET a href link so condition with POST is never true.
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN'){
$branchid = $_GET ['branchid'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
HTML should be as below:
<form action="order_address.vc.php" method="POST">
<input type="hidden" name="branchid" value="<?php echo $branchid ?>" />
<input type="submit" name="assign" value="ASSIGN" />
</form>
I am facing an issue while validating the input fields inside the form using PHP and JavaScript. I am providing my code below.
<form autocomplete="off" action="<?php echo base_url() . $tourModule; ?>/search" method="GET" role="search" onSubmit="return checkform();">
<input type="text" data-module="<?php echo $module; ?>" class="hotelsearch locationlist<?php echo $tourModule; ?>" placeholder="Tourist Destination" value="<?php echo $_GET['txtSearch']; ?>">
<input type="hidden" id="txtsearch" name="txtSearch" value="<?php echo $_GET['txtSearch']; ?>">
<div class="col-md-12 form-group go-right colspecing col-xs-12 submit text-center">
<button type="submit" class="btn btn-lg pfb0 loader">
<?php echo trans( '012'); ?> </button>
</div>
</form>
<script type="text/javascript">
function checkform(){
console.log('validate form');
var textname=document.getElementById('txtsearch');
if (textname.value=='' || textname.value==null) {
alret('Please select Tourist Destination.');
return false;
}else{
return true;
}
}
</script>
Here I need before submit the form the input field will validate but in my case when I am clicking on submit button checkform function is not executing at all. I need to check that validation.
There is a typo in your code. Change alret to alert
let's say I have a code like that:
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
Many forms. In this example 3. (It could be more or less)
How can I trigger this form (to send ist with AJAX)? This form is live-AJAX generated content and have a dynamic ID. I did not now the specific ID of the form to trigger like:
$("#myform").submit(function(event) {
How, can I handle this?
We could use some more information to help further, for example, is the text in this form (any of it) unique when compared to other forms? You can target it by basically anything and even combine these conditions. For example, if the action attribute is unique you could always do something like this (untested):
//if the form id starts with 'myform', perform a function on submit
$("form[id^='myform']").submit(function(event) {
//if that form's 'action' attribute is 'bla.php', then do something
if($('form').attr('action', 'bla.php')){
//your code here
}
});
EDIT:
Is this unique enough to snag it? I've made it rely on the div above it having an id that starts with 'stuff', that div must also have class 'bla' and the form attribute of 'action' must be 'bla.php'
$("div[id^='stuff'] form[id^='myform']").submit(function(event) {
if($(this).parent().hasClass('bla')) {
if($(this).attr('action', 'bla.php')){
//your code here
}
}
});