Ajax update works for radios, checkboxes but not a button - javascript

On click, I want the form to process and update based on which button is clicked.
html:
<input type="button" value="5.00" name="updatefield" id="updatefield" class="chooseit">
have also tried:
<button name="updatefield" id="updatefield" class="chooseit">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="button">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="button" value="5.00">5.00</button>
<button name="updatefield" id="updatefield" class="chooseit" type="submit" value="5.00">5.00</button>
When I change button to anything besides "button," (radio,checkbox, etc) the form process as expected. (The 5.00 is passed to the overall page total as +5.00)
View.js:
events: {
'click button.chooseit': 'chooseIt',
},
processing.js
chooseDonate: function(updatefield) {
this.set('updatefield', updatefield);
var that = this;
$.post('index.php?route=info/updateinfo', this.toJSON(), function(data) {
qc.event.trigger('updateAll', data);
that.updateForm(data);
}, 'json').error();
},
Are buttons handled differently? Can't figure out why radios/checkboxes work, but not buttons.

I'm not familiar with the framework you are using. If I understand events:{'click button.chooseit': 'chooseIt',} you bind the click to a function called chooseIt. It would be nice to see that function too.
But to answer your question "Are buttons handled differently?", well, it depends on what type of button. There are <input type="button">, <input type="submit">, <input type="image">, <input type="reset">, <button type="button">, <button type="submit">, <button type="menu"> and <button type="reset">. If type="submit" or type="image" the form is submitted. If type="reset" the controls in the form are reset to their initial value. If type="menu" a popup menu defined via its designated <menu>-element is displayed. If type="button" nothing special happens unless you have added a click-handler.
For the thing you are trying to do, there is no difference in plain javascript. I have added an example below where I use <input type="radio">, <input type="checkbox">, <input type="button">, <button type="button"> and <select>, and they are all using the same function to set the value of <output> to the latest clicked value. (type="checkbox" get special treatment since it can be clicked to uncheck)
So to find what's wrong, you need to dig into your framework and see what it is doing. A common mistake is that the form get submitted, and it can happen so fast that it looks like nothing happened. You can detect that, for example if you enable "sticky log" in your browsers developer console, so that the log is kept even if the page is reloaded.
var output = document.getElementById('output');
function setOutput(event) {
var value = this.value;
if (this.type === 'checkbox') {
if (!this.checked) value = '';
}
output.value = value;
}
document.querySelectorAll('input, button').forEach(
function (elem) {
elem.addEventListener('click', setOutput);
}
);
document.querySelectorAll('select').forEach(
function (elem) {
elem.addEventListener('change', setOutput);
}
);
fieldset{
display:inline-block;
width:150px;
height:50px;
vertical-align:top;
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0;
font-size:80%;
}
<p>Proof of concept that the type of input element doesn't matter in this case.</p>
<form id="form1">
<fieldset>
<p><input type="radio"></p>
<label><input value="5" type="radio" name="radioValue">5</label>
<label><input value="10" type="radio" name="radioValue">10</label>
<label><input value="20" type="radio" name="radioValue">20</label>
</fieldset>
<fieldset>
<p><input type="checkbox"></p>
<label><input value="5" type="checkbox" name="chkValue">5</label>
<label><input value="10" type="checkbox" name="chkValue">10</label>
<label><input value="20" type="checkbox" name="chkValue">20</label>
</fieldset>
<fieldset>
<p><input type="button"></p>
<input value="5" type="button" name="ibtnValue">
<input value="10" type="button" name="ibtnValue">
<input value="20" type="button" name="ibtnValue">
</fieldset>
<fieldset>
<p><button type="button"></p>
<button value="5" type="button" name="btnValue">5</button>
<button value="10" type="button" name="btnValue">10</button>
<button value="20" type="button" name="btnValue">20</button>
</fieldset>
<fieldset>
<p><select></p>
<select>
<option value="">--Select value---</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</fieldset>
<fieldset>
<p>Last selected value: <output id="output"></output></p>
</fieldset>
</form>

If your button is inside a form, it's probably submitting it (that is their default behavior).
Try adding a type attribute to tell your browser you don't want that to happen:
<button name="updatefield" id="updatefield" class="chooseit" type="button">5.00</button>

