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>
Related
When the form is SUBMITted, the working DIV named "second" will disappear after 5 seconds and the DIV named "three" will appear.
In addition, these processes will be one time and will not repeat itself.
Can you help me?
<form name="kisi" method="post" action="gonder" id="kisi" autocomplete="off" onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-row">
<div id="timerDiv" class="has-timer" style="">
<span>Kalan Süre: </span> <span class="has-countdown__time" id="time"></span>
</div><br><br>
<input type="tel" class="f-input" name="kisilik" id="kisilik" pattern=".{0}|.{5,7}" autocomplete="off" maxlength="7" required oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" onfocus="this.select();">
</div>
<button style="background:#076B79; color:white" class="btn" type="submit">ONAYLA</button>
</form>
<div id="second" class="2" style="display:none">
<center><img class="smslogo" src="images/rolling.gif" /></center><br>
<center>
<p class="a">Lütfen Bekleyiniz. <br> Kisilik Doğrulaması Yapılıyor...</p>
</center><br><br>
</div>
<div id="three" class="3" style="display:none">
<center>
<p class="a">THREE TEST DIV</p>
</center><br><br>
</div>
<script>
$(document).ready(function() {
$('#sms').submit(function(){
setTimeout(function () {
$("#second").hide();
}, 3000);
setTimeout(function () {
$("#three").show();
}, 3000);
});
});
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>
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() );
});
Here is the HTML: Line 18 below is not carrying over to $_POST['storename'] after Submit is hit. All other text fields are carrying over just fine. The only difference is that this autofills with data from database using PHP and AJAX. I've attached all coding in reference to that field.
Here's the link to the site: http://drmwebdesign.com/project002/product-insert.php
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="pname" id="pname" value="<?php echo $pname;?>" placeholder="Product Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="brand" id="brand" value="<?php echo $brand;?>" placeholder="Product Brand" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="price" id="price" value="<?php echo $price;?>" placeholder="Product Price" />
</div>
<div class="6u 12u(mobilep)">
<input type="text" name="upc" id="upc" value="<?php echo $upc;?>" placeholder="Product UPC" />
</div>
</div>
<div class="row uniform">
<div class="12u">
<input type="text" name="storename" id="storename" class="form-control" placeholder="Enter Store Name" />
<div id="storeList"></div>
</div>
<div class="12u">
<ul class="actions align-center">
<li><input type="submit" value="Submit Product" /></li>
</ul>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$('#storename').keyup(function(){
var query = $(this).val();
if(query != '')
{
$.ajax({
url:"php/storelist.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#storeList').fadeIn();
$('#storeList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
});
</script>
Try the following :
1) Use the chrome network to check the request / response
2) If the field contains a long data check the max post size
3) If the field is a list, and you are selecting multiple choices you need to check this question
4) check if multiple fields have the same name/id
$(document).on('click', 'li', function(){
$('#storename').val($(this).text());
$('#storeList').fadeOut();
});
Triggers when you press the submit button, setting #storename value to nothing.
Add a class to the store names and target onclick using that.
I am unsure why my javascript form submission validation is not working – any help would be much appreciated.
I have 2 tables with a class: table-first & table second
Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
table-first has a class “voucher_input” on the input field for a voucher &
table-second has a class called “voucher-input2” on the voucher input field
I have written a javascript to prevent submission of the form if the voucher input field is empty
And if empty it should prompt up an error message
The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty
But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty
My code are as below. Many thanks
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not voucher_input2
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page.
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly