I need to call this jQuery function on button click. Bud I already have two functions in js .
Problem is three functions are not working. Either func1(), func2() (these are placed in external file.) or jQuery function is executed.
<script type="text/javascript">
$(document).ready(function() {
$('#submit').bind("click",function()
{
var imgVal = $('#id1').val();
if(imgVal=='')
{
$("#modal-body").text("Error");
$('#Function1').trigger('click');
}
func1();func2();
return false;
});
});
</script>
<input type="file" name="name1" id="id1" size="30" />
<input type="submit" name="name2" id="submit" class="class1" value="upload" />
<button type="submit" id="submit1" class="btn btn-primary" onclick="func1();func2();" >Submit</button>
//On clicking this button three functions have to be checked
The return false has to be after the func1() and func2() calls, the onclick="func1();func2()" in the submit button can be removed.
Correct way:
<script type="text/javascript">
$(document).ready(function() {
$('#submit').on("click",function()
{
var imgVal = $('#id1').val();
if(imgVal=='')
{
$("#modal-body").text("Error");
$('#Function1').trigger('click');
}
func1();
func2();
return false;
});
});
</script>
I've also added a working JSFiddle https://jsfiddle.net/q9mo9c0c/1/
Related
I'd like to create html-objects with jQuery and then delete them again via jQuery/javascript but I run in issues because these objects didn't exist when the page was loaded.
Do you have any ideas on how I may solve this issue?
Thanks in advance.
(This is my first post on stackoverflow - I hope I did everything right ^^)
https://jsbin.com/yudamofoho/edit
<body>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
</body>
function rmInput(){
$(this).parent().remove();
return false;
}
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput();" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
});
this refers to the Window object not the element you are thinking.
You have to pass this to the function so that you can refer that inside the function:
onclick="rmInput(this);"
function rmInput(el){
//console.log(this.constructor.name); // Window
$(el).parent().remove();
return false;
}
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput(this);" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
The issue is because you're using the outdated onclick attribute. Within the function it invokes this will refer to the window, not the element which raised the event.
To fix this, and improve your logic, remove the inline event handler and use a delegated one instead:
jQuery(function($) {
$('#btn-add').on('click', function() {
let ipt = '<div><input type="text" value=""><input type="button" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
});
$('#ipt-list').on('click', '.btn-rm', function() {
$(this).parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ipt-list"></div>
<input type="button" id="btn-add" value="Add">
Also note that I changed both buttons to type="button". If you're going to cancel the event in both cases, the submit type becomes redundant.
Since you are using jQuery you don't need to put inline onclick event.
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
$('#ipt-list').on('click', '.btn-rm', function(){
$(this).parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
</body>
i have two buttons and alert functions on both buttons. i want that if user click on 1st button the function on 1st button should work but when user click the 2nd button then the function on 1st button should not not work i mean the function should not work on 1st button if user has clicked on 2nd button. below is the code but it is not working:
<script>
function abc(){
alert ("its a alert box!");
}
function xyz(){
var a=150;
alert(a);
}
<body>
<input type="button" value="submit 1" onClick="abc();">
<input type="button" value="submit 2" onClick="xyz();">
</body>
You could use jquery to unbind the click event for the first button when the second button is clicked. But you would need to add some id attributes so that you can do so easily.
<body>
<script>
function abc(){
alert ("its a alert box!");
}
function xyz(){
$('#btn1').unbind('click');
var a=150;
alert(a);
}
</script>
<input id="btn1" type="button" value="submit 1" onClick="abc();"></input>
<input id="btn2" type="button" value="submit 2" onClick="xyz();"></input>
</body>
You could also further refine your code to not rely on inline onclick attributes.
$(document).ready(function(){
$('#btn1').click(abc);
$('#btn2').click(xyz);
})
With jQuery (since it is one of the tags you gave to the post) you can work with unbind.
For starters, don't use inline click handlers. IMHO, something like this would be nicer:
<script>
$(document).ready(function(){
function abc(){
alert ("its a alert box!");
}
function xyz(){
var a=150;
alert(a);
}
var bt1enabled = true;
$('body').on('click', 'input[type=button]', function(){
if(this.id==="btn1" && bt1enabled) {
abc();
} else if (this.id==="btn2") {
btn1enabled = false; // or btn1enabled = !btn1enabled if this is supposed to toggle
xyz();
}
});
}):
</script>
<body>
<input id="btn1" type="button" value="submit 1"></input>
<input id="btn2" type="button" value="submit 2"></input>
</body>
try this
<div>
<input id="button1" type="button" value="Click1"/>
<input id="button2"type="button" value="Click2"/>
</div>
<script>
$('#button1').on('click', Button1Click);
$('#button2').on('click', Button2Click);
function Button1Click() {
alert("You have clicked button 1");
}
function Button2Click() {
alert("You have clicked button 2");
}
How to make the function only runs once per button?
if clicks in "click me" only works once, and the same for the other buttons.
Order not to put much code, I put an example..:
http://jsbin.com/apexod/2/edit
<input type="button" value="click me" onclick="hello('Jhon')"><br>
<input type="button" value="click me1" onclick="hello('Gerard')"><br>
<input type="button" value="click me2" onclick="hello('Kaoru')">
<script>
function hello(id){
alert("hello "+id);
}
</script>
A solution would be to register what buttons have been clicked :
<script>
var done = {}
function hello(id){
if (done[id]) return;
done[id] = 1;
alert("hello "+id);
}
</script>
(another one would be to use a utility lib like jQuery and its one function but this would be overkill for just that)
You can send the button element reference along to the function, and remove the event from the button:
<input type="button" value="click me" onclick="hello(this,'Jhon')"><br>
<input type="button" value="click me1" onclick="hello(this,'Gerard')"><br>
<input type="button" value="click me2" onclick="hello(this,'Kaoru')">
<script>
function hello(el, id){
alert("hello " + id);
el.onclick = null;
}
</script>
Demo: http://jsfiddle.net/Guffa/CDjGY/
Once executed you can override the function with an empty function
function hello(){
alert("hello " + id);
hello = function(){}
}
I have a complicated case here, but below is an example just to make it simple.
I have two buttons, each with their own onClick function. I want to call the onClick function of button A when I click on button B.
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
Note that the event can be onClick() or onMouseUp()
p.s. I have to do it using only javascript. (NO jQuery). Thanks
<input type="button" onclick="fnc()"/>
<input type="button" id="message" onclick="alert('ok')" />
<script type="text/javascript">
function fnc()
{
document.getElementById("message").click();
}
</script>
are you looking for this?
<html>
<head>//I guess something like setTimeout(function,timeInMilliseconds)
<script language = "javascript">
function sayHiA(){
var v = document.getElementById('buttonB').getAttribute("onClick");
setTimeout(v,0);
}
function sayHiB(){
document.getElementById('para').innerHTML = 'wrote';
}
</script>
</head>
<body>
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
<p id = "para">
Write Here
</p>
</body>
</html>
function sayHiB() {
sayHiA();
}
Did you tried this with an external js ? This is quite the most basic thing you can do in javascript.
I made you a jsfiddle : http://jsfiddle.net/pjDVP/4/
The html :
<input id='bta' type='button' value='button a'></input>
<input id='btb' type='button' value='button b'></input>
The js (with jquery laoded) :
$(function(){
$('#bta').click(function(){aORbClick();});
$('#btb').click(function(){aORbClick();});
})
function aORbClick(){alert('I clicked a or b');}
just call function sayHiA from sayHiB or call it after.
Call from sayHiB
function sayHiB()
{
sayHiA();
}
or after
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB(); sayHiA();"></input>
or easier way is to use jQuery, so you can do this
function sayHiB(){
if($('#id-of-a').attr('onclick'))
$('#id-of-a').click();
else if ($('#id-of-a').attr('onmouseup'))
$('#id-of-a').mouseUp();
}
function sayHiB(){
$('#buttonA').click();
}
Raw JS:
function sayHiB(){
var buttonA = document.getElementById('buttonA');
buttonA.onclick.apply(buttonA); // in onclick function you can get buttonA as 'this'
}
I'd probably make a generic function that switches on the button's name/id to figure out what to do - this would also make your code work independent of the event attribute used to call the function.
HTML:
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="myFunc(this)"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="myFunc(this)"></input>
JavaScript:
function myFunc(elem){
switch(elem.id){
case 'buttonA':
sayHiA();
break;
case 'buttonB':
sayHiB();
sayHiA();
break;
}
}
This would also help with any DOM manipulation you might need as the button which was clicked is passed to the generic function myFunc, allowing you to quickly access other attributes or nearby elements.
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>