How to disable the enter key on search bar - javascript

I'm using Magento and want to disable the enter key on the search bar. My code is below for search bar:
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<div class="input-box">
<label for="search"><?php echo $this->__('Search:') ?></label>
<input id="search" type="search" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text required-entry" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" placeholder="<?php echo $this->quoteEscape($this->__('Search entire store here...')) ?>" />
<button type="submit" title="<?php echo $this->quoteEscape($this->__('Search')) ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete');
//]]>
</script>
</form>
Any ideas on how I can do this?

Using JQuery in Magento:
$('#search_mini_form').on('keyup keypress', function(event) {
var key = event.keyCode || event.which;
if (key === 13) {
event.preventDefault();
return false;
}
});
put this in your module's layout.xml under defaul tag:
<layout>
<default>
<reference name="head">
<action method="addJs">
<script>custom.js</script>
</action>
</reference>
</default>
</layout>

In react you can disable on form submit
<form id="dashboard-form" onSubmit={(e)=> e.preventDefault()}></form>

Related

How to get the value of the image when clickin

How to get the value of the image for us it on $_POST
$url_f = $crawler->filter('#content .galleries_overview .item')->each(function(crawler $node, $i) {
//echo $node->html();
$image = $node->filter('img')->attr('src');
$src = $node->filter('a')->attr('href');
$href = 'https://example.com/'. $src;
?>
<input type="image" name="submit_blue" value="<?php echo $href ?>" src="<?php echo $image ?>">
<?php
});
?>
you may use onclick
<input type="image" onclick="sendme('<?php echo $href ?>')" src="<?php echo $image ?>">
and add this to your page :
<form method="post" id="myform">
<input type="hidden" name="submit_blue" id="submit_blue" value="" >
</form>
<script>
function sendme(x) {
document.getElementById("submit_blue").value = x;
document.getElementById("myform").submit();
}
</script>
that is a javascript solution i use if i do not want to use jquery or something
By the way I don't like using URL as a value

Javascript - change input value on click not working

Here's a div which represents cart item qty field:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" onclick="minusOne(qty_field_<?php echo $item_id; ?>)">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
It is a draft version so don't pay attention to submit and hidden inputs
And JS code:
function minusOne (input_id){
var subtracted_qty = document.getElementById(qty_field_id).value = document.getElementById(qty_field_id).value - 1;
document.getElementById(qty_field_id).value = subtracted_qty;
}
I want to change value of input text field by clicking minus button by -1. But for some reason it's not working.
Can you, please, review my code and find whats wrong with it. Or maybe there is some better ways to do such qty change..
Your code does not set the variable qty_field_id, nor does it use the variable input_id. If input_id is referring to the same value as PHP’s $item_id, then try adding the following line to the top of the JavaScript function:
var qty_field_id = "qty_field_" + input_id;
You shouldn't use inline javascript and you aren't referencing the correct element. Try this instead:
HTML:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" data-productId="<?php echo $item_id; ?>">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
JS:
[].slice.call(document.getElementsByClassName('cart_qty_controls')).forEach(function(el){
el.addEventListener('click', function(e) {
var id = e.target.getAttribute('data-productId');
document.getElementById('qty_field_' + id).value -= 1;
})
})

SESSION variable slow to update textfield in php

I have a form, contained 3 fields, which when the submit button in submitted,
it will changes the session variable values according to the fields, in this case there are 3 variables. then i echo back the variable onto the fields.
For the first time submit, it stores the value beautifully and display in the fields correctly, the problem is that, when i submit the second time, the values are still the same. after i refresh the page, then the values in the fields are changed.
this is partially the codes i'm using now.
<?php
session_start();?>
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
}
?>
After i refresh(F5), then the value changed. i want it to be, when i clicked the submit button, it will change to the new value.
PHP Code:
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
echo '<script type="text/javascript">'
, 'jsfunctionToPrintUpdatedValues();'
, '</script>'
;
}
?>
Javascript Sample Code
function jsfunctionToPrintUpdatedValues()
{
/* retrieve the updated session variables in javascript variables */
var acc_main_js = <?php echo $_SESSION['acc_main']?>
var acc_id_js = <?php echo $_SESSION['acc_id']?>
var acc_cat_js = <?php echo $_SESSION['acc_cat']?>
document.getElementById("main").value=acc_main_js;
document.getElementById("id").value=acc_main_js;
document.getElementById("cat").value=acc_main_js;
}
in the input fields you have to write like this
`
Below
`
<input type="text" name="acc1" value="<?php if(isset($_SESSION['acc_main'])) echo $_SESSION['acc_main']" />
Use if(isset($_POST['submit']) != '') before the form. Change your code to this:
<?php
session_start();
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
}else{
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
<?php } ?>

Jquery not receiving any form values

