Html form submit Check string - javascript

Need to setup an HTML Form, if entered value match given value then ACTION1 else ACTION2
i have 2 pages m1.htm & m2.htm, my value is 12345, if form submit 12345 open m1.htm if wrong open m2.htm.
<form name="input" action="m1.htm" method="post">
<input type="text" name="q"><input type='submit' value='Search'/>

try this
<form name="input" action="" method="post">
<input type="text" name="q">
<input type='submit' value='Search' id='search'/>
<script>
$(document).ready(function(){
$("#search").click(function(){
if($("input[name='q']").val() == 12345){
document.forms[0].action="m1.html";
document.forms[0].submit();
return true;
}else{
document.forms[0].action="m2.html";
document.forms[0].submit();
return true;
}
});
});
</script>
http://jsfiddle.net/6ftjhm88/

You should try to do it yourself first then ask the question not just ask for the code.
Code Snippet:
<form name="input" action="m1.htm" method="post">
<input type="text" name="q"><input type='submit' value='Search' id='submit'/>
</form>
<script>
$(document).ready(function()
{
$('#submit').on('click', function(e)
{
e.preventDefault();
e.stopPropagation();
if($('input[type="text"][name="q"]').val() == "")
{
alert('Please Enter a Value!');
return false;
}else if($('input[type="text"][name="q"]').val() == "12345")
{
window.location.href = 'm1.htm';
}else {
window.location.href = 'm2.htm';
}
});
});
</script>

Just use location.replace() function to load your html file according to your condition
i.e
if(value=12345)
location.replace('/m1.htm')
else
location.replace('/m2.html')

Related

how to validate array input field using javascript

How to validate array input field?Please help me to solve this issue.
<form action="" method="post" name="frmPayPal1" id="frmPayPal1" onsubmit="return validateForm()"/>
<input type='text' name='txt_jobid[]' id='txt_jobid' >
<input type="submit" value="submit"/>
</form>
<script>
function validate(job)
{
if(job.elements['txt_jobid[]'].length == 0)
{
alert(" Please Enter Value!");
return false;
}
}
</script>
Maybe this...
<form action="" method="post" name="frmPayPal1" id="frmPayPal1">
<input type="text" name="txt_jobid[]" id="txt_jobid">
<input type="submit" value="submit">
</form>
<script>
$(document).ready(function(){
$('#frmPayPal1').on('submit', function(){
var lngtxt=($(this).find('input[name="txt_jobid[]"]').val()).length;
console.log(lngtxt);
if (lngtxt==0){
alert('please enter value');
return false;
}else{
//submit
}
});
});
</script>
You need to pass this
onsubmit="return validateForm(this)"
Also, return true if validation succeeds
function validate(job)
{
if(job.elements['txt_jobid[]'].length == 0)
{
alert(" Please Enter Value!");
return false;
}
return true;
}
function validateForm(){
if((document.getElementById("txt_jobid").value).length == 0){
alert(" Please Enter Value!");
return false;
}
}
<form action="" method="post" name="frmPayPal1" id="frmPayPal1" onsubmit="return validateForm()">
<input type='text' name='txt_jobid[]' id='txt_jobid'>
<input type="submit" value="submit"/>
</form>
Please let me know if you have any query.
here the solution of input type array. I have already post the solution on stackoverflow . please the below link.
https://stackoverflow.com/a/48092147/8189107
here the js fiddle link. you can see it's working here
https://jsfiddle.net/q0d76aqx/42/

Validate on submit button got issue

