We Keep Coding

How to specify the action attribute to specific input buttons?

I have a form in which I have 2 buttons which increase and decrease the values entered by the user. The form has an action attribute which sends all the data of the form to another PHP file. When I try to press the button, it just directs me to that page instead of increasing the value. I want the buttons to increase the value and when the submit button is clicked, the page should send all the data to the other PHP page.
Thanks In Advance!!!
the buttons are images
I have not included the PHP code
My HTML Code Snippet-
<form method="POST" action="cart.php">
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book1']; ?>
<br><br>
<?php echo $price1; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus1" name="minus1"><input type="number" type="button" min="0" id="Q1" name="Q1" placeholder="Enter Quantity"><input type="image" src="plus.png" height="50px" width="50px" id="plus1" name="plus1">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book2']; ?>
<br><br>
<?php echo $price2; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus2" name="minus2"><input type="number" type="button" min="0" id="Q2" name="Q2" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus2" name="plus2">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book3']; ?>
<br><br>
<?php echo $price3; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus3" name="minus3"><input type="number" type="button" min="0" id="Q3" name="Q3" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus3" name="plus3">
<br>
</div>
</div>
<br>
<br>
<input type="submit" id="submit1" name="submit1">
</form>
My Javascript Code-
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#plus1').click( function() {
var counter = $('#Q1').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#plus2').click( function() {
var counter = $('#Q2').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#plus3').click( function() {
var counter = $('#Q3').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q3').val(counter);
}
});
});
$(document).ready(function(){
$('#minus1').click( function() {
var counter = $('#Q1').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#minus2').click( function() {
var counter = $('#Q2').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#minus3').click( function() {
var counter = $('#Q3').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q3').val(counter);
}
});
});
</script>

It sounds like the form is being submitted early because your inputs are perhaps triggering the forms submit method.
We can simplify it a lot by using buttons to wrap our increment and decrement actions (attach your onclick event handlers to these buttons), and use a single input to hold the value for each form field (your event handlers will be changing the values on these inputs). You can disable or hide these inputs to ensure changes to form data must pass through your event handlers and can't be entered directly into the input.
button elements will try and submit it's parent form element by default, so you need to use type="button" to prevent that.
Then, when your data is ready to submit, provide a single button or input with type="submit".
This may also clean up the payload you receive in your php context as well, because the form action will try to wrap up every input and their values. It seems you're only interested in the $price, so let's make sure your form only encodes that data.
An example of the markup for each of your questions could look like this:
<input id="my-input-1" type="number" value="0" disabled>
<button type="button" name="increment-my-input-1">
<img src="/my-plus-button-image.png" />
</button>
<button type="button" name="decrement-my-input-1">
<img src="/my-minus-button-image.png" />
</button>

Maybe Like This:
$(document).ready(function(){
$('.cls-btn-plus-minus').click(function(){
var cur_val = $(this).parent().find('.cls-q').val();
cur_val = parseInt(cur_val)||0;
var role = $(this).attr('role');
if(role == 'plus'){
if(cur_val>= 0 && cur_val<5) {
cur_val++;
$(this).parent().find('.cls-q').val(cur_val);
}
}
if(role == 'minus'){
if(cur_val> 0 && cur_val<6) {
cur_val--;
$(this).parent().find('.cls-q').val(cur_val);
}
}
});
});
.cls-btn-plus-minus{
height:50px;
width:50px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="cart.php">
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book1
<br><br>
price1
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q1" name="Q1" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book2
<br><br>
price2
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q2" name="Q2" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<div class="divStyle">
<!--img src="img.png" height="100px" width="150px"-->
<br>
book
<br><br>
price3
<br>
<div class="inputStyle">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">
<input type="number" class="cls-q" min="0" id="Q3" name="Q3" placeholder="Enter Quantity">
<img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
<br>
</div>
</div>
<br>
<br>
<input type="submit" id="submit1" name="submit1" value="GO">
</form>

Showing 2 text boxes when button click JS

I have implemented a coding to show a text-box when the user clicks a button. I need to modify that coding to view 2 text-boxes when user clicks that same button. I'll put the coding down below. Thanks!
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list" style="display:none;"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" onclick="showDiv()" />
</div>
function showDiv(){
$( "#welcomeDiv" ).show( "slow" );
}

Try this one .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
</script>
</head>
<body>
<input type="text" id="input1"/>
<input type="text" id="input2"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Hope this help :)

