I'm trying to get the button to work without clicking on it.
I tried but with using 'Submit' and 'button', neither works unless user clicks the button.
<input id="txtDusNumber" class="form-control form-control-sm" type="text" />
<input type="submit" name="submit" class="btn " value="Search" id="enter-btn" onclick="ShowCard()" />
<input type="button" class="btn " value="Search" onclick="ShowCard()" />
<script>
function ShowCard() {
var dusNumberVal = $('#txtDusNumber').val();
if (dusNumberVal) {
$.ajax({
url: "#Url.Action("display","Card")",
data: { number: dusNumberVal },
type: 'GET',
success: function (result) {
$('#results').html(result);
},
error: function () {
alert("error...");
}
});
} else {
alert('Please enter Number.');
}
}
</script>
Try this:
$(document).keypress(function(e) {
if(e.which == 13) {
ShowCard();
}
});
function ShowCard(){
...
}
What it does is when the page is loaded, once you press enter, the ShowCard function gets executed.
Wrap <button type="submit"> in <form> tag
Related
Trying to make some database validation with Jquery Get method before submitting a form. But I get the error
Uncaught TypeError: form.submit is not a function
Got the logic form here
Simplified Code below (but the err is still there...)
<html>
<body>
<div id="insertCertificateForm">
<form action="/Certificates/Insert" method="post">
<div>
<label>Charge</label>
<input name="Charge" id="Charge" />
</div>
<input type="submit" value="Insert" class="btn btn-default" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#insertCertificateForm').submit(function (e) {
e.preventDefault();
var form = this;
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
form.submit();
}
else {
return false;
}
});
});</script>
</body>
</html>
Because after clicking button this would mean the current button and
insertCertificateForm was never a form anyways...it was Div
best would be to bind the form with an ID #myForm
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="insertCertificateForm">
<form id="Myform" action="/Certificates/Insert" method="post">
<div>
<label>Charge</label>
<input name="Charge" id="Charge" />
</div>
<input type="submit" value="Insert" class="btn btn-default" />
</form>
</div>
<script>
$('#insertCertificateForm').submit(function (e) {
e.preventDefault();
var form = $("#Myform");
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
form.submit();
} else {
return false;
}
});
});
</script>
</body>
</html>
and also load your scripts in the head
Your selector is wrong $('#insertCertificateForm'), if you want to do like this you need to add this id into your form <form id="insertCertificateForm" otherwise follow this way,
$('form').submit(function (e) {
e.preventDefault();
var Charge = $('#Charge').val();
$.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
if (data) {
$(this).submit();
} else {
return false;
}
});
});
That's because you're calling this and not $(this) when declaring the form variable. You can either declare it as $(this) or use $(form) to submit the form.
I've a page which have two different forms:
Form 1:
<form id="info-form" method="POST" action="">
<label for="name">What is your Name? </label>
<input required type="text" name="name" placeholder="Enter your full name here." />
<label for="email">What is your email ID? </label>
<input required type="email" name="email" placeholder="your.name#email.com" />
<label for="mobile-number">What is your 10-Digit Mobile Number? </label>
<input required type="text" name="mobile-number" maxlength="10" placeholder="Enter num." />
<label for="posting-place">What is your current place of residence? </label>
<input type="text" name="place" placeholder="Enter your current residing place here." />
<button type="submit" class="btn btn-lg btn-success">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
Reset
</button>
</form>
Form 2:
<form id="contact-form" method="POST" action="">
<label for="name">What is your Name? </label>
<input type="text" name="name" placeholder="Enter your full name here." />
<label for="email">What is your email ID? </label>
<input type="email" name="email" placeholder="your email" />
<label for="message"> Your Message: </label>
<textarea id="message" name="message" rows="5" placeholder="Type in your message here"></textarea>
<button id="submit_button" type="submit" class="btn btn-lg btn-success">
Send
</button>
<button id="reset_button" type="reset" class="btn btn-lg btn-warning">
Reset
</button>
</form>
I then have these below thank you messages after the closing form tag of both the above two forms
Thank you message after submitting Form 1:
<div style="display:none;" id="thankyou_form">
<p><em>Thank You</em> for submitting!</p>
</div>
Thank you message after submitting Form 2:
<div style="display:none;" id="thankyou_contact">
<p><em>Thank You</em> for contacting! We will get back to you soon!</p>
</div>
I then have two script for displaying the thank you message on the same page after the form is submitted.
<script type="text/javascript">
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_contact").style.display = "inline";
}
else
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_contact").style.display = "none";
}
}
});
});
});
</script>
But when I submit the second form the thankyou message is also displayed is the first form. Also, the form is submitted twice.
Can you please inform me how to identify both the javascript separately? Or, Can I combine both the script into one but both submit buttons working independently of each other?
It would be very much helpful and also enlightening for me if you can point out my mistake.
P.S. I'm a beginner.
Edit1: The javascript code was modified (but currently non-working) as per suggestion from David. The new code is:
<script type="text/javascript">
$(function ()
{
$('form').submit(function (e)
{
if(e.target === 'form#info-form')
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
document.getElementById("thankyou_info").style.display = "inline";
}
else
{
document.getElementById("thankyou_info").style.display = "none";
document.getElementById("sorry_info").style.display = "inline";
}
}
});
}
if(e.target === 'form#contact-form')
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
document.getElementById("thankyou_contact").style.display = "inline";
}
else
{
document.getElementById("thankyou_contact").style.display = "none";
document.getElementById("sorry_contact").style.display = "inline";
}
}
});
}
});
});
</script>
Use event.target to determine which form is getting submitted, You need to refine your code as,
if(response.result == 'success')
{
// Determine if the submission came from "Info Form" or "Contact Form"
if(e.target === 'form#info-form')
{
document.getElementById("thankyou_form").style.display = "inline";
}
else
{
document.getElementById("thankyou_contact").style.display = "inline";
}
}
else
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_form").style.display = "none";
document.getElementById("thankyou_contact").style.display = "none";
}
I need some help, I have a form that before the 'Send' button have a select type 'check' if this is uncheck and the people click on 'send' the form show a pop up with the preview of the all data in the form, if the select is check and the people click on 'send' this is sending normal, but I would like change that, I would like change the select check to a button 'Preview' and when the people click show the pop up with the preview, and the send buttom continue normal send the form.
this is the code for the pop up with the rule if is check or uncheck.
function check_form() {
var url = "process_estaform.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#estafrm").serialize(), // serializes the form's elements.
success: function(data)
{
$("#dialog").html(data);
if($("#senditornot").prop("checked") === false ) {
$("#dialog").attr("title","This dialog box will automatically close.");
$("#dialog").dialog();
$("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
}
else {
$("#dialog").delay(5000).fadeOut("slow").css('display','block');
}
},
error :function() {
$("#dialog").html(data);
$("#dialog").attr("title","This dialog box will automatically close.");
if($("#senditornot").prop("checked") === false ) {
$("#dialog").dialog();
$("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
}
else {
$("#dialog").delay(5000).fadeOut("slow").css('display','block');
}
}
});
}
code html.
<div class="container">
<input type="checkbox" name="sendit" id="senditornot" />
</div>
<br>
<div class="container">
<div align="center">
<input type="submit" id="submitter" value="Submit" />
</div>
</div>
img form
Add following before function check_form.
$("#preview").click(function()
{
var previewData = $("#estafrm").serialize();
$("#dialog").html(previewData);
})
add preview button in code.html
<input type="button" name="preview" id="preview" value="preview" />
Added complete code.
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function check_form() {
var url = "process_estaform.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#estafrm").serialize(), // serializes the form's elements.
success: function(data)
{
$("#dialog").html(data);
if($("#senditornot").prop("checked") === false ) {
$("#dialog").attr("title","This dialog box will automatically close.");
$("#dialog").dialog();
$("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
}
else {
$("#dialog").delay(5000).fadeOut("slow").css('display','block');
}
},
error :function() {
$("#dialog").html(data);
$("#dialog").attr("title","This dialog box will automatically close.");
if($("#senditornot").prop("checked") === false ) {
$("#dialog").dialog();
$("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
}
else {
$("#dialog").delay(5000).fadeOut("slow").css('display','block');
}
}
});
}
$("#preview").click(function(){
var previewData = $("#estafrm").serialize();
console.log(previewData);
$("#dialog").html(previewData);
alert(previewData);
})
})
</script>
<body>
<form name="estafrm" id="estafrm">
<div class="container">
<input type="text" name="name" id="name" value=""/>
<input type="checkbox" name="sendit" id="senditornot" />
</div>
<br>
<div class="container">
<div align="center">
<input type="submit" id="submitter" value="Submit" />
<input type="button" name="preview" id="preview" value="preview" />
</div>
</div>
</form>
Hello friends please am new to jquery and javascript so i copied the code I want to send form to a php page without reloading the page, this code works but i want to click the submit button to send the form and not the enter key:
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#name').keypress(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {
var info = $('#name').val();
$.ajax({
method: "POST",
url: "fell.php",
data: {
name: $('#name').val(),
job: $('#job').val()
},
success: function(status) {
}
});
};
});
});
</script>
To make the click of the submit button work you should wrap your code in a form element then change your JS code to hook to the submit event of that form. Note that will also give you the 'submit on enter keypress' action by default, so your current keypress handler can be removed. Try this:
<form id="my-form">
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#my-form').submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "fell.php",
data: $(this).serialize(),
success: function(status) {
console.log('AJAX call successful');
console.log(status);
}
});
});
});
</script>
You are not name the submit button. Try to give name to submit button and try below:-
<form id="myFrom" onsubmit="submitForm();">
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" name="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
});
function submitForm(){
$.ajax({
method: "POST",
url: "fell.php",
data: $("#myFrom").serialize(),
success: function(status) {
alert("successfull");
}
});
return false;
}
</script>
Hi I have form and following things are bothering me:
1. Form does not submit on pressing enter.
2. When i press enter in input field then Search Now button needs to be pressed
twice to search places.
Form is displayed as below:
<form method="POST" id="mylocform" action="">
<h3 class="animated slideInLeft delay-2">
<input type="text" placeholder="Start Typing Your Location" id="geocomplete"
style="color:black;width:100%;padding:5px;height:45px;border-radius:5px"
autocomplete="off" class="chkmeloc" onblur="checkmylocform()"/></h3>
<input type="submit" class="btn btn-default btn-lg animated fadeInUpBig delay-3"
style="color: black;background-color: #FFF;border-color: #FFF;"
value="Search Now!"/>
</form>
Validation goes like below:
$(document).ready(function(){
$("form#mylocform").submit(function(event) {
event.preventDefault();
validate();
});
});
function checkmylocform(){
var checkOdlen = $(".chkmeloc").val().length;
if(checkOdlen==0){
$(".chkmeloc").css("border-color","#F05F68");
$(".chkmeloc").focus();
$(".chkmelocmess").html('<button type="submit" class="btn btn-default
btn-lg" style="background: #FFF;color:red">
<i class="fa fa-warning text-red"></i>
Select Your Location</button>');
return false;
}
else{
$(".chkmeloc").css("border-color","#0C9");
$(".chkmelocmess").html('<input type="submit" class="btn btn-default
btn-lg" style="color: black;background-color: #FFF;border-color: #FFF;"
value="Search Now!"/>');
return true;
}
}
function validate(){
$.each($('form :input'),function(){
$(this).blur().change();
});
if(!checkmylocform()){
return false;
}
else{
submitform();
}
}
Submit Form has code to submit form via ajax as below. Please help me to get out of this situation.
$("Your selector").keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$(input[type = submit]).click();
return false;
}
});
look at this site:
http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
the site says that enter key is automaticly a submit in al browser
Try This
File index.html :
<form class="form-inline" action="" method="POST">
<input type="password" name="token" placeholder="Enter Facebook access token..." class="subscribe-email">
<button type="submit" class="btn">Start!</button>
</form>
<div class="success-message"></div>
<div class="error-message"></div>
File script.js :
$('.get_token form').submit(function(e) {
e.preventDefault();
var postdata = $('.get_token form').serialize();
$.ajax({
type: 'POST',
url: 'assets/submit_token.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.valid == 0) {
$('.success-message').hide();
$('.error-message').hide();
$('.error-message').html(json.message);
$('.error-message').fadeIn();
}
else {
$('.error-message').hide();
$('.success-message').hide();
$('.get_token form').hide();
$('.success-message').html(json.message);
$('.success-message').fadeIn();
}
}
});
});