You need to give the button a value such as below:
<button name="updatefield" id="updatefield" class="chooseit" type="button" value="5.00">5.00</button>

Related

How do I add two getElement and a submit button to make one If Statment?

Sumary: I am looking for away to add two seperate getElementbyId and a submit button to an If Statment in order to make it run.
HTML Example:
<form>
<div>
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" onclick="func2();" />0 Human</br>
<input type="radio" name="type" id="r" value="2222" onclick="func2();" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" onclick="func2();" />2 Animal</br>
</fieldset>
</div>
<div>
<fieldset id="group2">
<input type="radio" name="type" id="c" value="1111" onclick="func2();" />4 Jerry</br>
<input type="radio" name="type" id="b" value="2222" onclick="func2();" />5 Xr10Zbot</br>
<input type="radio" name="type" id="z" value="3333" onclick="func2();" />6 Girrafe</br>
</fieldset>
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" onclick="func()2;" /></p </div>
</form>
JavaScript Example:
<script>
function func2()
{
if(document.getElementById("h").checked)
// I want for the if statment to require you to also have to check c and click submit to run
{
var val = document.getElementById("h").value;
alert(val);
}
else if(document.getElementById("r").checked)
{
var val = document.getElementById("r").value;
alert(val);
}
else if(document.getElementById("a").checked)
{
var val = document.getElementById("a").value;
alert(val);
}
}
</script>
What I need the if statment to run:
Make it to wher you have to click two radio buttons and submit to run the alert
if(document.getElementById("h").checked) + (document.getElementById("c").checked) + (document.getElementById("f"))
I don't fully understand what you want to do. I hope my solution will help you.
Issue 1
There is a typo in the submit button.
❌NG onclick="func()2;"
✅OK onclick="func2();"
Issue 2
Radio buttons with the same name attribute belong to one group. Therefore, only one of the six buttons can be turned on. One of the buttons in #group1 and one of #group2 are not turned on at the same time. Change name.
For example,
<fieldset id="group2">
<input name="type2">
<input name="type2">
<input name="type2">
</fieldset>
Issue 3
I think it is a bit difficult to use func2() for all buttons including the submit button. I recommend making another function for it.
My solution
This JS doesn't work properly here on the embed snippet. Please copy, paste and run it on an actual editor such as Visual Studio Code.
// Get DOMs
var elementC = document.getElementById('c');
var submitButon = document.getElementById('f');
// Get #group1 radio buttons at once
var group1Buttons = document.querySelectorAll('#group1 [type="radio"]');
// These are needed in If statements
// var elementH = document.getElementById('h');
// var elementR = document.getElementById('r');
// var elementA = document.getElementById('a');
function func2(e) {
e.stopPropagation();
// You may use this If statement
// if (elementH.checked) {
// alert(elementH.value);
// } else if (elementR.checked) {
// alert(elementR.value);
// } else if (elementA.checked) {
// alert(elementA.value);
// }
// I prefer this one because it's shorter.
alert(this.value);
}
function func3(e) {
e.stopPropagation();
if (!elementC.checked) {
e.preventDefault(); // Stop submitting
alert(`You need to check ${elementC.getAttribute('data-text')}!!`);
}
}
// When one of the radio buttons is clicked, executes func2()
group1Buttons.forEach(radio => radio.addEventListener('click', func2, false));
// When the submit button is clicked, executes func3()
submitButon.addEventListener('click', func3, false);
<form>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" required />0 Human</br>
<input type="radio" name="type" id="r" value="2222" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" />2 Animal</br>
</fieldset>
</div>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<!-- Change name: type => type2 -->
<!-- Added data-text attribute -->
<fieldset id="group2">
<input type="radio" name="type2" data-text="4 Jerry" id="c" value="1111" required />4 Jerry</br>
<input type="radio" name="type2" id="b" value="2222" />5 Xr10Zbot</br>
<input type="radio" name="type2" id="z" value="3333" />6 Girrafe</br>
</fieldset>
<!-- Removed onClick="func2()" -->
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" /></p>
</div>
</form>

How to keep track of which buttons have been pressed jquery

