<form class="form-horizontal custom-form" id="signupform" method='post' action='/controller' onsubmit='return signupvalidation()'>
<button class="btn btn-default submit-button" type="button" >Sign Up</button>
</form>
in my js file
function signupvalidation(){
aletr("some text");
return true;
}
I have put a link of js file in my jsp file. but still function is not called. Please help!
Button type should be submit
<button class="btn btn-default submit-button" type="submit" >Sign Up</button>
I found the mistake I should set the type of my button as submit.
like this.
<input type="submit" > </input>
Related
I have two buttons on the asp.net core razor page as shown below code:
<div class="row div-form-control">
<div class="col-md-12">
<div class="form-group actions">
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
<button type="button" class="btn btn-primary" action="search"><i class="icon-new-tab position-left"></i>Search</button>
</div>
</div>
</div>
now I want to hide Submit Button in C# when the User Role is not an Admin like:
string Role="NormalUser";
if(Role!="Admin"){
submit.Visibility = Visibility.Hidden;
}
but it does not work because in submit button I don't have Runat="Server" I want to hide it without using Ranat="Server" by JavaScript or Another Method Can anyone help me how to do it?
Thanks
one way to do it is like:
#if(Role!="Admin"){
<button type="button" name="submit" style="display:hidden;" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}else{
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}
I have this html like
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="1" class="btn btn-primary" role="button">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="2" class="btn btn-primary" role="button">Vote Now</button>
</form>
My question is, I want to click the button based on name and value with jquery or javascript, How to do this?
If I understand correctly, you mean, that you want to execute click if name and value attributes are matching on any button. You can try the following. You should have some event attached to that button, so you can see the effect.
I have attached onclick there and put correct names.
function clickButtons(name,value){
var elements=document.getElementsByTagName("button");
for(var i=elements.length-1;i>=0;--i)
{
var e=elements.item(i);
if(name==e.name&&value==e.value)e.click();
}
}
clickButtons("name_1",2);
<html>
<head>
</head>
<body>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_3" value="3" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_1" value="2" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
</body>
</html>
You should of course put correct names and value, I have also changed that.
I have 2 Submit buttons on my form:
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
I've recently added some validation to the form submission, but I only want it to apply to the 'Submit' button not the 'Decline All' button. Here's my script:
$("form").submit(function(event) {
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
}
});
Is there a way I can restrict the form validation only fire when the first Submit button is clicked?
There are some solution here .
please change the of Decline All button like attribute : type='button'
use below process
$("#save").click(function (e) {
// put your validation here
$("form").submit();
}
You can change second button type submit to button
<button type="button" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
Using above approach form validation only fire when the first Submit button is clicked
You can change button type from submit to button, see below code
$("form").submit(function(event) {
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
}
});
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="button" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
Since Button type for both the button is same, hence the conflict.
Instead, you may try to change button type from submit to just button, something of this type:
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="button" name="buttonType" value="declineAll" class="btn btn-decline">Decline All</button>
</div>
It seems like you have to add a function on click event of one of your button and inside that function you have to complete your validation tasks. Please check the code below -
HTML
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success" onclick="myFunction()">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
JavaScript
function myFunction(){
alert( "Your validation code" );
}
It is only going to be triggered if the specific button is pressed. On the other buttons triggering it wont be executed. And there wont be any problem of form submission as well.
Hope it helps...:)
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success" id="submitButton">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
$("#submitButton").click(function(event) {
event.preventDefault();
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
} else{
$("#yourForm").submit();
}
});
validatde the form on click event on submit button
I have a multiform like this :
<form id="signup-form" name="frm" ng-submit="processForm()" novalidate>
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
<pre>
{{ formData }}
<input type="button" value="ذخیره" class="btn btn-primary" ng-click="$broadcast('Save')" />
how can i disable and enable button if form is invali or vali ?
the button is out of the form
Thx
You can access to form by it's name, and this object will have a lot of build-in values(see docs): https://docs.angularjs.org/api/ng/directive/form
And ng-disabled is directive for, well, disabling:
<input ng-disabled="frm.$invalid" type="button" value="ذخیره" class="btn btn-primary" ng-click="$broadcast('Save')" />
<input
type="button"
ng-disabled="frm.$invalid"
value="ذخیره"
class="btn btn-primary"
ng-click="$broadcast('Save')" />
this should work just fine
I am trying to do a function like I have one input field and two buttons for two different actions but fetch the same input value.
Button 1
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
Button 2
<form id="formAddUser" name="search" method="post" action="/biodata">
<button id="btnSubmit" class="btn btn-info primary" type="submit">View BioData</button>
</form>
I have one text where I take the ID of pilgrim and provide two buttons 'view biodata' and 'view location'
How can I get the input value of one html element to pass to two javascript functions to perform some actions with the inputs?
I've typically put both buttons on the form and used jQuery to attach On Click events to change the action of the form. Try this ...
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit1" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnSubmit2" class="btn btn-info primary" type="submit">View BioData</button>
</form>
Then, also add (jQuery must be loaded) ...
$("#btnSubmit1").on('click', function() {
$("#formAddUser").attr("action", "/maps");
});
$("#btnSubmit2").on('click', function() {
$("#formAddUser").attr("action", "/biodata");
});
The default action of the form submit will still operate, with different actions.
First: do you have two buttons with same ID? You need to choose different IDs, like btnLocate and btnBiodata.
Second: put the two buttons inside the same form. Sorry if I wrong, but I understand that you have two forms with same ID (again). So, you need just one form, somethink like this:
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnLocate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnBiodata" class="btn btn-info primary" type="submit">View Biodata</button>
</form>
Later, you need to create a JavaScript function. You know how to create? With JavaScript function you can call elements by ID. Example, if I want to change the text of btnLocate:
<script type="text/javascript">
function changeText() {
document.getElementById("btnLocate").innerHTML = New Text;
}
</script>
To add JavaScript on
Now, call the function on the click event of the button, for example:
<button id="btnLocate" class="btn btn-info primary" type="submit" onClick="changeText()">Locate Pilgrim</button>
This is simple example, with ID of element, you can change what you want. If you want to display something on screen, use alert("Text here") inside JavaScript function.
Hope I can help.
Bye,
Pasch.
Put everything in the same form and use the formaction attribute on one or both of the buttons.
formaction overrides the action attribute on the form tag if that particular button is clicked.
I'm on my phone right now, so it's hard to type up an example, but http://www.wufoo.com/html5/attributes/13-formaction.html has some good information.
<form method="post" action="/selector">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<button name="action" value="view-data" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button name="action" value="locate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
In selector you can figure out what to do using value of the action.
You could combine both buttons and a text input into single form and use JavaScript (via onclick attribute) to change form action based on the button clicked.
<script>
function setMapsAction(){
formAddUser.action = "/maps";
}
function setBioAction(){
formAddUser.action = "/biodata";
}
</script>
<form id="formAddUser" name="search" method="post" action="see-script">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmitMaps" class="btn btn-info primary" type="submit"
onclick="javascript:setMapsAction()"
>Locate Pilgrim</button>
<button id="btnSubmitBio" class="btn btn-info primary" type="submit"
onclick="javascript:setBioAction()"
>View BioData</button>
</form>