I have two submit buttons: 'positive' and 'negative' in my html part. What i want to happen is that when user presses SHIFT KEY and then does mousedown anywhere on the body the POSITIVE BUTTON should get submitted and the NEGATIVE BUTTON should get submitted on pressing CTRL KEY and doing mousedown. My code is as follows:
<head>
<script>
function check(event)
{
if (event.shiftKey==1)
{
var b1=document.getElementById('btn1');
b1.submit();
}
if (event.ctrlKey==1)
{
var b1=document.getElementById('btn1');
b2.submit();
}
}
</script>
</head>
<body onmousedown="check(event)">
<form method="post" action="fetch_page.php">
<input type="submit" name="submit1" value="Positive" id="btn1" class="btn btn-primary"></input>
<input type="submit" name="submit2" value="Negative" id="btn2" class="btn btn-primary"></input>
</form>
</body>
Can someone tell me where am i going wrong??
<head></head>
<body>
<form method="post" action="fetch_page.php">
<input type="submit" name="submit1" value="Positive" id="btn1" class="btn btn-primary"></input>
<input type="submit" name="submit2" value="Negative" id="btn2" class="btn btn-primary"></input>
</form>
<script>
document.addEventListener('click', function(e) {
if (e.shiftKey) document.getElementById('btn1').click();
if (e.ctrlKey) document.getElementById('btn2').click();
}, false);
</script>
</body>
Related
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 am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
First of all, is this possible?
I have a reset button in my form and I want to get the text in the input before clicking on the reset button.
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" class="form-control" id="ordID">
</div>
<button type="reset" class="btn btn-default">Submit</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
If this is possible, how can I do it?
Thank you.
You can use onreset event handler
function myFunction() {
var m = document.getElementById('ordID').value;
console.log(m)
}
<form action="Pros.php" method="post" onreset="myFunction()">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" id="ordID">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Yes, use javascript/jQuery to grab the contents of the input field(s) before you clear them. Here's a basic example:
$('#btnReset').click(function(){
var ordID = $('#ordID').val();
alert(ordID);
$('#ordID').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input id="ordID" type="text" class="form-control" />
</div>
<button id="btnReset" type="reset" class="btn btn-default">Reset</button>
<button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</form>
I have two buttons which are the submit button and save button.
The first time the page loads, the submit button should be enabled while the save button should be disabled.
After the submit button is clicked, the submit button should be disabled and record will be display while the save button should be enabled so that I can save record. But I cant enable the save button after the submit button is clicked and the record is displayed.
HTML
<header><h4>Customer Purchase Order</h4></header>
<form action="" method="post" class="form-disable">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="global.js"></script>
<table style="border-collapse:collapse;" width="1400px" height="172px" border="1">
Delivery Date: <input type="text" name="sdate2" placeholder="yyyy-mm-dd" onkeypress="return noenter()">
Date: <input type="text" name="sdate" placeholder="yyyy-mm-dd" value="" onkeypress="return noenter()">
<input type="button" class="but" name="sub" id="sub" value="Submit" formaction="" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()">
<input type="button" class="but" name="save" id="save" value="Save" disabled formaction="addorder1.php" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()"><br><br>
JAVASCRIPT
$(function()
{
$(".but").on("click", function(e)
{
e.preventDefault(); // not really necessary if buttons
$(this).prop("disabled", true);
if (this.id=="sub")
{
// do the submit and enable other button
$("#save").prop("disabled", false);
}
else
{
// do the save and enable other button
$("#sub").prop("disabled", false);
}
});
});
Demo
https://jsfiddle.net/kk5wxm37/
HTML
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name"/>
<button type="submit" id="submit" name="submit" <?php echo isset($_POST['submit']) ? 'disabled="true"' : ''; ?>/> Submit</button>
<button type="submit" name="save" id="save" disabled value="true" >Save</button>
</form>
Javascript
<script>
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
$(this).attr('disabled', true);
$('#save').attr('disabled', false);
});
});
</script>
JSFIDDLE
https://jsfiddle.net/7mu9Lk2r/
NEVER call a submit button submit - it kills the form submit event - I have renamed it to "sub"
PHP Only
<?PHP
$sub = isset($_POST['sub']);
$>
<button type="submit" name="sub" id="sub" <?php $sub ? 'disabled' : ''; ?>> Submit</button>
<button type="submit" name="save" id="save" <?php $sub ? '' : 'disabled'; ?> onblur="validate()">Save</button>
If the form is not submitted (Ajax):
FIDDLE
Assuming the buttons are SUBMIT buttons and correct syntax (you had <input /></button>)
$(function() {
$("form.form-disable").on("submit",function(e) {
e.preventDefault();
$("#sub").prop("disabled",true);
$("#save").prop("disabled",false);
});
});
If you do NOT use submit buttons, then this will work:
$(function() {
$("#sub").on("click", function(e) {
e.preventDefault();
$(this).prop("disabled", true);
$("#save").prop("disabled", false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name" />
<button type="button" name="sub" id="sub">Submit</button>
<button type="button" name="save" id="save" disabled value="true">Save</button>
</form>
If you need to swap disable:
$(function() {
$(".but").on("click", function(e) {
e.preventDefault(); // not really necessary if buttons
$(this).prop("disabled", true);
if (this.id=="sub") {
// do the submit and enable other button
$("#save").prop("disabled", false);
}
else {
// do the save and enable other button
$("#sub").prop("disabled", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
<input type="text" name="name" placeholder="name" />
<button type="button" class="but" name="sub" id="sub">Submit</button>
<button type="button" class="but" name="save" id="save" disabled value="true">Save</button>
</form>
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