Develop Reference

How to check whether input box has same value

I am new to javascript and jquery.
I have a form which has only one text box and type is email and I have a submit button. After clicking the submit button value in text box will not disappear and I don't want to(Not clearing form). Now my problem is Button should disable after clicking on it and it should active only value in text box changes.
My code is
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button></div>
And jquery is
$(document).ready(function(){
$("input[name='email']").change(function(){
if ($(this).val() != $(this).val())
{
$("input[name='submit']").removeAttr('disabled');
}
});
});
please help to solve this issue.

Because following statement $(this).val() != $(this).val() will always be false.
You don't need to do this because change function already does what you need.
$(document).ready(function(){
$('#g-email').on('input', function(){
$("button[name='submit']").removeAttr('disabled');
});
});
Working example
$(document).ready(function(){
$('#g-email').on('input', function(){
$("button[name='submit']").removeAttr('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>

You can set the messageButton disabled initially and listen for the keyup event in the g-email input. Then, if the input g-email has text enable the button else disabled it:
$(document).ready(function(){
$('#g-email').on('keyup', function(){
if($(this).val()){
$("#messageButton").removeAttr('disabled');
} else {
$("#messageButton").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>

Use jQuery .prop() method to change submit button disabled value:
var submit = $("#messageButton");
var input = $("#g-email");
input.on("keyup", function(ev) {
var isDisabled = submit.data("submitted") && submit.data("submitted") === input.val();
submit.prop("disabled", isDisabled);
});
submit.on("click", function(ev) {
submit.prop("disabled", true);
submit.data("submitted", input.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button>

insert query with ajax without reloading whole page

I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
}
}
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>

After $("#submit").click(function(event){ add command
event.preventDefault();
And your page will not be reloaded

The submit button will automatically reload the page on click so the solution is either change the button type to button or add preventDefault to the click event
$("#submit1,#submit2").click(function() {
alert('form submited')
})
$("#submit3").click(function(e) {
e.preventDefault();
alert('form submited')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
this will reload the page
<input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit1">
</form>
<form>
this will not reload the page
<input type="button" value="Submit" id="submit2">
</form>
<form>
this will not reload the page
<input type="submit" value="Submit" id="submit3">
</form>

How to submit a bootstrap form with 'required' elements with onClick button

The reasons are:
The submit button is outside the </form>
I need to use bootstrap as a form validation with required fields
But, when I submit the form with onClick. It's just submit the form without checking - even it's blank.
$('#submit').on('click',function(){
$('#billing-form').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">
<!-- NAME -->
<div class="col-md-6">
<input class="form-control" type="text" name="name" required/>
</div>
.
.
.
</form>
//coupon
<input type="text" name="coupon" />
<button type="button" id="submit">Buy now!</button>

I've got it.
$("#submit").on("click", function(){
if($("#billing-form")[0].checkValidity()) {
//do ajax submit
}
else {
$("#billing-form")[0].reportValidity();
}
});

You can use checkValidity method. It will return true/false depending on whether the form is valid or not
$('#submit').on('click', function(e) {
var x = document.getElementById('billing-form').checkValidity();
if (x) {
$('#billing-form').submit();
} else {
console.log('Not Valid')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">
<!-- NAME -->
<div class="col-md-6">
<input class="form-control" type="text" name="name" required/>
</div>
</form>
<input type="text" name="coupon" />
<button type="button" id="submit">Buy now!</button>

Passing Values while handling/calling jQuery event

Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.
Present Code:
function SaveSample(flag,mode){
//Based on flag and mode i am performing some validations
//save sample
}
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','D')">
</form>
Required Code:
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>

You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").
$(document).ready(function() {
$(".sampleSave").on("click", function(e) {
console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>

Another option is not to put the parameters on the form element, but instead have different callbacks for each form.
$(document).ready(function(){
$("#ff1 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','S');
});
$("#ff2 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','D');
});
});

You can use this code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
var formData = $(this);
$.ajax( {
type: "POST",
url: formData.attr( 'action' ),
data: formData.serialize(),
success: function( response ) {
console.log( response );
}
} );
e.preventDefault();
//perform validations
//save sample
});
});
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post" action="yourfile1.php">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
</body>
</html>

shiftKey Event Attribute not working

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>