I have several separated forms in my HTML page and each form has a several required inputs
when I fill all inpus in the first form and I want to submit the first form the page alarm me Please fill out this field in second forms inpust, although I just want to submit the first form ,and I don't want to fill the second form !
this is a simple example :
if you want to just fill the first form and you want to submit send1 , page alarm you you must fill the second form inputs too !
<form action='' method='POST'>
title1 : <input name='title1' type='text' required > <br>
content1 : <input name='content1' type='text' required ><br>
<input name='send1' type='submit' value='send1' >
<form>
<br>
<form action='' method='POST'>
title2: <input name='title2' type='text' required > <br>
content2 : <input name='content2 ' type='text' required ><br>
<input name='send2' type='submit' value='send2' >
<form>
this is fiddle
for solving this issue the first idea was that I use jQuery but I think there are some other simple ways
jquery :
$("otherinputs").prop('required', false);
I dont want to use jquery
close your form tags <form></form> to solve the problems:
<form action='' method='POST'>
title1 : <input name='title1' type='text' required > <br>
content1 : <input name='content1' type='text' required ><br>
<input name='send1' type='submit' value='send1' >
</form>
<br>
<form action='' method='POST'>
title2: <input name='title2' type='text' required > <br>
content2 : <input name='content2 ' type='text' required ><br>
<input name='send2' type='submit' value='send2' >
</form>
JSFIDDLE
Related
I need to disable only the error message of HTML Validation; the actual validation should still be there. User won't submitted the form without filling text field. Even if the user does not fill in a required text field, I don't want to display any message like "Please fill out this field".
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
You can use novalidate attribute to skip validation from HTML and then add validation code on javascript - on submit event.
HTML:
<form novaidate>
First name:<br>
<input type="text" name="firstname" value="" required>
<br>
<input type="submit" value="Submit">
</form>
JS:
$('form').submit(function(){
//check validations and submit through AJAX
return false;
});
My html code is
<div>
<div>
<form name="form 1" ng-submit="submitForm1()">
<input type="text" required name="text1">
</form>
</div
<div>
<form name="form 2" ng-submit="submitForm2()">
<input type="text" required name="text2">
</form>
</div>
</div>
and in my controller i am accessing the form using scope.controller looks like
$scope.submitFrom1 = function(){
console.log(form1);
}
$scope.submitFrom2 = function(){
console.log(form2);
}
but in result first form will give object and second form is returning undefined
I am getting why this is happening.
You have to use ngModel for the fields inside each form to access data.
https://docs.angularjs.org/api/ng/directive/ngModel
<form name="firstForm" ng-submit="submitForm1()">
<input type="text" required name="text1" ng-model="firstForm.text1>
</form>
<form name="secondForm" ng-submit="submitForm2()">
<input type="text" required name="text1" ng-model="secondForm.text1>
</form>
In controller
$scope.firstForm.text1 to access the data from first form individually.
$scope.secondForm.text1 to access the data from second form individually.
To get full form object just use.
$scope.firstForm;
$scope.secondForm;
Remove the spaces from the form names.
<!-- remove spaces from form name
<form name="form 1" ng-submit="submitForm1()">
-->
<form name="form1" ng-submit="submitForm1()">
<input type="text" required name="text1" ng-model="a">
</form>
<!-- remove spaces from form name
<form name="form 2" ng-submit="submitForm2()">
-->
<form name="form2" ng-submit="submitForm2()">
<input type="text" required name="text2" ng-model="b">
</form>
It was causing $parse errors.
The DEMO on JSFiddle
I have a couple of inputs outside of a form that won't submit when submitting the form for some reason.
<td>
<input type='text' form='editform' name='id' value='LIT'>
</td>
<td>
<input type='text' form='editform' name='name' value='Lituanie'>
</td>
<td>
<form action="datamanager" method="POST" id="editform" class="editform">
<input required readonly type="hidden" name="target" value="Country"/>
<input required readonly type="hidden" name="idEdit" value="LIT"/>
<input required readonly type="hidden" id="status" name="status" value="validate"/>
<input type="submit" name="submitEdit" class="validate-submit" value="" title="Validate"/>
</form>
The 3 inputs that are in the form submit properly (target, idEdit and status) but the id and name inputs just won't submit.
The weirdest part is that if I change the form attributes of the inputs and the id of the form from chrome's developer tools it then works. It's as if the browser doesn't recognize that they're linked to the form unless I change it in the developer tools...
Any ideas of what might cause that ? I've been stuck with this all afternoon when it should have been a 2 minutes thing...
Only inputs that are inside at form can be submited.so you must surround with form tag or you should put theme into existing form.
Only input elements within the form will submit, unless you have specified a form attribute.
Option 1 - Put everything in the <form>
<form action="datamanager" method="POST" id="editform" class="editform">
<td>
<input type='text' form='editform' name='id' value='LIT'>
</td>
<td>
<input type='text' form='editform' name='name' value='Lituanie'>
</td>
<td>
<input required readonly type="hidden" name="target" value="Country"/>
<input required readonly type="hidden" name="idEdit" value="LIT"/>
<input required readonly type="hidden" id="status" name="status" value="validate"/>
<input type="submit" name="submitEdit" class="validate-submit" value="" title="Validate"/>
</td>
</form>
Option 2 - Add the form attribute
If you wanted to keep your original code, add the form attribute to the inputs outside of the <form> tag.
<input type="text" name="lname" form="form1">
Important note: Option 2 will not work in IE. Be sure to read http://www.w3schools.com/tags/att_input_form.asp for more info on the form attribute.
In Html only those inputs which are in form tag are submitted.
If you have multiple form tags in an HTML only those which are in "submitted" form are submitted
I'm not sure exactly how to word this question, but I'll do my best.
I have a form which collects data about employment history from users. At the moment my form looks like this:
<form name="EmploymentHistory" action="Form E.php" method="post">
<h2>Employment History</h2>
<label>Last/Current employer</label>
<input type='text' name='LastCurrentemployer'>
<hr> <label>Position</label>
<input type='text' name='Position'>
<hr> <label>Date Started</label>
<input type='text' name='DateStarted'>
<hr> <label>Date Finished</label>
<input type='text' name ='DateFinished'>
<hr> <label>Supervised by</label>
<input type='text' name = 'Supervisedby'>
<hr> <label>Contact Details for Boss</label>
<input type='text' name='ContactDetailsForBoss'>
<hr> <button type='button'>Add another job</button> <br>
<hr> <input type="submit" value="Next">
</form>
My problem is that the "Add another job" button does nothing.
How can I enable a user to enter multiple jobs into their employment history so that each job is entered as a new record in my database, but the submit button (next) will only need to be hit once?
I was thinking about trying to set an array to then using arraypush to add each entry, eg:
$pastemployers = array ();
arraypush $pastemployers(POST_['LastCurrentemployer']);
then a loop to add each one as a new record, eg:
for ($x = 0; $x < count(pastemployers); $x++){
echo "<input name='pastemployers" . $x . "' value='" . $pastemployers[$x] . "'> </input>";
I'm sure there's a better way to do this, but I can't find the answer online or work it out. Most of my searches are returning results about checkboxes or multiple submit buttons (not helpful to me). Please help
First of all alter your form as below and use addAnotherJob() to create clone of first span (using jQuery) and change id of each form field.On submitting this form you will get array of employer details.
<form name="EmploymentHistory" action="Form.php" method="post">
<h2>Employment History</h2>
<span class="span_clone">
<label>Last/Current employer</label>
<input type='text' id='LastCurrentemployer_0' name='LastCurrentemployer[]'>
<hr> <label>Position</label>
<input type='text' id='Position_0' name='Position[]'>
<hr> <label>Date Started</label>
<input type='text' id="DateStarted_0" name='DateStarted[]'>
<hr> <label>Date Finished</label>
<input type='text' id='DateFinished_0' name ='DateFinished[]'>
<hr> <label>Supervised by</label>
<input type='text' id='Supervisedby_0' name = 'Supervisedby[]'>
<hr> <label>Contact Details for Boss</label>
<input type='text' id='ContactDetailsForBoss_0' name='ContactDetailsForBoss[]'>
<hr> <button id='add-another-job-0' type='button' onclick= 'addAnotherJob()'>Add another job</button> <br>
</span>
<hr> <input type="submit" value="Next">
</form>
Please refer this link : http://jsfiddle.net/ambiguous/LAECx/
I need help. My form in my page looks like below however when I click on the text box the cursor won't appear and I can't type
<form name="input" action="postblog.php?name=<?PHP echo ($_GET['name']); ?>" method="post">
Post: <input type="text" name="text2">
<input type="submit" value="Submit">
</form>
There's probably an error that's not being displayed on your screen because it's appearing inside the HTML tags. Make sure to check if $_GET['name'] is set first:
<form name="input" action="postblog.php?name=<?php echo ($_GET && isset($_GET['name'])) ? $_GET['name'] : 'No_Name_Value_From_GET'; ?>" method="post">
Post: <input type="text" name="text2" />
<input type="submit" value="Submit" />
</form>
In this instance, if $_GET['name'] is not set, the value for ?name= will be No_Name_Value_From_GET (but you can change it to whatever you want).
HTH... :)