I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Related
I am trying to submit a form with event data on click of a button. I have following jquery code to fire the event. But it's not getting triggered.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('form#form1').submit({
"url": "url"
}, doSomethint);
});
function doSomethint(e) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button>
<form id="form1">
<input type="text" value="123">
</form>
https://jsfiddle.net/1bdesjof/
Because the submit buttons are not in the form tag and the variable ev was undefined.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('form#form1').submit({
"url": "url"
}, doSomethint);
});
function doSomethint(ev) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button><br/>
<input type="text" value="123">
</form>
The difference:
$('#form1').submit() it will submit the form
$('#form1').submit(eventData, handler) add event to the form
because your submit button outside the form there is no submit event called. Solution, add your button to the form container or call $('#form1').submit() after add event like below.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('#form1').submit({
"url": "url"
}, doSomethint);
// call it
$('#form1').submit()
});
function doSomethint(ev) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button>
<form id="form1">
<input type="text" value="123">
</form>
here is below 3 form which generated dynamically in my code.
<form id="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form id="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
in js i was trying to fetch input value of form which is clicked.
$(document).ready(function () {
$('#abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});
But whichever form i submit i always got 1st form input value. I know i am doing this thing wrong can you explain how can i get input value of the form which is submit currently.
id of element in document should be unique. Substitute .className for duplicate .id at <form>, <input> elements. Use event delegation to attach submit event for form elements having .className "abc"; use jQuery() with ".link" selector and context set to this at event handler, chain .val() to get .value of current <input> element.
// dynamic `html`
var html = `<form class="abc">
<input class="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value ="cc">name
<button type="submit">Submit</button>
</form>`;
$(document).ready(function () {
$(document).on("submit", ".abc", function (e) {
var bla = $(".link", this).val();
alert(bla);
e.preventDefault();
});
$("body").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
id should always be unique.In your case use class as a common selector
Here are the changes
HTML
id is replaced with class
<form class="abc">
<input class="link" value="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input class="link" value="cc">name
<button type="submit">Submit</button>
</form>
JS
using class selector & jquery find method to find an input with class link
$(document).ready(function() {
$('.abc').submit(function(e) {
e.preventDefault();
var bla = $(this).find('input.link').val();
alert(bla);
});
});
DEMO
While dealing with dynamically created form element, bind its event while taking document into context i.e. $(document).on("event_name", 'dynamic_element', function(){ ... });
So, below code shall work in your case.
$(document).on("submit", 'form.abc', function(){
... // you can get the form elements value here.
var bla = $(this).find('.link').val();
alert(bla);
e.preventDefault();
});
Note: Avoid using same IDs for multiple elements, use classes instead.
You can try the $("form") submit event to handle this
$(document).ready(function () {
$("form").submit(function(e) {
var bla = $(this).find('#link').val();
alert(bla);
e.preventDefault();
});
});
Here is the working sample:https://jsfiddle.net/e7r14p3t/
HTML ids should be used for only one element each. For multiple elements, you should use the class attribute, which can be selected in jQuery with $('.abc').
HTML:
<form class="abc">
<input id="link" value ="aa">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="bb">name
<button type="submit">Submit</button>
</form>
<form class="abc">
<input id="link" value ="cc">name
<button type="submit">Submit</button>
</form>
JavaScript:
$(document).ready(function () {
$('.abc').submit(function (e) {
var bla = $('#link').val();
alert(bla);
e.preventDefault();
});
});
I have a really strange issue, that seems very basic but I can't get it to work.
I can't prevent the submit event of the button, that is dynamically instered into a div that is also part of a form.
Markup
<form>
...
<div class="dynamically-inserted">
<button class="copy-inquiry">Copy</button>
</div>
...
<button id="submit-form" type="submit">Submit</button>
</form>
jQuery
$( "body" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
On click the form submits and the console.log("button clicked") doesn't get printed. If I add type="button then the form doesn't submit but still nothing happens.
Thanks for checking this out.
You have to provide id='frm' to the form
Fiddle link for further explanation
Html
<form id="frm">
<button type="submit" class="btn1">ss1</button>
<button type="submit" class="btn2">ss2</button>
<button type="submit" class="btn3">ss3</button>
</form>
js
$(document).ready(function() {
$("#frm").submit(function(e) {
e.preventDefault();
var val=$(this).find("button[type=submit]:focus").attr("class");/* this selects the class of button which trigger submit event */
alert(val)
});
});
Hope this helps
The fix was apparently really simple. Change the body to document like this.
$( "document" ).on( "click", ".copy-inquiry", function(e) {
e.preventDefault();
console.log("button clicked");
});
JSFiddle https://jsfiddle.net/rj1405/jaordzuy/2/
You can also use <input> tag instead of <submit.
Please check the JSFidller The bellow code is not working in Stackoverflow
as given in the following example.
$("#form").submit(function(e) {
e.preventDefault();
alert('submit button')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="submit" class="btn1"/>
<input type="button" class="btn2" value= "btn2"/>
<input type="button" class="btn3" value= "btn3"/>
</form>
please help me with my snippet.. I have this code and I don't know what is wrong.. This is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
When I click next It seems does not go to the next form.. thank you all.
This may be due to some missing attibutes of your form
HTML
<form id="krishna">
<input type="text" readonly value="krishna" />
<br />
<button type='button' id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" />
<br />
<button type='button' id="prev">Previous</button>
</form>
Script
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function () {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function () {
$("#radha").hide();
$("#krishna").show();
});
});
check here
You need to prevent the default action, which is the form submit. When you prevent the default action from happening, you will see the desired result
Check this fiddle
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function (e) {
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function (e) {
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
P.S I am not sure why you are still using jquery 1.3.x.
Also, check the fiddle for the updated HTML
Because it is trying to submit the form. So you need to make that button type to button. It is "submit" by default in a form.
JSFidle Demo
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
Your code is fine but What is happening here that your submit button required post request. So you can prevent this behavior by e.preventDefault() function of jquery. I have updated the jquery code as below.
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function(e){
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function(e){
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
visit the following link to get demo on jsfiddle :
http://jsfiddle.net/4N95Q/
This is how I did it.
http://jsfiddle.net/GnzWZ/2/
$('form button').click(function(e){
$("#radha, #krishna").toggle();
return false;
});
Notes:
return false is the jquery solutions for preventdefault.
You can simplify your selectors and optimize your code a little more.
Avoid making style changes that should be originally made in CSS.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</div>
<div id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
console.log("next click");
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
Working fine if you change
form
in the
div
Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>