Develop Reference

Validate dynamic php form with javascript/jquery

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">

send data with form 2 html js

<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>

Why validation is not working properly in JavaScript?

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>

Add Value To URL On Form Submit With Jquery

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/

Jquery function not working for two or more forms

Hello all i have below jquery function to enable submit only if the input has 1 or more values but i have the same many input and submit button on my page the jquery function is wrking fine for 1st form but it doesnt work for other forms.
Script:
$(function ()
{
$("#textbox").bind("change keyup", function ()
{
if ($("#textbox").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
HTML:
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
When I type anything in 1st textbox the submit button getting activated and working fine but if i add any values in second or third text box the submit button is not getting activated.

Because you can add only one element with id="textbox" on the same page.
Add some class name to inputs (e.g. "textbox"), and change selector '#textbox' to '.textbox' on event binding:
$(function ()
{
$(".textbox").bind("change keyup", function ()
{
if ($(this).val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});

Just use class instead of id as you cannot have more than one element with same id.
Also, you need to use $(this) inside the event handler to access the changed element.
Try this:
<script type="text/javascript">
$(function () {
$(".textbox").bind("change keyup", function () {
if ($(this).val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
</script>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

First of all , you are using the same ID's for more div in html and this is NO good. Id's are unique.
Use a class instead. Otherwise it won't work with classes neither , you should try using 3 different divs or $.each() function or recogninizing on keyup()