Submit button is not working. why? - javascript

The submit button is working when the function is defined on the same page. But it's not working when the action of the submit button is defined in separate JS file.
<form method="post">
<div id="sjfb">
<div id="form-fields">
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.DisplayFor(model => model.controls);
#Html.DisplayFor(model => model.formEditor);
}
</div>
<button type="submit" id="submit" class="submit">Save Form</button>
</div>
</form>
// in separate .js File)
$("#sjfb submit").click(function () {
alert('Submit button is working');
}
I even tried the following methods:
1. document.getElementID('submit').onClick(function(){*some code*}
2. Giving a name to the function and calling it in onClick()
3. $(#sjfb #submit).click(function(){...})
4.$(#sjfb .submit).click(function(){...})
still not working. I can't find what is wrong with this.

You're missing the dot on submit class event handler.
$("#sjfb submit")
You should have:
$("#sjfb .submit")

The problem is in this snippet
$("#sjfb submit").click(function () {
alert('Submit button is working');
}
Just to make it clear you should change it as follows:
$(document).ready(function(){
$("#sjfb .submit").click(function () {
alert('Submit button is working');
});
});
Or as follows:
$(document).ready(function(){
$("#sjfb #submit").click(function () {
alert('Submit button is working');
});
});
since you've given class and id both as "submit" to your submit button. So you should add that to your js also.
Your entire code as tested on w3 is as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sjfb .submit").click(function () {
alert('Submit button is working');
});
});
</script>
</head>
<body>
<form method="post">
<div id="sjfb">
<div id="form-fields">
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.DisplayFor(model => model.controls);
#Html.DisplayFor(model => model.formEditor);
}
</div>
<button type="submit" id="submit" class="submit">Save Form</button>
</div>
</form>
</body>
</html>

if you load your javascript file before le dom content is loaded, then it can't bind the event on the button. try loading le js file a the end of the document, or you can add the event when the event $(window).on('load', fn) is fired

Replace your code with this
$(document).ready(function() {
$("form").submit(function () {
alert('Submit button is working');
});
});

Try with finding the element inside the div
$("#sjfb").find('button[type="submit"]').click(function (e){
console.log(this);
});
This code will find the button inside the id="sjfb" div and will call
the click function.

Related

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

jquery on click event not firing when using jquery 1.11.3.min.js .

As per below html controls , if I try to change the "id" of Submit to "Save" , click of Save is not working then.
HTML
<html>
<head>
</head>
<body>
<input type="button" value="Submit Request" id="Submit"class="buttonclass"/>
<input type="button" id="cancel" value="Cancel" class="buttonclass" />
</body>
</html
JS CODE BELOW :
$("#Submit").on({
click: function () {
$(this).attr('id', 'Save');
return false;
}
});
$("#Save").on({
click: function () {
alert("Save Event Fired");
}
});
You aren't binding the click event to #Save because the id #Save only exists AFTER the Submit button has been pressed (there is no #Save on load). But if you put the click event on the body and only accept the #Save, you can bubble the event up and handle it there.
$("#Submit").on('click', function (e) {
e.stopPropagation()
alert("Submitted Fired");
$(e.target).attr('id', 'Save');
$(this).unbind('click');
})
$("body").on('click', '#Save', function (e) {
alert("Save Event Fired");
})
https://jsfiddle.net/6Lchafwa/1/
If this is the answer you are looking for, press the green tick on the left.

Form hides on submit

On my form, you have to select an item in order for the form to show. The problem I'm running into is that on submit, it hides the form. How can I correct that?
This is my script:
<script>
$(document).ready(function () {
$(".orderForm").hide();
$(".choice").each(function () {
$(this).click(function () {
$(".orderForm").show();
});
});
});
</script>
Here's part of the html:
<form method="post" class="form-horizontal">
<div class="choiceContainer">
<#choicesSection><#choice id="2098885" class="choice">
<label>
<div align="left">
<h3 class="choiceName">
<#choiceSelectionRadioButton />
<#choiceName>148PKI</#choiceName>
</h3>
<div class="orderForm">
</div>
</div></div>
<div class="btn" align="center"><#selectedPaymentOptionSubmitButton label="Continue"
class="continue"/></div>
I updated the script too.
Use sessionStorage (or an appropriate polyfill script) to persist a variable across page loads. (Note sessionStorage serialized the data so when getting the value it will no longer be true but the string "true")
$(document).ready(function () {
if(!sessionStorage.formSubmitted)
$(".orderForm").hide();
//Reset it for possibly another form submission
sessionStorage.removeItem('formSubmitted');
$(".choice").each(function () {
$(this).click(function () {
$(".orderForm").show();
});
});
$("form.form-horizontal").submit(function(){
sessionStorage.formSubmitted = true;
});
});

Can I attach an action to a buttonclick?

If i have a button, can I attach an action to it to perform server side processing, or does it have to be wrapped in a form?
For example
<button type="submit" onClick="listco_directory_contents.js"> List </button>
Can this be made to work, or is a form required?
You can't have a type="submit" if it's not in a form, there is nothing to submit. What you can do, is having a <button id="myButton">, then attach an event to it:
var myButton = document.selectElementById('myButton');
myButton.addEventListener('click', function() {
/* do something cool */
}, false);
And the "do something cool" could be an Ajax request so you send data to the server.
You can yes but if your aiming to do server side processes i recommend the jquery way.
<!--this button uses javascript-->
<input type="button" onclick="myfunction()" value="button"/>
<!--this button uses jquery-->
<input type="button" id="myfunction" value="button"/>
<script>
//javascript function using the onclick event
function myfunction(){
alert("an action");
// or any other function u wish to
// do once the button is click
}
//jquery using the id of the button
$(document).ready(function(){
$("#myfunction").click(function(){
alert("another action");
// or any other function u wish to
// do once the button is click
});
});
</script>
You could also just include the js:
<script type="text/javascript" src="listco_directory_contents.js"></script>
and then call whatever function you need from there:
<button onClick="exampleFunction()"> List </button>
Or in case you want to do server side processing with php you can do simply:
<button onClick="$.post('http://example.com/index.php');"> List </button>
$(function(){
$(':submit').on('click',function(){
alert('hi');
})
})
also can be type=submit
$(function(){
$('input[type="submit"]').on('click',function(){
alert('hi');
})
})
DEMO

simple append issue with jquery

I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>
You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.
Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});
Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.

Categories

Resources