I'm using cluetip to open popups with a pm system in. When i post the pm Jquery is not receiving the values in any fields. Here is a JsFiddle can anyone help?
The html form
<div class="interactContainers" id="private_message1">
<form action="javascript:sendPM();" name="pmForm" id="pmForm" method="post">
<font size="+1">Sending Private Message to <strong><em><?php echo "$username"; ?></em></strong></font><br /><br />
Subject:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:90%;" />
Message:
<textarea name="pmTextArea" id="pmTextArea" rows="8" style="width:90%;"></textarea>
<input name="pm_sender_id" id="pm_sender_id" type="hidden" value="<?php echo $sessionid ?>" />
<input name="pm_sender_name" id="pm_sender_name" type="hidden" value="<?php echo $user ?>" />
<input name="pm_rec_id" id="pm_rec_id" type="hidden" value="<?php echo $profileid ?>" />
<input name="pm_rec_name" id="pm_rec_name" type="hidden" value="<?php echo $username ?>" />
<input name="pmWipit" id="pmWipit" type="hidden" value="<?php echo $thisRandNum ?>" />
<span id="PMStatus" style="color:#F00;"></span>
<br /><input name="pmSubmit" type="submit" value="Submit" />
<span id="pmFormProcessGif" style="display:none;"><img src="../_Images/loading.gif" width="28" height="10" alt="Loading" /></span></form>
</div>
the jquery
$('#pmForm').on('submit', function (e) {
e.preventDefault();
$('input[type=submit]', this).attr('disabled', 'disabled');
var pmSubject = $("#pmSubject").val();
var pmTextArea = $("#pmTextArea").val();
var url = "../_Scripts/private_msg_parse.php";
if (!pmSubject)
{
$('input[type=submit]',this).removeAttr('disabled');
$("#jqueryReply").html('<img src="../_Images/round_error.png"
alt="Error" width="31" height="30" /> Please type
a subject.')
.show().fadeOut(6000);
return false;
}
else if (!pmTextArea) {
$('input[type=submit]', this)
.removeAttr('disabled');
$("#jqueryReply").html('<img src="../_Images/round_error.png"
alt="Error" width="31" height="30" /> Please type in your
message.')
.show().fadeOut(6000);
return false;
} else {
$("#pmFormProcessGif").show();
$.post(url, $('#pmForm').serialize(), function (data) {
$("#jqueryReply").html(data).show().fadeOut(10000);
$("#pmTextArea").val('');
$("#pmSubject").val('');
$("#pmFormProcessGif").hide();
});
}
});
http://jsfiddle.net/RKN39/
Thanks
I'm not sure about cluetip but I don't think that the form field values are being passed since they are inside a container that is hidden - .interactContainers has a css value of display:none. You can keep that designation and try something like
$('#private_message').on("click", function(){
$('.interactContainers').css('display','block')
});
or maybe there is a way to integrate that into your cluetip code?

Why does my javascript not update quantity in Opencart category.tpl

In category.tpl Opencart 1.5.x
I'm trying to add quantity to the add to cart button.
<div class="cart">
<input type="text" name="quantity<?php echo $product['product_id']; ?>" value="1" size="1" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>', 'document.form.quantity<?php echo $product['product_id']; ?>.value')" class="button" />
</div>
If I just put a number in for the second variable of addToCart like
addToCart('<?php echo $product['product_id']; ?>', 2);
This adds quantity 2 fine. Checking the element name in ff shows me the number is coming back from php correctly "quantity6.value", etc. Apparently, but when I click Add to Cart nothing happens. Can someone point me in the right direction?
Just to make it more succinct I changed the line to:
" onclick="addToCart('', document.getElementById('quantity').value)" class="button" />
But still the button does not appear to do anything on a click. I assume the document.getElementById().. line is not returning the number properly, but I'm not sure of a good way to test it.
Neither does this seem to work:
<div class="cart">
<input type="text" name="quantity<?php echo $product['product_id']; ?>" value="1" size="1" onchange="updateQty(<?php echo $product['product_id']; ?>);" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>', getQty(<?php echo $product['product_id']; ?>);)" class="button" />
</div>
...
<script type="text/javascript"><!--
function getQty(num) {
getQty = document.getElementById('quantity' & num).value;
}
function updateQty(num) {
var ibox = document.form.quanity[num].value;
quantity[num] = ibox;
}
...
</script>
This seems a little overdone to be honest. You can do this with one function simply by changing the function on the onclick event to addToCartCategory() and changing the name to an ID for the quantity box. Something along the lines of
<div class="cart">
<input type="text" id="quantity<?php echo $product['product_id']; ?>" value="1" size="1" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCartCategory(<?php echo $product['product_id']; ?>)" class="button" />
</div>
...
<script type="text/javascript"><!--
function addToCartCategory(product_id) {
var qty = $('#quantity' + product_id).val();
addToCart(product_id, qty);
}
...
</script>

Categories

Resources