Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
Related
I am trying to Manipulate the Text with id 'varname' (Spartans) with the value inputted in the form saved as a variable 'input'
<div class="middle">
<h2 class="greet" id="demo">Welcome Back, <span id="varname">Spartan</span></h2>
<div class="form">
<form>
<label for="Name">Enter Your Name</label>
<input type="text" id="Name">
<input type="submit" value="Submit" onclick="myFunction()">
</form>
</div>
<script>
function myFunction(){
var input= document.getElementById("Name").value;
document.getElementById("varname").innerHTML = input;
}
</script>
Use <input type="button"> instead of <input type="submit">
https://jsfiddle.net/yt0kgnqe/
In your form, try this:
<form id="manipulate">
<label for="Name">Enter Your Name</label>
<input type="text" id="Name">
<input type="submit" value="Submit">
</form>
In your javascript,
document.getElementById("manipulate").addEventListener("submit", e => {
e.preventDefault()
const formData = new FormData(e.target)
document.getElementById('varname').innerHTML = formData.get("Name")
})
e.preventDefault() stops the form from reloading the page and formData gets the input values inside the form
I'm trying to submit a form with jquery, but it does not acknowledge that I submitted it when I click the "submit" button.
My html is as follows:
<form id="singleParam" role="form">
<div class="form-group">
<label for="sample_size">Number of samples needed</label>
<input name="choices[sample_size]" type="number" class="form-control" id="sample_size" placeholder="Enter desired number of samples">
</div>
<div class="form-group">
<label for="mode">Mode of the distribution (value most likely to be sampled)</label>
<input name="choices[mode]" type="number" class="form-control" id="mode" placeholder="Enter the likeliest value for your parameter">
</div>
<div class="form-group">
<label for="confidence">Confidence interval factor</label>
<input name="choices[confidence]" type="number" class="form-control" id="confidence" placeholder="Enter desired confidence interval factor">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-lg" id="submit" name="submit">
</div>
</form>
and JS is:
$('#singleParam').on('submit', function () {
alert('Form submitted!');
console.log('Form submitted!');
return false;
});
The alert() or console.log() in the loop do not work, meaning that jquery did not run the code on submit. What am I doing wrong? It might be worth mentioning that I am using bootstrap.
Change the button type from type="button" to type="submit"
EDIT:-
Make sure you are calling all your event handlers once the DOM is fully loaded by adding all the code inside dom ready event like:-
$(document).ready(function() {
// code here
});
In my web application, I have a form that provides me to create new blog. The code is:
<form method="post" action="#" id="createBlog">
<div class="form-group">
<label for="BlogName">Blog Name</label>
<input type="text" class="form-control" placeholder="Blog Name" name="blogName">
</div>
<div class="form-group">
<label for="Content">Content</label>
<textarea type="text" class="form-control" placeholder="content" name="content"></textarea>
</div>
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
<button type="button" name="Add more image" class="btn btn-default" onclick="addMoreFile()">+ Add More Image</button>
<br>
<br>
<button type="submit" name="send" class="btn btn-default" value="Send">Send</button>
</form>
For this form, my plan is that when I press the "+ Add More Image" button, to create additional file upload area, which is:
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
To do this, I used Javascript and applied two approaches. When I used my first approach which is my prefer due to it is more easy to implement, nothing happened. For my second approach, it works.
First Approach:
function addMoreFile(){
var createForm = document.getElementById("createBlog");
var uploadFile = createForm.getElementsByTagName("div")[2];
var firstButton = createForm.getElementsByTagName("button")[0];
createForm.insertBefore(uploadFile,createForm.getElementsByTagName("button")[0]);
}
Second Approach:
function addMoreFile(){
var divNode = document.createElement("div");
divNode.setAttribute("class","form-group");
var labelNode = document.createElement("label");
labelNode.setAttribute("for","Image");
labelNode.innerHTML = "Upload Image";
var myInput = document.createElement("input");
myInput.setAttribute("type","file");
myInput.setAttribute("class","form-control");
myInput.setAttribute("name","myImage");
divNode.appendChild(labelNode);
divNode.appendChild(myInput);
createForm.insertBefore(divNode,createForm.getElementsByTagName("button")[0]);
}
What is the difference between two approaches/codes, and why it is not work when I apply the first approach?
How go get an input text value in JavaScript?
I want to get input text value in jquery script but it prompted empty.
my script code:
<script type="text/javascript">
var emails;
function checkRegistration() {
emails = document.getElementById('my_email').value;
alert(emails);
}
</script>
my form code :
<form method="post" role="form" onSubmit="return checkRegistration()" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address">
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>
First check are you using jquery.min.js file or not.
Second if you want to get value using id. id should be unique on that page.
Try below
var my_email= $('#my_email').val();
Edit, Updated
Add required attribute to input type="email" element, to prevent form submission if value not entered by user
Use .onchange event
var emails = document.getElementById("my_email");
function checkRegistration() {
alert(this.value);
}
emails.onchange = checkRegistration;
<form method="post" role="form" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>