Develop Reference

Conditional Required Validation with buttons in AngularJS

I having two buttons as Save and Submit and some of the drop-downs and text-boxes. There is need to validate some of the fields on click of Submit, not on click of Save. Please find the code in below.
<button class="btn btn-default custom_edit"
data-ng-click="orderForm.$valid && saveOrder('save')"
data-ng-if="!order.IsSubmitted"
data-ng-model="status"
value="save">Save</button>
<button class="btn btn-success"
data-ng-click="orderForm.$valid && saveOrder('submit')"
data-ng-if="!order.IsSubmitted"
data-ng-model="status"
value="submit">Submit</button>
<input type="text" class="form-control" name="_requisition" placeholder="Requisition"
data-ng-model="order.Requisition"
data-ng-trim="true"
data-ng-required="status=='save'"/>
I have tried by using value & model with buttons and applied it with ng-required , however it's not working.

Using input type as 'submit', validation can be maintained as well as other function can be also called as form is valid.
<input type="submit" value="Save"
data-ng-click="isSave = true; orderForm.$valid && saveOrder('save')"
data-ng-model="isSave"
data-ng-show="!order.IsSubmitted"/>
<input type="submit" value="Submit"
data-ng-click="isSave = false; orderForm.$valid && saveOrder('submit')"
data-ng-model="isSave"
data-ng-show="!order.IsSubmitted"/>
<input type="text" class="form-control" name="_requisition" placeholder="Requisition"
data-ng-model="order.Requisition"
data-ng-trim="true"
maxlength="100"
data-ng-required="isSave"/>
So by this way, we can easily set model value on button click at run time as well as can validate form.

How to reset form fields the elegant way with javascript or jquery?

How do I reset the form fields more elegant compared to the code below? The code is working. But if I have lots of form fields it does not look so nice. Is there a more compact way?
<script>
function setSearchCriteria(){
var searchcriteria = document.getElementById("TherapistSearch-SearchCriteria");
searchcriteria.value = "";
}
function setCity(){
var city = document.getElementById("TherapistSearch-City");
city.value = "";
}
function setLastName(){
var lastname = document.getElementById("TherapistSearch-LastName");
lastname.value = "";
}
function setFirstName(){
var firstname = document.getElementById("TherapistSearch-FirstName");
firstname.value = "";
}
}
</script>
<input type="button" class="btn btn-default" value="Reset form"
onclick="javascript:clearForms();javascript:setSearchCriteria();setCity();setLastName();setFirstName();" title="Reset form"/>

Give a css class to your input fields.
<input type="text" id="firstName" class="resettable" />
<input type="text" id="firstName" class="resettable" />
<select id="states" class="selectResettable">
<option value="0">Select an option </option>
<option value="1">Michigan</option>
<option value="2">Ohio</option>
<select>
<input type="button" id="resetBtn" />
And use this css class(es) as jQuery selector(s) to get all of this inputs and set the value to empty/default value. I also removed the onclick from button HTML markup as we are going to do it in the unobtrusive javascript way.
Add this javascript where we are registering the code for the click event on our button.
$(function(){
$("#resetBtn").click(function(e){
alert("Reset button clicked");
//Set the input text fields to empty string
$("input.resettable").val("");
//Reset the dropdowns.
$(".selectResettable").val("0")
//If you want to do something else, Do it here.
});
});

Simply use HTML the way it's meant to be used, and take advantage of the reset button:
<input type="reset" class="btn btn-default" value="Reset form" title="Reset form"/>
This requires no JavaScript, no additional functionality, and is a native component of HTML forms. Using type="button" gives the element the appearance of a button, but strips the default functionality; using type="reset" gives the appearance of a button and gives the default functionality of resetting the parent <form> element to its default page-load state.
References:
<input> element type attribute-values.

<input type="reset" id="resetBtn" class="resettable" />
use reset type of button or call reset method on form as below
<input type="button"
class="btn btn-default"
value="Reset form"
onclick="document.getElementById('myForm').reset();"
title="Reset form"/>

Javascript onclick function stops HTML5 required from working

Good day,
I am working on a form where all my text fields have a required attribute; I noticed that when i clicked on submit required attribute does not show a pop up to validate if a field is empty.
I have two submit buttons on my page both using an onclick submitform function; One opens up a new tab and the other submits the form and goes to a new page.
For debugging purposes i remove the button that opens up a new tab and remove the onclick attribute on my second button and it work; I have been googling all day but i cannot seem to find the same scenario i have at the moment.
I believe it has to do with my JS but i am not sure what to add or remove on my code; Please see my code below.
JavaScript
function submitForm(action,newtab)
{
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
HTML
<form id="add2" action="add5.php" method="post">
<input placeholder="First Name" tabindex="1"
name="fname" maxlength="128" size="30" required>
<input placeholder="Last Name" tabindex="12"
name="lname" maxlength="128" size="30" required>
<button tabindex="3" value="Save"
name="save" onclick="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onclick="submitForm('add5.php',0);"
type="submit">Save Details</button>
</form>
I have a button attribute but i have set it to type="submit" and i am pretty much sure that works as i have already tested it when i removed the onclick functions; My question is can i required attribute worked without removing the onclick function of JavaScript?
Any help is much appreciated.

I found the answer to my question, The problem is that i was binding onClick method to the submit. The onClick will trigger first which results in it getting past the validator.
Solution is i change the onClick to onSubmit on my HTML code.
<button tabindex="3" value="Save"
name="save" onsubmit="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onsubmit="submitForm('add5.php',0);"
type="submit">Save Details</button>

You just need to use the "checkValidity()" method on the form before submitting in your onclick function like this:
if($("#add2").checkValidity()) {
document.getElementById('add2').submit();
}
See this fiddle: http://jsfiddle.net/36uv2e52/33/

Rather than using required you can simply check the values before you submit.
function submitForm(action,newtab) {
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
if (fname == "" || lname == "") {
alert("First and last name are required");
exit;
} else {
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
}

Hide submit type input value from url

I have a form with GET method with some inputs like this:
<input type="text" name="something">
<input type="submit" name="submit" value="Click here to submit form">
I don't want the url to become
mypage.php?something=value&submit=Click+here+to+submit+form
I want to suppress the submit parameter in the url (should be like this: mypage.php?something=value).
I need only GET method please don't mention POST method.
Also you may mention to remove name="submit" but i need it also to identify this submit.
Also if there is a input from which is empty i don't want to show
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" name="submit" value="Click here to submit form">
input1 gets value but if input2 doesn't have value the i want url like
mypage.php?input1=value
Thanks

If you don't want the submit parameter to show up in your GET request URL, don't give it a name, and instead use id or class to identify it uniquely:
<input type="submit" id="submit" value="Click here to submit form">

I would remove form submit the and just turn it into a button. Then I would use jquery to submit the form and do any logic processing.
<input type="test" id="favoriteCheese" value="nacho" />
<button id="submit" value="Click here to submit form">Click here to submit form</button>
$("#submit").on('click', function () {
var data = {};
var favCheese = $("#favCheese").val();
if(favCheese.length > 0) {
data.favCheese = favCheese
}
$.ajax({
url : ".../mypage.php",
data : data,
type : 'GET',
...
})
})

Javascript: unable to submit form

I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>

document.forms[0].elements["LoginButton"].click();
worked for me.