reset form not working - javascript

function resetForm() {
document.getElementById('myForm').reset();
}
<div id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</div>


I think you need a form
not a
div
just look this example:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset


The element you're targetting needs to be a <form> tag :
function resetForm() {
document.getElementById('myForm').reset();
}
<form id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</form>


You are using div instead of form. Just updated the first tag of your html code and voila it will start working.
Hope this solves your query.
function resetForm() {
document.getElementById('myForm').reset();
}
<form id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</form>

Related

Count number of inputs and sum depending on its values

I would like to do two things:
I want to count the number of inputs that have a value. (doesn't matter if the value is A or X).
Then, count the number of inputs whose value is equal to A
therefore, the results should contain 6 of 14 items
This is what I tried to count the inputs that already have value:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

One possible implementation with jQuery:
let any = 0;
let a = 0;
$(".col input").each((idx, item) => {
if (!item.getAttribute("value")) {
return;
}
if (item.getAttribute("value") == "A") {
a += 1;
}
any += 1;
});
$(".results").html(a + " of " + any + " items")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>

Use the same logic that you made to find the filled inputs, to find the inputs with value A
const filledInputs = $(".col input").filter(function () {
return !!this.value;
}).length;
const inputWithValA = $(".col input").filter(function () {
return this.value === 'A';
}).length;
console.log(filledInputs)
console.log(inputWithValA)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A" />
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="results">6 of 14 items</div>

var $inputs = $(".col input").filter(function() {
return !!$(this).val();
});
var inputsFilled = $inputs.length
var inputsA =$inputs.filter(function() {
return $(this).val() == 'A';
}).length
console.log(inputsFilled)
console.log(inputsA)
$(".results").html(`${inputsA} of ${inputsFilled} are A`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

Here's a minimal solution:
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
Full snippet:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
console.log(filledInputs);
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

Don't mix DOM and jQuery like that
You are looping over one element
Perhaps you meant this:
const $breakdown = $("#breakdown");
const $results = $(".results")
let totalA = 0;
let totalNonEmptyInput = 0;
$(".col").each(function(i, ele) {
const $inputs = $(ele).find("input");
let As = 0;
const notEmpty = $inputs.filter(function() {
const val = this.value.trim();
if (val === "A") {
As++;
totalA++;
}
totalNonEmptyInput += val !== "";
return val !== ""
}).length;
$results.html(`${totalA} of ${totalNonEmptyInput}`)
$breakdown.append(`<li>${(i+1)}: ${notEmpty}/${$inputs.length} - found ${As} A</li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
<ul id="breakdown"></ul>

const cols_ = document.querySelectorAll('.col');
let inputs_val_a = []; // matched input will stored here
cols_?.forEach(function(col,col_i){
col.querySelectorAll('input')?.forEach(function(ipt, ipt_i){
if( ipt.value == 'A' ){
// match
console.log('cols:'+col_i+' input:'+ipt_i+' have value "A"');
inputs_val_a.push(ipt);
}
})
});
document.querySelector('.results').innerHTML = 'there is '+ inputs_val_a.length + ' inputs with value == A';
<div class="results"></div>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>

Maybe the easiest method (and marginally more performant than filtering) in vanilla JS is to do three selections: one on all inputs, and then two selections using the value attribute.
const inputs = document.querySelectorAll('input');
const inputsAll = document.querySelectorAll('[value]');
const inputsA = document.querySelectorAll('[value="A"]');
console.log(`${inputsAll.length} of ${inputs.length} items`);
console.log(`${inputsA.length} of ${inputs.length} items`);
<div class="col"> <input type="text" value="A"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text"> <input type="text"> <input type="text"></div><div class="results"></div>

If you want updated counts while you are filling in the fields you could recalculate it in an event driven function:
const inps=$(".col input").get();
$("body").on("input",".col input",upd8);
function upd8(){
[any,A]=inps.reduce((a,c)=> (c.value&&++a[0]&&c.value.toUpperCase()=="A"&&++a[1],a),[0,0]);
$(".results").html(A + " of " + any + " items")
};
upd8();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>

JS FormData giving UncaughtTypeError when the HTML form data seems okay

Here's the HTML code:
<div class="some_class">
<form id="some_acc">
<p>First Name</p>
<input type="text" id="firstname" name="firstname" placeholder="Enter your first name">
<p>Last Name</p>
<input type="text" id="lastname" name="lastname" placeholder="Enter your last name">
<p>Date of Birth</p>
<input type="date" id="dob" name="dob" placeholder="Enter your date of birth">
<p>Email</p>
<input type="text" id="email" name="email" placeholder="Enter your email">
<p>Gender</p>
<div class="fieldset_account">
<fieldset>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="Other" name="gender" value="other">
<label for="other">Other</label>
</fieldset>
</div>
<p>Choose no.</p>
<div class="acc_no">
<fieldset>
<input type="radio" id="regular" name="account_type" value="regular">
<label for="account_type">Acc 1</label>
<input type="radio" id="zero_bal" name="account_type" value="zero_bal">
<label for="account_type">Acc 2</label>
<input type="radio" id="children_acc" name="account_type" value="children_acc">
<label for="account_type">Acc 3</label>
<input type="radio" id="sr_cit_acc" name="account_type" value="sr_cit_acc">
<label for="account_type">Acc 4</label>
</fieldset>
</div>
<p>Remarks</p>
<div id="textarea_bio">
<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
</div>
<br><br><input type="submit" value="Submit">
</form>
</div>
Here's the JS:
function FormDataToJSON(FormElement){
var formData = new FormData(FormElement);
var ConvertedJSON= {};
for (const [key, value] of formData.entries())
{
ConvertedJSON[key] = value;
}
return ConvertedJSON
}
var ReceivedJSON = FormDataToJSON(document.getElementById('some_acc'));
console.log(ReceivedJSON);
The error I'm getting is this:
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
Doesn't seem like there's anything wrong with the HTML form data. I'm guessing the radio buttons are the issue, but when I comment them out and try again, the error persists. What is going wrong here?
Thanks

onclick event doesn't work after form closing tag

The problem is that onclick event button works fine before form starting tag (at the begining of the html document)
but it doesn't work after form closing tag!
I want to know why this happens?
What is the relation between the place of my button and js function call?
<form name="Register" action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Username</label>
<input type="text" name="username" placeholder="Enter your name">
<br><br>
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password">
<br><br>
<label>Message</label>
<br>
<textarea name="message" rows="8" cols="50" readonly>Your Message (currently disabled)</textarea>
<br><br>
<label>Upload your cv</label>
<input type="file" name="cv">
<br><br>
<label>Remember me</label>
<input type="checkbox" name="remember">
</fieldset>
<br><br>
<fieldset>
<legend>Favourits</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser"> Oprera
<br>
<input type="radio" name="browser"> Chrome
<br>
<input type="radio" name="browser"> Firefox
<br><br>
<label>Choose your Mobile</label>
<br>
<input type="radio" name="mobile"> Samsung
<br>
<input type="radio" name="mobile"> Apple
<br>
<input type="radio" name="mobile"> Nokia
</fieldset>
<br><br>
<fieldset>
<legend>Button Options</legend>
<input type="hidden" value="testing">
<input type="submit" name="submit_Register" value="submit">
<input type="reset" name="" value="reset">
</fieldset
</form>
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />
and here's the script
<script>
function sayHello()
{
alert("Hello");
}
</script>

Your button is not working because of invalid closing </fieldset> tag:
</fieldset
function sayHello()
{
alert("Hello");
}
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />
<form name="Register" action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Username</label>
<input type="text" name="username" placeholder="Enter your name">
<br><br>
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password">
<br><br>
<label>Message</label>
<br>
<textarea name="message" rows="8" cols="50" readonly>Your Message (currently disabled)</textarea>
<br><br>
<label>Upload your cv</label>
<input type="file" name="cv">
<br><br>
<label>Remember me</label>
<input type="checkbox" name="remember">
</fieldset>
<br><br>
<fieldset>
<legend>Favourits</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser"> Oprera
<br>
<input type="radio" name="browser"> Chrome
<br>
<input type="radio" name="browser"> Firefox
<br><br>
<label>Choose your Mobile</label>
<br>
<input type="radio" name="mobile"> Samsung
<br>
<input type="radio" name="mobile"> Apple
<br>
<input type="radio" name="mobile"> Nokia
</fieldset>
<br><br>
<fieldset>
<legend>Button Options</legend>
<input type="hidden" value="testing">
<input type="submit" name="submit_Register" value="submit">
<input type="reset" name="" value="reset">
</fieldset>
</form>
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />

Required Fields and Redirects in JavaScript

I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!

Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>

Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.

Not able to select radio button in jquery

I am new. I want the relevant inputs to be activated based on the selection made. Here is my page's HTML
<body>
<form id="add_employer" method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />
<p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<p><label for="id_emp_family_name">Employer's Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer'sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer's Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
<input type="submit" value="Add" />
</form>
</body>
and here is my JS
$(document).ready(function(){
$("p:has(input)").hide()
$("[value^='Add']").hide()
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("p:has(input)").unhide()
});
Please tell me how to find if one of the radio button has been clicked.The input fields should unhide on clicking but they are not unhiding.

<body>
<form id="add_employer" method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />
<p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<div id="divIndividual">
<p><label for="id_emp_family_name">Employer's Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer'sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer's Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
</div>
<div id="divCompany">
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
</div>
<input type="submit" value="Add" />
</form>
</body>
Javascript
$(document).ready(function(){
$("#divIndividual").hide();
$("#divCompany").hide();
$("[value^='Add']").hide();
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("#divIndividual").show();
$("#divCompany").hide();
$("[value^='Add']").show();
});
$("label:contains('Company')").click(function(){
$("#divIndividual").hide();
$("#divCompany").show();
$("[value^='Add']").show();
});
Solution without updating HTML:
$(document).ready(function(){
$("p:has(input)").hide()
$("[value^='Add']").hide()
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("p:has(input)").hide()
$("#id_emp_family_name").closest("p").show();
$("#id_emp_first_name").closest("p").show();
$("#id_emp_middle_name").closest("p").show();
$("[value^='Add']").show()
});
$("label:contains('Company')").click(function(){
$("p:has(input)").hide()
$("#id_emp_coname").closest("p").show();
$("[value^='Add']").show()
});

Categories