currently setting up a form to create a new order within a payment system and when I click any of the buttons within the form the form submits. Anyone know what the issue could be?
This is the code with the issue:
<form action="scripts/php/addorder.php" method="POST">
<script src="scripts/javascript/cookies.js"></script>
<script src="scripts/javascript/addproduct.js"></script>
<label>Choose Customer: </label>
<input type="text" value="" name="name" id="name" required readonly>
<button onclick ="window.open('customertable.php','popup','width=600,height=600');">Choose</button>
<br/>
<div id="products">
<label>Products: </label>
<br/>
ID: <input type="text" value=" " name="chosenproduct0" id="chosenproduct0" required readonly>
Name: <input type="text" value=" " name="chosenproduct0name" id="chosenproduct0name" required readonly>
Price: <input type="text" value=" " name="chosenproduct0price" id="chosenproduct0price" required readonly>
Quantity: <input type="number" value="1" name="chosenproduct0quantity" id="chosenproduct0quantity" required>
<button onclick ="findproduct('chosenproduct0');">Choose Product</button>
</div>
<br/>
<label>Discount: </label>
<input type="number" placeholder="0" name="discount" id="discount" step=".01" min="0">
<label>Total: </label>
<input type="number" value="0" name="total" id="total" readonly>
<button onclick="addproduct()">Add Product</button>
<br/>
<input type="submit" id="submit" value="Create New Order" class="button"/>
</form>
The default type for a <button> is submit. Explicity set it to button and it shouldn't submit the form by default:
<button type="button" onclick="addproduct()">Add Product</button>
By default, pages are refreshed/forms submitted when buttons are clicked. You can fix this by adding the attribute type="button" to your buttons.
<button type="button" onclick="myFunction()">My button</button>
Prevent using <button> element in the <Form> elements,
By default it's behavior is equivalent to <input type="submit"> element.
So Prefer this
<input type="button" value="Add Product">
Related
I have two forms. form1's field data is sending to form2. form2 have 1 set 3 inline inputboxs and 1 reset button.when i clicked the reset button form1's go back to default state with out refresh the page.how can I do that?
**form1 **
<form id="formDrink" onclick="submit1(this.drinkname,this.drinkprice,this.drinkquantity)" >
<input type="text" id="drinkname" name="drinkname" value="{{$drink->product_name}}">
<input type="hidden" id="drinkquantity" value="0" >
<input type="text" id="drinkprice" name="drinkprice" value="{{$drink->selling_bottle}}">
</form>
form2
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="" readonly="">
<input type="text" id="drinkQuantity" name="drinkquantity" value="" readonly="">
<input type="text" id="drinkPrice" name="drinkprice" value="" readonly="">
<input type="button" id="resetForm" onclick="drinkRemover()" value="reset" />
</form>
javascript
function drinkRemover(){
$("#formDrink")[0].reset();
}
I dont know why my javascript do not work.I tryed every posible ways but i cant reset the form1's fields to its default values.
This is what the reset input type is for:
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="drinkname">
<input type="text" id="drinkQuantity" name="drinkquantity" value="drinkquantity">
<input type="text" id="drinkPrice" name="drinkprice" value="drinkprice">
<input type="reset" id="resetForm" value="reset" />
</form>
When my page loads I hide a div containing a form using
$('#popupPerson').hide();
then in the body I build a table and this popup to help insert/update/delete row data using a form that is initally hidden
<div id="popupPerson" class="popupPerson">
<form id="form_popup_person" action="person_update" method="post">
<fieldset>
<legend>Person</legend>
<label for="id">id</label> <input name="id" type="number" />
<label for="revision">revision</label> <input name="revision" type="number" /><p>
<label for="lastName">lastName</label> <input name="lastName" type="text" />
<label for="firstName">firstName</label> <input name="firstName" type="text" /><p>
<label for="street">street</label> <input name="street" type="text" />
<label for="city">city</label> <input name="city" type="text" /><p>
<label for="county">county</label> <input name="county" type="text" />
<label for="state">state</label> <input name="state" type="text" />
<label for="postalCode">postalCode</label> <input name="postalCode" type="text" /><p>
<label for="birthDate">birthDate</label> <input name="birthDate" type="text" />
<label for="email">email</label> <input name="email" type="text" />
<label for="status">status</label> <input name="status" type="text" /><p>
<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" class="cancel" value="Cancel" />
<button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
<button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
<button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button> <!-- makes ALL BUTTONS DISAPPEAR -->
<button type="button" class="cancel" onClick="$(this).hide();">hide button</button> <!-- makes the BUTTON ITSELF DISAPPEAR -->
</fieldset>
</form>
</div>
and some js so that if a row in the table is clicked this fires and makes the div visible
$('#popupPerson').show();
I want to add a "Cancel" button to the form that simply closes/hides the div - no submitting, no resetting.
you can simply write like
<button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>
I would use this: <button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button> which closes the containing .popupPerson, incase you ever need more than one on a page.
Alternatively, you can put this in a script:
$(function(){
$(document).on('click','.popupPerson .cancel', function(){
$(this).closest('.popupPerson').hide();
// Do whatever else you want here, like eat the event (stopPropegation, etc).
});
});
And this is the element:
<a class="cancel">parent parent hide button</a>
How to disable require in inputs with name = "item_name",name="description" and name="quantity" when i click purpose and enable the require in purpose textarea by using javascript.
Edit: What I really mean is when i submit the form by clicking ADD, only the input with name item_name description quantity are required and When I submit the form by clicking Purpose, the textarea will be the one who is required
Here is my code:
<form action="../function/add_item.php" method="post">
<input id="autocomplete" name="item_name" placeholder="Item Name" required>
<input type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
I assume this is the code you might be looking for:
$(function() {
$('[type=submit]').on('click', function() {
if($(this).attr('name') == 'submit') {
$('[name=item_name], [name=description], [name=quantity]').attr('required', 'required');
$('[name=purpose]').removeAttr('required');
} else if($(this).attr('name') == 'purpose') {
$('[name=purpose]').attr('required', 'required');
$('[name=item_name], [name=description], [name=quantity]').removeAttr('required');
}
});
});
Add an id to your button
<button id="purpose" type="submit" class="btn btn-info">Purpose</button>
Then
$(function() {
$('#purpose').click(function() {
$('#item_name').removeAttr('required');
$('#description').removeAttr('required');
$('#quantity').removeAttr('required');
$('textarea').attr('required','1');
});
});
Try this one. I just added up some javascript and add id's
document.getElementById('purpose').onclick = function() {
document.getElementById("name").required=false;
document.getElementById("des").required=false;
document.getElementById("qnt").required=false;
}
<form action="../function/add_item.php" method="post">
<input id="name" name="item_name" placeholder="Item Name" required>
<input id="des" type="text" name="description" placeholder="Description placeholder="Quantity"" required>
<input id="qnt" type="number" name="quantity" required>
<button name="submit" type="submit" class="btn btn-default">ADD</button>
<textarea placeholder="Purpose (e.g. Office Use)" name="purpose" required></textarea>
<button id="purpose" name="purpose" type="submit" class="btn btn-info">Purpose</button>
</form>
i have a hidden section ("secundaria") and i want to show it from a from out of the section with js. The section and its css is:
<section id="secundaria">
<!--Formulario 2-->
<h3>Nuevo pedido</h3>
<form id="formulario_secundario">
Nombre:
<input type="text" name="Nombre" value="" />
<br/>
Fecha de cierre:
<input type="text" name="Fecha_cierre" value="" />
<br/>
<input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
<br/>
<input type="submit" value="Cancelar" name="cancelar">
</form>
</section>
And its css:
section#secundaria{
visibility:hidden;
}
I want to show it from this form with this function:
<form id="nuevo_form">
Envio:
<input type="text" name="envio" value="" />
<br/>
<input type="submit" id="nuevo" value="" onclick = "nuevo_formulario()">
</form>
<script>
function nuevo_formulario(){
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("secundaria").style.visibility = "visible";
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("nuevo_form").reset();
}
</script>
It's for class, so my teachers want the function and the section inside another section and the form outside. Thanks.
Your code is working correctly. The problem is that input of type submit will implicitly send the form, causing a page reload. Change to type="button" and everything works correctly.
function nuevo_formulario() {
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("secundaria").style.visibility = "visible";
console.log(document.getElementById("secundaria").style.visibility);
document.getElementById("nuevo_form").reset();
}
#secundaria {
visibility: hidden;
}
<section id="secundaria">
<!--Formulario 2-->
<h3>Nuevo pedido</h3>
<form id="formulario_secundario">
Nombre:
<input type="text" name="Nombre" value="" />
<br/>Fecha de cierre:
<input type="text" name="Fecha_cierre" value="" />
<br/>
<input type="submit" value="Aceptar" name="aceptar" onclick="validar_rellenar(this.form)" />
<br/>
<input type="submit" value="Cancelar" name="cancelar">
</form>
</section>
<form id="nuevo_form">
Envio:
<input type="text" name="envio" value="" />
<br/>
<input type="button" id="nuevo" value="" onclick="nuevo_formulario()">
</form>
Check this fiddle: https://jsfiddle.net/zjwon1sy/
Simply change the input input type="button"
I have a multiple form, contains 2 input boxes and a submit button. i have given tab order for each input. i have tab index for each input type. tab order is moving vertically than horizontally . it should go to first input box , second input box and then submit button.
Below is the code.
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
below is the js code
$('form').each(function(){
var list = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
first = list.first();
list.last().on('keydown', function(e){
if( e.keyCode === 9 ) {
first.focus();
return false;
}
});
});
its a dynamic form which is coming in loop and contains many fields. i want to give tab order for only 3 input fields.
http://jsfiddle.net/mWLtp/5/
Please help me in solving this issue.
Thank in advance.
set distinct tab index. for your case set it in 1 t0 9.
Like
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="4">
textbox2 <input type="text" tabindex="5">
<input type="button" tabindex="6" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="7">
textbox2 <input type="text" tabindex="8">
<input type="button" tabindex="9" value="submit">
</div>
</form>
jQuery Way DEMO
var index = 1;
$("form input").each(function () {
$(this).attr("tabindex", index);
index++;
});
HTML WAY Well You Can Directly Give Tabindex DEMO
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="4">
textbox2 <input type="text" tabindex="5">
<input type="button" tabindex="6" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="7">
textbox2 <input type="text" tabindex="8">
<input type="button" tabindex="9" value="submit">
</div>
</form>
well, if you dont define a tabindex attribute it defaults to horizontal, you dont need any tabindex or jquery
All the tabindex=1 will be taken in order from top to bottom, no matter if you have placed them in single <div> or different. Then will come the turn of tabindex=2.
Your Solution:
Change the tabindex like 1,2,3,4,5,6.. instead of 1,2,3,1,2,3,...
Hope this helps. :)
Give to individual tabindex value,instead of override your tabindex value.
JSFIDDLE DEMO