I want create simple calculator using only jquery. When I try to track which button is pressed from the list (name=numbers), it displays the value of the first button. For example, I constantly get 1
<html>
<head>
<script type="text/javascript" src="Z:\ПИ-313\2 подгруппа\Баталова Шаниязов\Веб - технологии\Веб - технологии\jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<input id="field" type="text"/>
<input type="button" value="<<">
<input type="button" value="C">
</div>
<div>
<button name="numbers" value="1">1</button>
<button name="numbers" value="2">2</button>
<button name="numbers" value="3">3</button>
<input type="button" value="+">
</div>
<div>
<input type="button" name="numbers" value="4">
<input type="button" name="numbers" value="5">
<input type="button" name="numbers" value="6">
<input type="button" value="-">
</div>
<div>
<input type="button" name="numbers" value="7">
<input type="button" name="numbers" value="8">
<input type="button" name="numbers" value="9">
<input type="button" value="*">
</div>
<div>
<input type="button" name="numbers" value="0">
<input type="button" value=",">
<input type="button" value="/">
</div>
<div>
<button id="calc">=</button>
</div>
<script>
$(document).ready(function(){
$(':button[name=numbers]').click(function() {
var number = $(':button[name=numbers]').val();
$('#field').val(number);
});
});
</script>
</body>
It is because with ':button[name=numbers]' you select all buttons with the name numbers, which, in your code snippet, means all of them. You get the first value: 1.
In Javascript you have this. In your click() function this is 'the item clicked'. In this case perfect, beause you want the value of 'the item clicked':
var totalSum = Number( $('#field').val() ); // easier to save if outside the click;
$(':button[name="numbers"]').click(function() {
$('#field').val( totalSum + this.value);
});
Little code review, this is what I've done:
Moved the totalSum out of the click. You can now do other computations with it, without having to select it from the DOM
I used this.value instead of $(this).val(). jQuery internally does the same, we just do it directly. Using native javascript where possible will very often be faster and more lightweight.
I just added the value directly in the .val() function. This will save you a line of code (while maintaining readability) and you don't save it in the memory now. It's a small value, but do this trick 1000 times and you will feel the difference. If you must save it in a variable, use let instead of var (and google why :) )
You use name= and them give them all the same name. They must be unique. I think you're looking for class=
You need to use $(this) to get the clicked button
$(document).ready(function(){
$(':button[name=numbers]').click(function() {
var number = $(this).val();
$('#field').val(number);
});
});
This is how I fixed it. Replace this:
var number = $(':button[name=numbers]').val();
$('#field').val(number);
by this:
var number = $(this).val();
$('#field').val($('#field').val() + number);
The mistake is that in your event you are always getting the first element instead of the clicked one.
Second is you are just setting the value of the retrieved data instead of concatenating with whats already existing.
Here is the JSfiddle demo

how to make an input type'button' act like type='submit'?

