I implemented a page with 2 buttons which call 2 different functions on their button clicks. But the any of the buttons are not working. They are just reload the same page. I'll put my code down below.
<form class="form-horizontal" id="add_product_form" method="post">
<script>
function submitForm(action)
{
document.getElementById('add_product_form').action = action;
document.getElementById('add_product_form').submit();
}
</script>
<div class="col-sm-12">
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
</div>
Any help would be really appreciated. Thank you! Add_to_cart function which is mentioned above the page.
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
return true
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
You can do following. Change typesubmit to button And as you already have submitForm() method. Call this method when you want to return true.
Change
<input type="submit" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="submit" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
To
<input type="button" onclick="return check_add_to_cart();" class="btn btn-danger btn-lg add-to-cart btn-block" value="Add To Cart">
<input type="button" onclick=onclick="return check_add_to_quote();" class="btn btn-danger btn-lg add-to-quote btn-block" value="Add To quote">
And change your js functions to:
function check_add_to_cart(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
function check_add_to_quote(){
var quantity = jQuery('#quantity').val();
var data = jQuery('#add_product_form').serialize();
if(jQuery.isNumeric(quantity) && quantity > 0){
//return true
submitForm(""); //you can pass action in this if you want other page
} else if(quantity < 1) {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be greater than 0.");?>');
return false;
}else {
jQuery('#cart_error').html('<?=display_error_str("Quantity must be a number.");?>');
return false;
}
}
And remove submitForm() definition between html and add it to script block
Related
New To JQuery, i have the following code which i think is a bit over kill as all i'm trying to do i match a returned value to a selection of buttons and add/remove a class.
HTML for days of the week buttons
<div class="form-horizontal" id="selectWeekdaysSection">
<div class="form-group">
<div class="col-md-offset-2 col-lg-4">
<button id="mon" name="weekdaysbutton" class="btn btn-default" type="button" value="Mon">Mon</button>
<button id="tue" name="weekdaysbutton" class="btn btn-default" type="button" value="Tue">Tue</button>
<button id="wed" name="weekdaysbutton" class="btn btn-default" type="button" value="Wed">Wed</button>
<button id="thur" name="weekdaysbutton" class="btn btn-default" type="button" value="Thur">Thur</button>
<button id="fri" name="weekdaysbutton" class="btn btn-default" type="button" value="Fri">Fri</button>
<button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sat">Sat</button>
<button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sun">Sun</button>
</div>
</div>
</div>
Gives this on the site
DataTable data
When i do call and get data back from my DataTable it pre-selects the days from the JSON. I have all this working but as i said seems over kill to have to keep repeating the IF just for a different button especially when i have to do this for days '01 - 31'
Jquery
var selectedDays = modifyRecordData.selectedDays;
var splitSelectedDays = selectedDays.split(',');
splitSelectedDays.forEach(day => {
let val = day.trim();
if(val == 'Mon') {
$('#mon').removeClass('btn-default');
$('#mon').addClass('btn-primary');
}
if (val == 'Tue') {
$('#tue').removeClass('btn-default');
$('#tue').addClass('btn-primary');
}
if (val == 'Wed') {
$('#wed').removeClass('btn-default');
$('#wed').addClass('btn-primary');
}
if (val == 'Thur') {
$('#thur').removeClass('btn-default');
$('#thur').addClass('btn-primary');
}
if (val == 'Fri') {
$('#fri').removeClass('btn-default');
$('#fri').addClass('btn-primary');
}
if (val == 'Sat') {
$('#sat').removeClass('btn-default');
$('#sat').addClass('btn-primary');
}
if (val == 'Sun') {
$('#sun').removeClass('btn-default');
$('#sun').addClass('btn-primary');
}
})
Console.Log of returned data
The technique you want to follow is called Don't Repeat Yourself, or DRY for short.
In this case the day is always the same as the id of the element you want to target, so you can manually build the selector string once from that. You can also use toggleClass() instead of alternate addClass() and removeClass() calls. Try this:
splitSelectedDays.forEach(day => {
let dayName = day.trim().toLowerCase();
$('#' + dayName).toggleClass('btn-default btn-primary');
})
My form is submitting even after the validation fails and alert appears for some specific field for correction.
function validateForm() {
var subscriberName = trimAll(document.getElementById("subscriberName").value);
//Validators like this
if (subscriberName.length < 1) { alert("Please enter First Name.");
document.getElementById("subscriberName").focus(); return false; } else { var iChars="_!##$%^&*()+=-[]\\\';,./{}|\"
:<>?1234567890";
var flag = "false";
for (var i = 0; i < subscriberName.length; i++) { if (iChars.indexOf(subscriberName.charAt(i)) !=-1) {
alert("The First name has special character or numbers. \nThis is not allowed.");
document.getElementById("subscriberName").focus(); return false; } }
document.getElementById("subscriberForm").submit(); }
Update your button's onclick. Add return in it as onclick="javascript: return validateForm();".
Your button's html should be as below.
<button name="button" class="button" id="button" onclick="javascript: return validateForm();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">Add </span> </button>
You can test it below.
function validateForm() {
return false;
}
function validateFormTrue() {
return true;
}
<form name="subscriberForm" modelAttribute="subscriberRequest" method="post" action="/subscriber/saveAjaxSubscriber.htm" id="subscriberForm">
<button name="button" class="button" id="button" onclick="javascript: return validateForm();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">return false test </span> </button>
<button name="button" class="button" id="button" onclick="javascript: return validateFormTrue();" value="Update"> <span style="color:#FFFFFF; font-size: 15px">return true test </span> </button>
</form>
Please.. i need a help with this thing..
I wanna use a variable ID in HTML, to call a function in javascript page.
Example:
html
(MINUS BUTTON DONT WORK)
<button class="minus-button quantity-button button" type="button" name="subtract" onclick="javascript: subtractDiv2(document.getElementById('<ccom:field id='Code' />'));" value="-"> </button>
(THIS INPUT QUANTITY WORKS NORMAL)
<input class="quantity-input" value="<ccom:field id="Qtd"/>" maxlength="3" id='<ccom:field id="Code" />' name="div2" onkeypress="return somenteNumerico(event);"/>
(PLUS BUTTON WORKS NORMAL)
<button class="plus-button quantity-button button" type="button" name="add" onclick="javascript:document.getElementById('<ccom:field id='Code' />').value++;" value="+"></button>
javapage
function subtractDiv2(){
if(value - 1 < 0)
return;
else
value--;
};
You're not using the argument to the function. It should be:
function subtractDiv2(div) {
var value = parseInt(div.value, 10);
if (value < 1) {
return;
} else {
div.value = value - 1;
}
}
I am trying to display a button when the input is valid.
It doesn't work, it just displays all the buttons.
Here is the JavaScript:
var toggleVisibility = function ()
{
hasOccurred = validate(textEntry);
if (hasOccurred == false) {
$("addBtn").style.visibility = "visible";
$("deleteBtn").style.visibility = "hidden";
}
else if (hasOccurred == true) {
$("addBtn").style.visibility = "hidden";
$("deleteBtn").style.visibility = "visible";
}
}
This is the HTML for the buttons:
<button type="button" class="btn btn-success" id="addBtn" oninput="toggleVisibility()"><i class="glyphicon glyphicon-plus-sign"></i> Add to Array</button><br/>
<button type="button" class="btn btn-danger" oninput="toggleVisibility()" id="deleteBtn"><i class="glyphicon glyphicon-remove-sign"></i> Delete from Array</button><br/>
<button type="button" class="btn btn-info" id="sumBtn">Sum of Array</button>
You're using the $ as if you're using jQuery (but with incorrect CSS selectors). Without jQuery you need document.getElementById("...")
Note: I changed hasOccurred so that the snippet works.
var toggleVisibility = function() {
hasOccurred = false;
if (hasOccurred == false) {
document.getElementById("addBtn").style.visibility = "visible";
document.getElementById("deleteBtn").style.visibility = "hidden";
} else if (hasOccurred == true) {
document.getElementById("addBtn").style.visibility = "hidden";
document.getElementById("deleteBtn").style.visibility = "visible";
}
}
toggleVisibility();
<button type="button" class="btn btn-success" id="addBtn" oninput="toggleVisibility()"><i class="glyphicon glyphicon-plus-sign"></i> Add to Array</button>
<br/>
<button type="button" class="btn btn-danger" oninput="toggleVisibility()" id="deleteBtn"><i class="glyphicon glyphicon-remove-sign"></i> Delete from Array</button>
<br/>
<button type="button" class="btn btn-info" id="sumBtn">Sum of Array</button>
I am having some issues getting this done correctly.
I want my "sendit" button to enable (remove disable) as soon as there is any characters in the box.
I've tried multiple things now but I can not get it to work.
Part of HTML:
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<input id="sendit" class="btn btn-lg btn-primary btn-block disabled" type="submit" value="Generate Codes"></input>
JS File
$(document).ready(function() {
var pass_error = 1;
// Check name field
if (inputPassword === '') {
pass_error = 1;
} else {
pass_error = 0;
}
enableButton();
});
// verzendknop pas activeren nadat alles is ingevuld en gecontroleerd
function enableButton() {
if (pass_error!== 0) {
$('#btn btn-lg btn-primary btn-block').attr('disabled', 'disabled');
} else {
$('#btn btn-lg btn-primary btn-block').removeAttr('disabled');
}
};
});
Your code only checks the field once upon DOM Ready.
You need to tie your check to a keyUp event on that field:
$('my-field').keyUp(function() {
if($(this).val() === '') {
pass_error = 1;
} else {
pass_error = 0;
enableButton();
});