Here is my code example
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submitForm();">
Below is my function
<script type="text/javascript">
function submitForm()
{
var name = document.getElementById("name").value;
return false;
}
</script>
On press, the form still submit, but if i change
onsubmit="return false;"
then the form won't submit, how do I use the function to return false as i need do some if else validation
<script type="text/javascript">
function submitForm() {
return false;
}
</script>
<form
action="next2.php"
method="post"
name="next2"
id="next2"
onsubmit="return submitForm();"
>
submit is already a function for the form, you should call your JavaScript function something different, for instance submitForm as in the above.
just remove the semicolon in your function and place a alert in your function to make sure whether the function is called first.and then try to add validation
I like to make an invisible button for the actual submit which is only triggered after form validation:
function validate() {
var valid = true;
$.each($('input'), function(){
valid = valid && $(this).val().length > 0;
})
if (valid) {
$('#realSubmit').click();
} else {
alert('Please fill out all fields!');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submit();">
<input type="text" placeholder="Enter Name" />
<input type="password" placeholder="Enter Password" />
<button type="button" onclick="validate()">Submit</button>
<button type="submit" id="realSubmit" style="display:none"></button>
</form>

Redirect the Page after Form is Submitted - Javascript

Q1. How could I place a code that can redirect the page after the form submitted??
Q2. I am looking some article about return value, anyone please recommend some good article for me.
<form method="post" name="formName">
<input type="text" value="Name" name="cName">
<br>
<input type="submit" onClick="return fValidator(this)">
</form>
<script language="javascript1.8.5" type="text/javascript">
function fValidator(){
var vName = document.formName.cName;
var nameReg = /^[a-zA-Z]+$/;
if (vName.value != ''){
if (vName.value.match(nameReg)){
alert("Your form is sumitted now!");
return true;
location.replace("http://www.w3schools.com");
} else{
alert("Alphabet only!");
return false;
}
} else{
alert("Fill the mandatory field!");
return false;
}
}
</script>
Use "onsubmit".
Eg: <form onsubmit="myFunction()">
This lets you to control the page behaviour after submitting the form.

I want to When have balance >0 then form not submit in php?

I want, If balance field is <0, If Recharge amount filed >0 then form not submit, Can you give me Java script or php code please. Here is my editing code but not working I dont understand. Please give me solutions
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
form.onsubmit = function(e){
if(document.getElementById("bal").value==30){
e.preventDefault();
alert("Value must not be equal to 30");
}
if(document.getElementById("bal").value<0){
e.preventDefault();
alert("error msg");
return false;
}
if(document.getElementById("amount").value>0){
e.preventDefault();
alert("error msg");
return false;
}
};
</script>
</head>
<body>
<form action = '' method='post' name="recharge">
<input type="text" id="bal" name="bal" value="">Balance</><br>
<input type="text" id=="number" name="number" value="">Rehcarge number</><br>
<input type="text" id="amount" name="amount" value="">Amount</><br>
<input type="submit" name="submit" value="SUBMIT">
</form>
</body>
</html>
Try:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery("input[name='button']").click(function(e){
//getting your balance amount
bal = jQuery("input[name='balance']").val();
//if balance is lesser than 0, form will be submitted
if(bal<0){
jQuery('form').submit();
}
});
});
</script>
Make sure your input fields are enclosed inside <form></form> tags.
You can check the submitted balance value like
$balance = $_REQUEST['balance']; if($balance <=30){ echo "cant submit form"; header("location: your form path ") ; }
Or you can user jQuery to check the value and show alert message to user
You can do this via javascript or using any of the js libraries, check on form submit as below:
Try
var form = document.getElementById("fr");
form.onsubmit = function(e){
if(document.getElementById("bal").value==30){
e.preventDefault();
alert("Value must not be equal to 30");
}
return true
};
See demo here
do in jquery like this
$("input[type=submit]").click(function(e){
if($("input[name=amount]").val() == "30")
{
alert("you have entered amount as 30. Form not submitted");
return false;
}
else if($("input[name=amount]").val() > $("input[name=balance]").val())
{
alert("you dont have enough balance");
return false;
}
});
And Add this
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script>
to head of html
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($)
{
jQuery("input[name='submit']").click(function(e)
{
balance = jQuery("input[name='balance']").val();
amount = jQuery("input[name='amount']").val();
if(balance < 0 && amount > 0)
{
alert('Balance is less than 0 and amount is greater than 0 : So not submitting');
jQuery('form').submit();
}
else
{
alert('Balance is greater than 0 : So not submitting');
}
});
});
</script>
<form action = '' method='post'>
<input type="text" name="balance" value="">Balance</><br>
<input type="text" name="number" value="">Rehcarge number</><br>
<input type="text" name="amount" value="">Amount</><br>
<input type="submit" name="submit" value="SUBMIT">
</form>

If was not alert go to url else do not go

I want make validation jquery without using from plugin, problem is here that after click on button and get alert(if field is empty) it go to url # that there is in <form action="#"....
I want if get alert(mean if field is empty) 'input is empty' not go to url that there is in ...action="#"..., if filed has value it go to url. i can not use from ajax call or preventDefault or window.location(Because one from field is input:file).
Example: http://jsfiddle.net/gb7nh/1/
How can fix it?
<form action="#" method="POST">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')alert('input is empty')
})
Bind to form submittal instead, and return false to prevent the form from submitting.
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
var valid = true;
$('input[type="text"]').each(function() {
if ($(this).val().length == 0) {
alert('A field is empty!');
valid = false;
return false;
}
});
if (!valid) {
return false;
}
});
This should do the trick for you:
<button id="cli" onclick="return clickButton();">Submit</button>
And it's corresponding JavaScript
function clickButton(){
if($('input[type="text"]').val()==''){
alert('input is empty');
return false;
}
}
Probably you need to return false in case when you show alert woth errors:
$('#cli').live('click',function(e){
//e.preventDefault();
if($('input[type="text"]').val()=='')
{
alert('input is empty');
return false;
}
});
Code: http://jsfiddle.net/gb7nh/2/
I wolud do it like Elliot. Only i would have used:
<form action="#" method="POST" id="myform">
<input type="text" name="name">
<button id="cli">Submit</button>
</form>
$('#myform').submit(function() {
if (!$('input[type="text"]').val()) {
alert('input is empty');
return false;
}
});
This.
if (!$('input[type="text"]').val())
Instead of:
if ($('input[type="text"]').val()=='')

Categories