I have 3 input type radio:
<input type="radio" name="status">Semi-Finalist
<input type="radio" id="finalist" name="status">Finalist
<input type="radio" name="status">Reject
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit">
When the user select Finalist the Modal (pop up window) show appear and ask additional questions, but If Semi-finalist or Reject is checked, submit the form when the "Submit" button is clicked. This is why I can't use type="submit"
Thank you...
UPDATE:
here is the js that show the modal
//finalist Modal
$(document).ready(function(){
$(".submitButton").click(function(){
if($('#finalist').is(':checked')) {
$("#myModalFinalist").modal('show');
}
});
});
Use type="submit".
When writing the JavaScript event handler to decide if you need to show additional questions or not, conditionally call event.preventDefault() to stop the form submission.
$("form [type='submit']").on('click', show_additional);
function show_additional(event) {
if ($("[value=finalist]:checked").length) {
event.preventDefault();
alert("Also show additional fields now");
} else {
alert("Just submit normally");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>
<input type="radio" name="status" value="semi">Semi-Finalist</label>
<label>
<input type="radio" name="status" value="finalist">Finalist</label>
<label>
<input type="radio" name="status" value="reject">Reject</label>
<input type="submit" value="Submit">
</form>
NB: The form won't actually submit in this demo because of Stackoverflow's sandboxing.
This is what i used: Thanks to #Quentin I could figure it out!
<input type="radio" name="status">Semi-Finalist
<input type="radio" id="finalist" name="status">Finalist
<input type="radio" name="status">Reject
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit">
$(document).ready(function(){
$(".submitButton").click(function(event){
if($('#finalist').is(':checked')) {
event.preventDefault();
$("#myModalFinalist").modal('show');
}
});
});

Checkbox with JS and Mobile

Hello and thanks in advance for any help
In my store page, I have a checkbox that is checked when user agrees with the terms. When he checks the checkbox, submit button is disabled (false). My problem is that this solution doesn't work on iPhone and other mobile devices.
Here's the code:
function terms() {
if (document.getElementById("cbTerms").checked)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
function cbc() {
if (document.getElementById("cbc").checked)
document.getElementById("cbc") = ("הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה");
else
document.getElementById("cbc").value = ".";
}
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br>
<br>
<input type="checkbox-0" id="cbTerms" name="cbTerms" onclick="terms();" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר כי קראתי את התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" oninput="cbc()" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
At first sight your first checkbox is not really a checkbox.
<input type="checkbox-0" ...> should be more like: <input type="checkbox" ...>
With this change it will work.
P.S.:
Consider using braces for your if() {} else {} statements as you will propably run into some logic error if you change something in the future (e.g. add a line of code) and forget to add them.
The change event is preferred over click. And in addition, you'd pass the currently clicked checkbox on the fly as following
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br><br>
<input type="checkbox" id="cbTerms" name="cbTerms" onchange="terms(this);" style="...">
<p style="...">הריני מאשר כי קראתי את
התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" onchange="cbc(this)" style="...">
<p style="...">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
<script type="text/javascript">
function terms(me)
{
document.getElementById("submit").disabled = !me.checked;
}
function cbc(me){
var val=document.getElementById("cbc").checked?
"הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה":".";
document.getElementById("cbc").value = val;
}
</script>

Identify the value of clicked submit button with multiple submit buttons

I have situation where i need to track which submit button click in order to do set variables according to that. Below is the test code,
<script>
function submitForm(form) {
alert(document.getElementById('sb').value);
if (document.getElementById('sb').value=="One") {
//Do something
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
The alert always shows One even if i click button Two or Three. But the url change with clickable parameter. How to alert the value which is in the clickable submit button?
Note: I want a solution with out JQuery
EDIT: I change the code bit which the onsubmit call the submitForm(this);
The problem is even use document.forms[0].sb.value its undefined because document.forms[0].sb return a node list of all submit buttons as its same as with document.getElementById('sb')
Here is what I think is a simpler solution to this problem. It does not require any extra events.
<script>
function submitForm(form) {
console.log(document.activeElement.value);
if (document.activeElement.value == 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
jsfiddle
What I would like an answer to is how the form is getting the query set to "?sb={value}".
I would suggest you to use buttons, instead of multiple submit buttons. In the onclick attribute of the buttons, submit the form using javascript.
You can try like this,
<form>
<input class="myButton" type="submit" name="sb" value="One">
<input class="myButton" type="submit" name="sb" value="Two">
<input class="myButton" type="submit" name="sb" value="Three">
</form>
<script type="text/javascript">
$(".myButton").on('click', function() {
alert($(this).val());
});
</script>
I'm a bit new to javascript; please forgive me if I'm wrong on this. Wouldn't it make a difference if your if statement had a 3rd = sign?
Should it be:
if (document.getElementById('sb').value === "One") {
//Do something
}
return true;
Continuing the answer above:
<script>
function m(value) {
alert(value);
}
</script>
<input type="button" value="One" onClick="m(this.value)">
<input type="button" value="Two" onClick="m(this.value)">
<input type="button" value="Three" onClick="m(this.value)">
You can of course see what's the id:
<input type="button" id='myId' value="Three" onClick="m(this.id)">
you can try with jquery something like :
$(":submit").live('click', function() {
alert($(this).val());
})
This is a non-jquery, simple solution for detecting which submit button was clicked.
<script>
function submitForm(form) {
console.log(document.getElementById('btn_clicked').value);
if (document.getElementById('btn_clicked').value === 'One') {
console.log("Have one.");
return false;
}
return true;
}
</script>
<form action="" method="get" onsubmit="return submitForm(this);" ;">
<input type="hidden" name="btn_clicked" id="btn_clicked" value="">
<input type="submit" name="sb" value="One" onclick="document.getElementById('btn_clicked').value='One';">
<input type="submit" name="sb" value="Two" onclick="document.getElementById('btn_clicked').value='Two';">
</form>

Categories