this is exactly same like your code check this out
this is fiddle link
and with code snippet also
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>
this is javascript little bit different but you will get it
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
i dont like to give style in elements so use css.css
#welcomeDiv{
display:none;
}
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
#welcomeDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>

Showing Text-box after Button click event

I'm trying to generate a text-box after a button click event. The code is as follows.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<?php if(isset($_POST['button'])) { ?>
<?php echo "<script type=\"text/javascript\">
function showDiv() {
<input type="text" id="textInput" value="..." />
document.getElementById('welcomeDiv').style.display = "block"; </script> ";
}
</script>" ?> ;
<?php } ?>
But the button click event function is not working properly. Any thoughts?

You can also create css and make visible textfield on button click
Hope below example will help you
function onButtonClick(){
document.getElementById('textInput').className="show";
}
.hide{
display:none;
}
.show{
display:block;
}
<div class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Text Field" onclick="onButtonClick()" />
<input class="hide" type="text" id="textInput" value="..." />

You don't need use PHP! Is better to use Jquery for this action.
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButton").after('<input type="text" id="textInput" value="">');
});
});
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />

Hi Ryan please check this code it will create a text box and add it before button.
<div id="welcomeDiv" class="answer_list" > WELCOME </div>
<div id="tbox_div">
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
<script>
function showDiv(){
var newtextbox ='';
if (!document.getElementById("textInput")) {
newtextbox += '<input type="text" id="textInput" value="..." />';
document.getElementById('tbox_div').innerHTML+=newtextbox;
}
}
if you want to add more that one text boxes then remove this if condition.
if (!document.getElementById("textInput"))

Using JQuery you can do it like, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
$(document).ready(function() {
$("#myButton").click(function() {
$("#textInput").show();
});
});
Using Plain JavaScript, here's a FIDDLE
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" onclick="showInputBox()" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>
<script>
function showInputBox() {
if (document.getElementById("textInput")) {
document.getElementById("textInput").style.display = 'block';
alert("Yes");
} else {
//IF INPUT BOX DOES NOT EXIST
var inputBox = document.createElement("INPUT");
inputBox.setAttribute("type", "text");
inputBox.setAttribute("id", "dynamicTextInput");
document.body.appendChild(inputBox);
alert("No");
}
}
</script>

How to Distinguish between ID values of html Element using jquery

Actually I have two divs available on my page with buttons and I am passing the hidden field attached with that button to the jquery function But when I click on the second div it pass the value of the first div. Below is the html code
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="42" id="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="11" id="poll-id">
</div>
And I am using this jquery :
$(document).on('click','#vote-btn', function() {
console.log( $("#poll-id").val());
});
NOTE: The Div ids are not same all the time

The id attribute should be unique in the same document, it will be better if you're using global classes instead :
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
Then use siblings to target the related field :
$(this).siblings(".poll-id").val();
Hope this helps.
$(document).on('click','.vote-btn', function() {
console.log( $(this).siblings(".poll-id").val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>

You can select the DIVs with the class "wp-polls-ans" and then the buttons inside
$(".wp-polls-ans #vote-btn").click(function(){
var val = $(this).parent().find( "#poll-id").val();
alert(val);
})
This is the fiddle

Here is the working javascript code:
$(document).on('click','#vote-btn', function() {
console.log( $(this).siblings("#poll-id").val() );
});

Hide div on click

<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
YES <input type="radio" name="name" value="yes" />
NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function() {
$('#result').hide();
$('#submit').click(function() {
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
Here is the jsfiddle
Why is the second hide not working after clicking and fadeOut the div

You have to use .preventDefault() to prevent the default behaviour of the submit button. Or use a normal button(type='button') instead of a submit button.
Try,
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
DEMO

To post you need to AJAX and preventDefault to not submit
Also never call anything in a form submit
$(function() {
$('#result').hide();
$('#form1').on("submit", function(e) {
e.preventDefault(); // stop form submission
$('#hideme').hide();
$.post(this.action, { "name": $("input[name='name']").val()},function(data) {
$('#result').html(data).fadeIn(5000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">Fade me in and hide div hideme</div>
<div id="hideme">
<form id="form1" method="POST" action="someaction.php">
YES <input type="radio" name="name" value="yes" /> NO <input type="radio" name="name" value="no" checked />
<p />
<input type="submit" value="HIDE NOW!" />
</form>
</div>