I want to increment the form number once the user had submitted the form successfully. Is there any way to increment it through JavaScript or jQuery.
<form action="">
form no:1<br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="">Submit</button>
</form>
I would suggest something like this:
$(function () {
$("form").submit(function () {
$.post("url", $(this).serialize(), function () {
$("#count").text(parseInt($("#count").text() + 1);
});
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
form no: <span id="count">1</span><br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="increment();">Submit</button>
</form>
Related
I'm new to JS and I practice, I want to connect between my form "firstname" to my function so when someone will click the button it will change the headline to "Hello ____ (his name)". I can't understand what should I add and where to my code so it will work. Thanks for your help.
<h1 class="example"> My Application </h1>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello(name)">Click here to change headline</button>
`<script>`
function hello(name){
return document.querySelector(".example").innerHTML = "Hello" + name ;
}
</script>
There's a few small issues in your code, but you were close. You're not passing anything into the function, you just have to get the values from your form. There are several ways to do this, but without overly complicating what you already have or understand, here's a working version.
<h1 class="example"> My Application </h1>
<form action="/action_page.php">
First name:<br>
<input type="text" id="firstName" name="firstname" value="" >
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<button onclick="Hello()">Click here to change headline</button>
<script>
function Hello(){
var name = document.getElementById("firstName").value;
document.querySelector(".example").innerHTML = "Hello " + name ;
}
</script>
Notice the addition of the 'id="firstName"' attribute to your input.
How to select input:empty and input:not(:empty) value after click on submit button and add following conditions:
If value is empty, after click change background color.
(It's not working as you can see in the input Text3)
If value is not empty, after click add these three conditions:
(It's not working in my sample code)
• {cursor: not-allowed;}
• readonly
• Change Background color
Here is my sample code:
$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").style.cursor = "not-allowed";
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
Here is a slightly modified version of your code. First select all the input tags with type of text then see if their length is 0 or not on this apply what you want to it.
$(".signupbtn").on('click', function() {
$('input:text').each(function(){
if($(this).val().length == 0 ){
$(this).css("background", "red");
}else{
$(this).val("Successfully Received!");
$(this).css("background", "green");
$(this).css("cursor","not-allowed");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").css("cursor","not-allowed");
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
I have a form with two buttons, the first buttons confirms the data entered and shows a verification code input, and the other one submits the code and the form, what i want is to put validations at the first button to required fields so he can't confirm unless he has filled all the required fields, how can i do that using js?
<form>
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm"><br>
<input type="submit" value="Submit">
</form>
I think you are looking for something like this
function validate() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
if(fname==null || fname=="" || lname==null || lname=="") { // Validate the data here
alert("Please fill all the fields");
}
else {
alert("Data confirmed. Now you can submit.");
document.getElementById("submit").disabled = false;
}
}
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
<input type="button" value="Confirm" onclick="validate()"><br>
<input type="submit" value="Submit" id="submit" disabled>
</form>
Use jQuery Validation:
<form id="UserForm">
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm" onclick="Validate()"><br>
<input id="submitBtn" type="submit" value="Submit" disabled>
</form>
function Validate() {
var isValid = $("#UserForm").valid();
if (isValid)
$('#submitBtn').prop('disabled', false);
else
$('#submitBtn').prop('disabled', true);
}
You must'n't use JS for validation because you mustn't use client side for this validation. this is evil. Use PHP or a server side to be a litle more secure.
<form>
First Name:
<INPUT type="text" ><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="textarea">
</FORM>
<FORM action="file.php" method="post" name=form1>
<INPUT type="submit" value="Submit">
</FORM>
https://jsfiddle.net/674brq05/
Not sure I understand your question, but you can get the form information from JS:
<form onsubmit="myFunc()">
Enter name: <input type="text" id="name">
<input type="submit">
</form>
The above does so the function "myFunc()" runs on submit.
And then the JS:
function myFunc() {
var name = document.getElementById('name');
alert(name.value);
return false; // Return false to cancel the submit
}
Way to take two form tag for submitting one form:
Try this:
HTML:
<form id="myForm" action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
JAVASCRIPT:
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/