I have an html form which is supposed to appear only after clicking a submit button. I have added simple JavaScript to display the same on click.
Intention is show the update form on click of the button above it. Can anyone help me out to find what I did wrong?
function showForm() {
alert('Form has been submitted');
document.getElementByClass(UpdateForm - section).style.display = 'block';
}
.UpdateForm-section.hidden {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
Try the below changes in your code.
In CSS:
remove .hidden from .UpdateForm-section.hidden
In JS:
use querySelector instead of getElementByClass and wrap the name of the class in quotes.
Wokring code:
function showForm() {
alert('Form has been submitted');
document.querySelector('.UpdateForm-section').style.display = 'block';
}
.UpdateForm-section {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
I suggest you to have the following approach: define a desired style when your element will be shown:
.UpdateForm-section { // here we set the default style of the div -> not displayed
display: none;
}
.UpdateForm-section.active { // here the CSS selector is stronger, so it will override the previous statement
display: block;
}
Then in your javascript, you just add the "active" class to the element when you want it to show:
function showForm() {
alert('Form has been submitted');
document.querySelector(".UpdateForm-section").classList.add('active'); // Prefer to use an id to select an unique element to avoid miss coding
}
You just need to save your form in a variable, and you can easyly change it after it. You will need to remove .hidden from your css.
You need to use form[0], because when you make getElementsByClassName, you are getting an array:
function showForm() {
alert('Form has been submitted');
var form = document.getElementsByClassName("UpdateForm-section");
form[0].style.display = 'block'
}
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>
My html code like this :
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit">
</form>
I'm using required HTML5 attribute to validate fields.
If user does not input text, it will display HTML5 error.
I want to disable the submit button if any of the required fields are left empty.
How can I do it?
You can disable the pointer events on the button with CSS.
form:invalid>#submit {
pointer-events: none;
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
You could also disable the button using Javascript.
function disableField() {
const invalidForm = document.querySelector('form:invalid');
const submitBtn = document.getElementById('submit');
if (invalidForm) {
submitBtn.setAttribute('disabled', true);
} else {
submitBtn.disabled = false;
}
}
disableField();
const inputs = document.getElementsByTagName("input");
for (let input of inputs) {
input.addEventListener('change', disableField);
}
<form>
<label for="name">* Name</label>
<input type="text" id="name" required><br>
<label for="name">* Address</label>
<input type="text" id="address" required><br>
<input type="submit" value="Submit" id="submit">
</form>
you can do it after true
$("#button").prop("disabled", true);
You can try something like this:
$(function() {
$("#input-text").keyup(function () {
if($("#input-text")[0].checkValidity()){
$('#submit-button').attr('disabled', 'disabled');
}else{
$('#submit-button').removeAttr('disabled');
}
});
})($);
<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>
An more generic solution for multiple forms and supporting multiple inputs and buttons.
It detects the change event directly on forms individually, and then change the disabled attribute for all submit types
function disableFormSubmit(form) {
const buttons = form.querySelectorAll(
'button[type="submit"], input[type="submit"]'
);
const disableButtons = () =>
buttons.forEach(el => (el.disabled = form.matches(":invalid")));
form.addEventListener("change", disableButtons);
disableButtons();
}
document.querySelectorAll("form").forEach(disableFormSubmit);
<form action="/">
<legend>First form</legend>
<input type="text" required> <br>
<input type="Checkbox" required> required checkbox <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
<hr>
<form action="/">
<legend>Second form</legend>
<select required>
<option value="" disabled selected>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> <br>
<input type="radio" required name="radio"> required radio <br>
<input type="submit">
<button type="submit">Button submit</button>
</form>
Personally i would go on an solution using only CSS as a visual cue, unless you need the disabled attribute
So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method
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"