This question already has answers here:
Bypass HTML "required" attribute when submitting [duplicate]
(4 answers)
Closed 2 years ago.
how can you submit a form by bypassing the required attribute using button 2
like i have button 2 and button 1
i want to submit form by clicking button 2 and bypass required attribute
and both buttons must have type=submit
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit">button 2</button>
</form>
You can use formnovalidate
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit" formnovalidate>button 2</button>
</form>
Using some simple Javascript should allow you to use button two but ignore the required attribute assigned to the text field.
document.querySelectorAll('button')[1].addEventListener('click',function(e){
e.preventDefault();
this.parentNode.try.required=false;
this.parentNode.submit();
})
<h2>submit test</h2>
<form method="POST">
<input type="text" name="try" required />
<button type="submit">button 1</button>
<button type="submit">button 2</button>
</form>
Try
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit" value="ignore" >button 2</button>
</form>
Related
I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.
You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
I need you help, I have a form in PHP, javascript, HTML and MYSQL. I use a bootstrap for template.
I have a two button (continue button and add button)
<form class="form-horizontal form-label-left" action="PHP/GuardarMetodoque.php" method="POST" novalidate>
<div class="form-group">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary" onclick="return continuar();">Continuar</button>
<button type="submit" class="btn btn-primary" onclick="return continuar();">Continuar</button>
<input type="hidden" name="metodoque" value="metodoque" />
<button type="submit" class="btn btn-primary" onclick="return continuar();">Añadir Riesgo</button>
<input type="hidden" name="Anadirriesgo1" value="Anadirriesgo1" />
<input type="hidden" name="ID_proceso" value="<?php echo $_id; ?>">
<input type="button" class="btn btn-primary" value="Regresar" onclick="history.back(-1)" />
</div>
</div>
</form>
the continue button serves to pass another page and the add me button works to add data from the answered form.
as you see called the file "PHP/GuardarMetodoque.php" and it works but when you click continue, you save the form again, and what I want is for you to just send me the other form without saving anything
If you set button type to submit for continue button it will submit the form to mentioned action url, Try:
<button class="btn btn-primary" id="continue">Continue</button>
Add jquery to handle button click event:
$('#continue').click(function(){
//do your logic here
});
I'd like to have two buttons that submit the same value (determined by the input field).
<form action="index.html">
<button type="submit" name="btn1">Btn1</button>
<button type="submit" name="btn2">Btn2</button>
<input type="text" value="50">
</form>
It should result in:
Btn1 => index.html?Btn1=50
Btn2 => index.html?Btn2=50
call index.html according to teh button clicked.
<script type="text/javascript">
function setButton1Value(){
//call index.html?Btn1=50
}
</script>
<script type="text/javascript">
function setButton2Value(){
//call index.html?Btn2=50
}
</script>
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="setButton1Value()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="setButton2Value()">Btn2</button>
</form>
Two buttons can not send the same value as only one is clicked at a time. For one button to send the value you can try this :-
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="putValue()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="putValue()">Btn2</button>
</form>
<script type="text/javascript">
function putValue(){
document.getElementById('btn1').value=document.getElementById('input').value;
document.getElementById('btn2').value=document.getElementById('input').value;
}
</script>
This question already has answers here:
JavaScript Form Submit - Confirm or Cancel Submission Dialog Box
(6 answers)
Closed 7 years ago.
Sorry if its question is reasked. I'm creating a form and asking user to confirm but its not working its always proceding whether user clicks ok, cancel or even close the confirm window. Here is the code:
FORM:
<form action="simple_things.php" class="right inline" method="POST" onsubmit="confirm_input();">
<input type="submit" class="btn red small" name="reset" value="Reset Points">
<input type="submit" class="btn red small" name="reset" value="Reset Referals">
</form>
Script
<script type="text/javascript">
function confirm_input() {
var r = confirm("Do you really wanted to reset?");
return r;
} </script>
Check out this and let me know if you are facing any error.
<form action="simple_things.php" class="right inline" method="POST" onSubmit="return confirm('confirm ?');">
<input type="submit" class="btn red small" name="reset" value="Reset Points">
<input type="submit" class="btn red small" name="reset" value="Reset Referals">
</form>
Thats because the type of both the buttons are submit. Use type submit only on the button that you want to confirm the submission.
I am trying to disable or enable a button when the value of a variable changes. ng-disabled is viewing the change of the value but is not disabling the button if it is enabled.
Html:
<form name="myForm">
<input ng-pattern="onlyNumbers" ng-model="value" name="number" />
Valid? {{myForm.number.$valid}}
<button ng-disabled="{{!myForm.number.$valid}}"> Hello </button>
</form>
Js:
$scope.onlyNumbers = /^\d+$/;
You don't have to use interpolation({{}}) inside ng-disabled:
<button ng-disabled="!myForm.number.$valid"> Hello </button>
Remove the brackets within ng-disabled:
<button ng-disabled="!myForm.number.$valid"> Hello </button>
Try this:
<form name="myForm">
<input ng-pattern="onlyNumbers" ng-model="value" name="number" />
Valid? {{myForm.number.$valid}}
<button ng-disabled="myForm.number.$invalid"> Hello </button>
</form>