HTML
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
JS
$(document).ready(function() {
$( "#acc" ).accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$('#btn').click(function() {
$('#id_form1').submit();
});
$('#id_form1').validate({
ignore: "",
invalidHandler: function(event, validator) {
alert('ttt');
},
});
});
Please visit the link jsfiddle
I got there 3 headers (panels). The first two I would like to validate and submit as one after pressing the OK button, but I can't put them into the one form in the html code because of the accordion header <h3>. The third panel is just for this example (doesn't need to be coded now), it's separate one. As you noticed the code under the above link works only with one form for validation.
Put hidden inputs in one form, and have the OK button copy the values from the inputs of the second form to them after validating.
<button type="submit" name="save" id="btn"> ok </button>
<div id="acc">
<h3>First header</h3>
<form name="form1" id="id_form1" method="post">
<div><input type="text" id="firstname" name="firstname" required></div>
<input type="hidden" id="hidden_lastname" name="lastname">
</form>
<h3>Second header</h3>
<form name="form2" id="id_form2" method="post">
<div><input type="text" id="lastname" name="lastname" required></div>
</form>
<h3>Third header</h3>
<form name="form3" id="id_form3" method="post">
<div><input type="text" id="address" name="address" required></div>
<button type="submit" name="create"> create </button>
</form>
</div>
jQuery:
$("#btn").click(function() {
if ($("#id_form1").valid() && $("#id_form2").valid()) {
$("#id_form2 input").each(function() {
$("#id_form1 #hidden_" + this.id).value(this.value);
});
$("#id_form1").submit();
}
});
Write your own handler for the submit. In the handler you can validate your data, get the values from the forms (look at jQuery serialize), then use jQuery's post to send the data. Something like this (not real code, but should get you there)
$("#btn").click(function(){
if( input1.isValid() && input2.isValid){
var formInputSerial = $('form').serialize();
$.post("http://whereToSendData", formInputSerial, callbackFunction(ifNeeded))
}
}
You will have to implement the the validation checks for the input. You may need to add a common to class to the input then use $('.commonClass').serialize(); I'm not sure how the above will work with multiple forms.
Related
When I use inputmask for my form input elements TAB Key not working. I can't switch with other input via tab key. I want use TAB key for switch via inputmask
HTML FORM
<form class="validate-form mt-2 pt-50" action="KisiEkle" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<label>TC: </label>
<div class="mb-1">
<input type="text" id="TC" name="TC" placeholder="TC bilgisi" class="form-control" autocomplete="off" required="required" />
</div>
<label>Ad Soyad: </label>
<div class="mb-1">
<input type="text" id="AdSoyad" name="AdSoyad" placeholder="Ad Soyad" class="form-control" autocomplete="off" required="required" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ekle</button>
</div>
</form>
JAVASCRİPT CODE
$(document).ready(function () {
$("#TC").inputmask("*{11,11}", { clearIncomplete: true, greedy: false });
});
<script src="~/assets/js/jquery.inputmask.min.js"></script> //2022 Robin Herbots
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
When running this solution to hide and show an input mask, on page load I am seeing both input boxes. My script has been placed on the bottom of the page as last script. I am basically hiding and showing one or the other input box based on the checkbox. All appears to be working perfectly on jsfiddle and this code snippet, yet on Chrome, Android browser, Firefox and Safari both input boxes display on page load. After I toggle the checkbox, then it works properly. Not sure what is causing it to show both input boxes on page load. Any help wold be appreciated.
var showPass=false;
$('#c').change(function(){
showPass = ($('#c:checked').length>0);
if (showPass){
$('#p').hide();
$('#transaction_id').show();
}else{
$('#transaction_id').hide();
$('#p').show();
}
});
$('#p').change(function(){
if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
if (showPass) $('#p').val($('#transaction_id').val());
});
#transaction_id{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
<input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>
After trial and error, I found the solution. Just needed to initially hide the 2nd input:
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="(999) 999-9999" style="display:none" autofocus />
Simple solution. I have also fixed the code snippet for anyone who wants to use it.
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>