I've tried the following code for javascript validation. When the form is submitted, only the first input field is validated. How could I validate all the dynamic values of the form?
<script type="text/javascript">
function validate() {
if (document.f.phone.value.length == "0") {
alert("Phone is required");
document.f.phone.focus();
return false;
} else if (document.f.file.value.length == "0") {
alert("file is required ");
document.f.file.focus();
return false;
}
return true;
}
</script>
<?php
echo '<form name="f" action="" method="post" enctype="multipart/form-data" onsubmit="return validate();">
<input type="text" name="phone[]" class="required">
<input type="file" name="file[]" class="required">
<input type="button" class="add" value="add"/>
<input type="submit" value="Submit" name="submit" class="Submit">
';
?>
if i understood correctly then you want to validate dynamic value in the form. instead of writing logic to validate the fields just add the required keyword to the fields which you want to make mandatory. that should save you extra effort of writing validation. go for custom validation when inbuilt validation are not enough
<form name="f" action="" method="post" enctype="multipart/form-data">
<input type="text" name="phone[]" required class="required">
<input type="file" name="file[]" required class="required">
<input type="button" class="add" value="add" />
<input type="submit" value="Submit" name="submit" class="Submit">
Related
I am having an input field and a submit button:
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="validate()" >
</form>
function validate()
{
var flag = 0;
if(document.getElementById("sponsar_name").value == null || document.getElementById("sponsar_name").value == "")
{
document.getElementById("sponsar_name").style.borderColor = 'red';
flag = 1;
}
else
{
document.getElementById("sponsar_name").style.borderColor = '';
}
if(flag==1)
{
return false;
}
else
{
return true;
}
}
</script>
I have applied a function onClick on submit button .this I have applied for validation.
When I click on submit button it shows red background of textbox but refreshes the page immediately.
If the textbox is blank it should not refresh the page, but in my code it is doing so.
Can anyone help me?
Try with
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
</form>
You need to use either onClick="return validate()" or onSubmit="return validate()". It will fix the problem.
using onClick="return validate()"
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
</form>
using onSubmit="return validate()"
<form action="" method="post" onSubmit="return validate()">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit">
</form>
You need to do it this way,
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
And when you will return false in your method, your form won't be submitted.
Change you form like this: remove onClik function and add the onSubmit on form header
<form action="" method="post" onsubmit="return validate()">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit"/>
</form>
I have this form below when i submit it i want it to append a value to the 6 urls generated from a php query.
<form id="emailform" action="" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
This is an example of my link, sitename.com/demo.php?1=demo&2=haha How can i use the form and jquery to append &email=formvalue to the url so sitename.com/demo.php?1=demo&2=haha = sitename.com/demo.php?1=demo&2=haha&email=formvalue ?
Please keep in mind that these urls are generated dynamically with a query.
I tried using attr on a but it doesnt work. I know you have to check for the submit then use attr.
$('#emailForm').submit(function(){ //listen for submit event
}
You can use hidden field like this
<form action="" method="post">
<input type="hidden" name="new_value" value="value"/>
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
or you can add to action of form like this
<form action="http://action_url?new_value=value" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
You'd better to use markup input type="hidden" to submit the value
Your Form :
<form action = "sitename.com/demo.php" method="post" >
<input type="hidden" name="1" value="demo" />
<input type="hidden" name="2" value="haha" />
<input type="text" value="" size="30" name="email" />
<input type="submit" name="submit" value="Submit" class="containue-button" />
</form>
Then you just need to submit this form in javascript or jquery.
: )
use serilaize method
$('#emailForm').submit(function(){
//listen for submit event
var all_submit_data = $( '#emailForm' ).serialize() ;
//this will have all input fields values in serilized
}
ref : https://api.jquery.com/serialize/
<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();}
</script>
<form id="form1" action="php/create.php">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit"/>
</form>
<form id="form2" action="php/createhemerb.php">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
I reach out to the php files but the both come out "please fill out the form 1" and "please fill out the form 2"
if(!$_POST['submit']) {
echo "please fill out the form";
header ('Location: please fill out the form 1');}
I have tried things back and fourth for hours i can not get it to work.
Please do the following to fix your issue:
Add method='post' to your forms
If you intend to check the value of $_POST['submit'], you need to name your button 'submit'.
You can't use echo and then header(''), it will set a 'header already sent exception'.
header('Location: some text') has no meaning, header('Location: file.html') is the correct syntax.
Full code:
<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
<form id="form1" action="php/create.php" method="post">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit" name="submit"/>
</form>
<form id="form2" action="php/createhemerb.php" method="post">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
PHP:
if(empty($_POST) || !$_POST['submit']) {
echo "please fill out the form";
//you can't set the header after echoing
//header ('Location: please fill out the form 1');//use header('Location: error.html') instead.
//or output a Javascript redirect echo "<script>window.location = 'error.html';</script>";
}
Hope this helps!
I have a HTML form:
<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
<input type="hidden" name="txt1" id="txt1">
<input type="hidden" name="txt2" id="txt2">
<input type="hidden" name="txt3" id="txt3">
<input type="submit" name="submit" value="Submit">
</form>
<input type="button" value="Submit form" onclick="MyFunction();">
I am submitting the form after filling the values in 3 hidden fields in the form in following function.
function MyFunction()
{
var isValid="";
$.post('ServletURL',{action: "getData"}).done(function(data)
{
$.each(data, function(index, text)
{
if(index==0)
isValid=text;
if(isValid=="OK")
{
if(index==1)
$("#txt1").val(text);
if(index==2)
$("#txt2").val(text);
if(index==3)
{
$("#txt3").val(text);
alert("Before form submit...");
document.getElementById('myForm').submit();
alert("Form is submited.");
}
}
});
});
}
MyFunction() is working perfectly, except that it is not submitting the form. I can see the alert alert("Before form submit...");, but can't see the second alert alert("Form is submited.");.
Then I have removed following submit button from the form which was unnecessary:
<input type="submit" name="submit" value="Submit">
Then the code is working fine, and form is getting submitted.
My question is that why form was not getting submitted when there was submit element in the form?
The reason is that the name of your submit button was submit. All the inputs in a form become properties of the form element, so document.getElementById('myForm').submit is the <input> element, not a function.
If you change it to
<input type="submit" name="somethingElse" value="Submit">
then it will work.
Change your html to: You have a form element with the name submit. Just rename it to othar(i have renamed it to sumit2).
<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
<input type="hidden" name="txt1" id="txt1">
<input type="hidden" name="txt2" id="txt2">
<input type="hidden" name="txt3" id="txt3">
<input type="submit" name="submit2" value="Submit">
</form>
<input type="button" value="Submit form" onclick="MyFunction();">
I have a page where i am disabling the button after submit for 10 seconds and if validation succeeds form is submitted. However, the form is getting submitted even though validation is returning false.
I tried using
<input type="submit">
instead of image still same issue.
Below is the code:
<html>
<head>
<script>
function enableMe(myBtn) {
myBtn.disabled = false;
}
function doValidation() {
document.getElementById('hidden1').value = 'true';
return false;
}
</script>
</head>
<body>
<form id="loginForm" method="post" action="https://www.mySite.com/authService">
<label for="userid">Username</label><br/>
<input type="text" value="" id="userid" name="userid"/>
<br/>
<label for="password">Password</label>
<br/>
<input type="password" value="" id="password" name="password"/>
<br/>
<br/>
<input type="image" id="submitBtn" src="btn_login.gif"
onsubmit="this.disabled=true; setTimeout(enableMe,10000,this); return doValidation();">
<input type="hidden" id="hidden1" name="hidden1" value="false"/>
</form>
</body>
</html>
Validation should be attached to form, not input element...
<form id="whatever" ... onsubmit="return doValidation();">