Please check my code. The code adds the list item but it suddenly disappears. Kindly let me know the error in my code.
<button type="submit" class="btn btn-primary" id="needButton">Need</button>
<button type="submit" class="btn btn-primary btn-success" id="haveButton" >Have</button>
</form>
<div class="myNeed">
<ul class="need">
<li>
The needed items are
</li>
</ul>
</div>
This is js code
$(document).ready(function() {
$("#needButton").click(function () {
var needed = $("#bill").val();
$(".need").append("<li>" + needed + "<li>");
});
});
The issue is because the button click triggers the form to be submit which redirects the page.
To fix this, hook your event handler to the submit event of the form element and call preventDefault() on the event. Using this methoid over change the button type means that users can still trigger the action by pressing the return key on the keyboard when the input has focus.
jQuery($ => {
$("form").on('submit', e => {
e.preventDefault();
var needed = $("#bill").val();
$(".need").append(`<li>${needed}</li>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form>
<input type="text" id="bill" />
<button type="submit" class="btn btn-primary btn-success" id="haveButton">Have</button>
</form>
<div class="myNeed">
<ul class="need">
</ul>
</div>
i think there is a typo you write id=haveButton but in js code you type #needButton try change that to #haveButton
i did a simple code for here i hop it will help you
<button id="add">Have</button>
<ul class="need"></ul>
<script>
$(document).ready(function () {
$("#add").click(function () {
var needed = '123.';
$(".need").append("<li>" + needed + "</li>");
});
});
</script>
Related
i am having trouble selecting the correct button in my form. For example i have two items and i want to delete the one on the right and when i click to delete it always removes the one on the left;
I am shure the this keyword is not the correct one
Index.ejs
<% service.forEach(function (myService) { %>
<form method="post" action="/service/<%= myService._id %>?_method=DELETE" name="del_form">
<button type="submit" class="btn btn-danger btn-del" name="del_btn"></button>
</form>
script.js
let delServiceBtn = $('button[name=del_btn]');
let delServiceForm = $('form[name=del_form]');
delServiceBtn.on('click', function (e) {
e.preventDefault();
if(confirm('Confirm delete')){
delServiceForm.submit();
}
});
Add the click attribute to your <button> tag as,
<button type="submit" class="btn btn-danger btn-del" name="del_btn" onClick="delService(this);"></button>
And write a new javascript function delService as,
function delService(buttonObj) {
if(confirm('Confirm delete')){
var btn = document.getElementsByName(buttonObj.name);
btn.submit();
}
}
Hope this helps!
Hi i'm new to JS and could use some help.
So I am basically trying to send some text from a textarea to a function called inputFromText on a submit button click event, but somehow the function is being triggered before the click (when opening the html window via electron) and nothing happens when you click the button afterwards.
How do I prevent this from happening?
<body>
<form>
<div class="form-group">
<textarea class="form-control" rows="5" id="txa_trainingText"></textarea>
<button type="submit" class="btn btn-default" id="btn_submit">Submit</button>
</div>
</form>
<script>
const trainingText = document.getElementById("txa_trainingText").value;
document.getElementById("btn_submit").addEventListener("click", inputFromText(trainingText));
function inputFromText(text) {
...
}
</script>
</body>
I found out that when using a function without the text argument one could solve the problem by writing:
function inputFromText(e) {
e.preventDefault();
...
}
I believe you need to wrap the click event handler as a function, so line would read:
document.getElementById("btn_submit").addEventListener("click", function() { inputFromText(trainingText)});
Just change the button type="submit" to button type="button"
<button type="button" class="btn btn-default" id="btn_submit">Submit</button>
Let's say I have this HTML:
<div id="container"></div>
<p>Output: <span id="output"></span></p>
and this JS:
function otherAction(e) {
document.getElementById('output').innerHTML = 'otherAction';
e.preventDefault();
}
function submit(e) {
document.getElementById('output').innerHTML = 'submit';
e.preventDefault();
}
ReactDOM.render(
<form onSubmit={submit}>
<input type="text" defaultValue="foo" />
<button onClick={otherAction}>Other Action</button>
<button type="submit">Submit</button>
</form>,
document.getElementById('container')
);
Actually, let's not just say it, let's put it in a JSFiddle example. What I want to happen is that:
Clicking the "Other Action" button triggers the otherAction function (it does!)
Clicking the "Submit" button triggers the submit function (it does!)
Putting your cursor in the text box and pressing enter triggers the submit function (this does not work currently!)
In #3, what happens instead is that otherAction gets triggered. How can I change that?
If you set the first button to type="button" (i.e. provide a type for each button) it should work.
<button type="button" onClick={otherAction}>Other Action</button>
https://jsfiddle.net/L0urqamz/3/
You should provide types for all buttons, otherwise it won't work:
<form onSubmit={handleSubmit}>
// form content
<button type="button" onClick={someButtonEvent}>DO STH</button>
<button type="submit">SUBMIT</button>
</form>
I have about 20 Forms. When A button the closes form should unhide.
And all the other forms should remain hidden. '
This is the way i was doing it
$(document).ready(function() {
console.log( "ready!" );
$(".toggle-new-form1").click(function() {
$(".new-form1").toggleClass("hidden");
// $("input[name='union_name']").focus();
});
$(".toggle-new-form2").click(function() {
$(".new-form2").toggleClass("hidden");
// $("input[name='union_name']").focus();
});
});
This is sample of html
<div class="form-group" style="">
<label >Email:</label>
<button type="button" id="new" style="margin-top:7px;" class="toggle-new-form pull-right btn btn-primary">Edit</button>
<p> example#gmail.com </p>
</div>
<form id="name-form" class="new-form1 hidden" method="POST" action="">
<input id="email">
<button type="submit"> Submit </button>
</form>
But i am having trouble hiding previously activated forms.
Is there anyway to make this more efficient and hide previously activated forms.
I have tryed this as well
<script type="text/javascript">
$(document).ready(function() {
console.log( "ready!" );
$(".toggle-new-form").click(function() {
$(".new-form").addClass("hidden");
$(this).closest( ".new-form" ).removeClass( "hidden" )
});
});
</script>
I dont know how its working
Js fiddle https://jsfiddle.net/0p2brLww/2/
You can try something like this a single click event for all the buttons+forms
$(document).ready(function() {
$('[class^="toggle-new-form"]').click(function() {
var el = $(this).parent().next();
$('[class^="new-form"]').not(el).addClass('hidden');
el.toggleClass("hidden");
//$(this).parent().next().find("input[name='union_name']").focus();
});
});
This should work...
$(document).ready(function() {
$('button').click(function(e) {
var targetForm = e.target.dataset.buttonFor
$('form').addClass('hidden')
$("."+targetForm).toggleClass('hidden')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<label >Name:</label>
<button type="button" data-button-for="first-name" style="margin-top:7px;" class="toggle-new-form pull-right btn btn-primary">Edit</button>
<p> Example first Name </p>
<form id="name-form" class="new-form first-name hidden" method="POST" enctype="multipart/form-data" action="">
<input>
</form>
<hr>
<div class="form-group" style="">
<label >Shipping & Addresses:</label>
<button type="button" data-button-for="shipping-address" style="margin-top:7px;" class="toggle-new-form pull-right btn btn-primary">Edit</button>
<p> Example Last Name </p>
</div>
<form id="name-form" class="new-form shipping-address hidden" method="POST" enctype="multipart/form-data" action="">
<input>
</form>
<hr>
Adding to answer given by #madalin vascu, I would like to suggest that you should be using event delegation in this case.
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Wrap all the forms in a div and call function like this:
$('.divclass').on('click','[class^= "toggle-new-form"]',function() {});
Check Out the jsfiddle:
Here is the fiddle
i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.
Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here