Develop Reference

Can't prevent submit on dynamically inserted <button> into DOM, that is part of a form

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>

Toggle button by passing jquery variable

I have in my html:
<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick='return(toggle_server_create("start_ld", "stop_ld", false));' />
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld" style="display:none;" onclick='return(toggle_server_create("start_ld", "stop_ld", true));' />
In my javascript/jquery:
function toggle_server_create (start_id, stop_id, state){
var query = '#' + start_id +',' + '#' + stop_id;
var query_stop = '#' + stop_id
var query_start = '#' + start_id
// console.log(state);
// console.log(query_stop);
$(query).click(function() {
// console.log(query_start);
// console.log (this.name);
if ((this.name === start_id) && $(this).is(":visible") && state==false) {
console.log("Show stop")
$(query_stop).show();
}
else if ((this.name === stop_id) && $(this).is(":visible") && state == true) {
console.log("Show start")
$(query_start).show();
}
$(this).hide();
});
}
The toggle_server_create should accept the jQuery variables and toggle between start and stop accordingly. However, it doesn't function that way but instead has to be clicked twice to see the button changed and when clicked again it disappears. I'm new to JavaScript and I'm not sure how to fix this.

Your issue is a result of setting a click handler only after the user clicks the button. When your button is clicked toggle_server_create is run. When it runs, it creates a click handler for the two buttons that says, "when you click this button, execute everything in this function.
So, the first time you do this only your query variables are set, and then a click handler is created that will execute whenever one of those buttons is set. That is why the second time you click it works.
The code is a bit confusing so I'm not 100% sure what you are trying to accomplish, but that is what is causing it to only run on the second click.
If you are truly trying to just toggle between the buttons, consider something like this: https://jsfiddle.net/bb14xn7z/1/
Where your html is:
<input type="button" value="Start L/D" id="start_ld" name="start_ld"/>
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld" style="display:none;"/>
And your javascript is:
$(function() {
$("#start_ld").click(function() {
$(this).hide();
$("#stop_ld").show();
});
$("#stop_ld").click(function() {
$(this).hide();
$("#start_ld").show();
});
});
Notice how I do not set onclick in the html, and instead set up the click handler in javascript on page load.

there are two problems here, HTML doesn't use apostrophe for attribute values
<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick="return toggle_server_create('start_ld', 'stop_ld', false));" />
and you don't have to pass those IDs since they're static, you could store them in a variable in the JavaScript or hardcode them into the function to give more flexibility

You can do it with jquery simple as this :)
https://jsfiddle.net/p1tmaoh7/
html
<div class="buttons">
<input type="button" value="Start L/D">
<input type="button" value="Stop L/D" style="display:none;">
</div>
jquery
$(document).ready(function(){
$('.buttons input').click(function(){
$('.buttons input').toggle();
});
});

Javascript disable a clickable image when other image is clicked

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 display second button after the click on first button?

How to display second button after the click on first button??
I mean, when The user clicks on one button, he should see another button, on click of which he should return to his previous button!! Cyclic event kind of...
I wanted to do this using Java script and HTML.
I tried to use 'onclick' but it dint work!! Help!!
This is what I used..
`<body>
function alert()
{
alert("54");
// <input type="button" id="btnSer" value="Back"/>
}
<input type="button" id="btnSearch" value="Search" onClick="alert();">
</body>`

Something like this?
<button id="button1" style="display:block;" onclick="document.getElementById('button2').style.display = 'block'; this.style.display = 'none';">Button 1</button>
<button id="button2" style="display:none;" onclick="document.getElementById('button1').style.display = 'block'; this.style.display = 'none';">Button 2</button>

here is the code using simple plain javascript : (*note that naming your function alert() isnt smart because there is already a predefined function in js called alert)
Javascript Code
function addBtn(){
document.getElementById('btnHolder').innerHTML = '<input type="button" onClick="javascript:removeBtn();" value="click" />';
}
function removeBtn(){
document.getElementById('btnHolder').innerHTML = '';
}
HTML
<div id="btnOne"><input type="button" onClick="javascript:addBtn();" value="click" /></div>
<div id="btnHolder"></div>
this code is not tested but it should work, let me know if you have any other questions

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially

You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements

try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});

Here's an example using toggle:
http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});

$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});

Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.