I have 3 inputs and 3 buttons. I would like to set a value by clicking on the button. Everything working fine with the first set. When I set next input, it change the value of all my inputs.
How can I fix that?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
You can't scope click function inside click function , just use two click and global variable ...
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
});
$("div").on("click", "button", function() {
here.val(this.value);
});
});
Are you wanting to place the value of the Button, into the last focused INPUT,.
This might help..
$(function() {
var lastFocus;
$('body').on('focus','input', function () {
lastFocus = this;
});
$("div").on("click", "button", function() {
$(lastFocus).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
is this you want ?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value+here.val());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
Why have you used the outer function?
You can add a temporary class to the input, to which you want to change the value.
$("input").on("click", function () {
$("input").removeClass('addToThis');
$(this).addClass('addToThis');
});
$("div").on("click", "button", function() {
$(".addToThis").val(this.text());
});
Easiest solution: just put the here variable out the first click listner:
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});
Related
I am puzzled a problem.
When is inside a form.
it does not work.
this error happens.
Uncaught TypeError: insert is not a function
However when it is outside the form.
it works well.
I would like to put the button with onclick=insert next to
[input type="text" id = "total" name="total"]
What should I do?
<form method="post" action={{ route('gumit')}}>
#csrf
<label for="Scotland" class="col-md-4 col-form-label text-md-right">{{ __('info') }}</label>
<div class="col-md-6">
<input type="hidden" name="id" value = "{{$company->id}}" >
<textarea type="textarea" class = "textarea" id="item" >Here is...</textarea>
<br/>
：<input type="text" id = "cost" name="cost" value ="">
：<input type="text" id = "total" name="total" value ="">
<input type="button" id="insert" class="button" value="BUTTON" onclick="insert()">
<br/>
<button type="submit" class="button">submit</button>
<input type="button" id="b1" class="button" value="BUTTON" onclick="update()">
</div>
</form>
<script>
function update() {
}
function insert() {
}
</script>
I would suggest you to try any of two things :
Try defining the script at the head of the HTML file. That should do the work.
Use document.querySelector("#b1") to get the button and then use onClick method on that
let b1= document.querySelector("#b1");
b1.onClick(()=>{
//code for function
})
u should use an anchor as a button
working js-demo
(function (document, window, undefined) {
'use strict';
// Buttons
var buttons = document.querySelectorAll('.js-button');
var displayContent = function (button, content) {
if (content.classList.contains('active')) {
// Hide content
content.classList.remove('active');
button.setAttribute('aria-expanded', 'false');
content.setAttribute('aria-hidden', 'true');
} else {
// Show content
content.classList.add('active');
button.setAttribute('aria-expanded', 'true');
content.setAttribute('aria-hidden', 'false');
}
};
[].forEach.call(buttons, function(button, index) {
// Content var
var content = button.nextElementSibling;
// Set button attributes
button.setAttribute('id', 'button-' + index);
button.setAttribute('aria-expanded', 'false');
button.setAttribute('aria-controls', 'content-' + index);
// Set content attributes
content.setAttribute('id', 'content-' + index);
content.setAttribute('aria-hidden', 'true');
content.setAttribute('aria-labelledby', 'button-' + index);
button.addEventListener('click', function () {
displayContent(this, content);
return false;
}, false);
button.addEventListener('keydown', function (event) {
// Handle 'space' key
if (event.which === 32) {
event.preventDefault();
displayContent(this, content);
}
}, false);
});
})(document, window);
I am trying to make a puzzle game in which the user must press the button in a specific order in which they fill a textbox (will be hidden) with a password ( 3-digits) if the user pressed the buttons for example ( 3,2,1 ) the form will be submitted automatically and redirecting to another page..
I tried, but I couldn't do it
here are my codes :
<form method="POST">
<input type="text" value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" />
<input type="button" value="Click Me" id="2" />
<input type="button" value="Click Me" id="3" />
</form>
jquery
$(function () {
$('#1').click(function(e) {
var text = $('#text1');
text.val(text.val() + '1');
$('#1').attr("disabled", true);
});
$('#2').click(function(e) {
var text = $('#text1');
text.val(text.val() + '2');
$('#2').attr("disabled", true);
});
$('#3').click(function(e) {
var text = $('#text1');
text.val(text.val() + '3');
$('#3').attr("disabled", true);
});
});
$('#text1').trigger('change') {
alert('Changed');
});
you can do something like this: foreach click on an answer button disabele the current button update the input value..and once the user clicks all answers button check if the combination is correct, if it is the case redirect your page.
$(function () {
var correct_order="321";
var clicks=0;
var max_clicks=$('.answer').length;
$('.answer').click(function(e) {
clicks++;
$('#text1').val($('#text1').val()+$(this).data('info'));
$(this).attr("disabled", true);
if(clicks==max_clicks){
if( $('#text1').val()==correct_order) {
$('#answer_info').html("<p>Correct answer</p>");
window.location.href = "https://yourpage";
}
else {
$('#answer_info').html("<p>Wrong answer</p>");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form method="POST">
<input type="text" value="" id="text1" name="text1" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="1" class="answer" data-info="1"/>
<input type="button" value="Click Me" id="2" class="answer" data-info="2"/>
<input type="button" value="Click Me" id="3" class="answer" data-info="3"/>
</form>
<div id="answer_info">
</div>
It works if you delete the last piece of code
$('#text1').trigger('change') {
alert('Changed');
});
I think the best way is to use a String variable instead of a text input, and check its value after each button is clicked, e.g.
var string = "";
$('#1').click(function(e) {
var = var + "1";
$('#1').attr("disabled", true);
checkCode();
});
$('#2').click(function(e) {
var = var + "2";
$('#2').attr("disabled", true);
checkCode();
});
$('#3').click(function(e) {
var = var + "3";
$('#3').attr("disabled", true);
checkCode();
});
I'm not a 100% sure this works correctly or if it causes an error on:
$(text1).val($(text1)+$(this).id); // might cause an error
code:
$(document).on('click','#1',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('click','#2',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('click','#3',function()){
$(text1).val($(text1)+$(this).id);
}
$(document).on('change','#text1'){
alert('Changed to: '+$(this).val());
});
Can you try this, and see if this works?
So basically, I have been trying to writing some jQuery that will add and duplicate a row of inputs on click, everything is working perfectly except for this.
Illustration of problem:
When you hit the remove button it leaves the 'Add Field' button beneath, I would like it to move back up into the row as shown above.
Html:
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
jQuery:
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.add').click(function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
JSFiddle Example
I have a feeling the answer for this is going to be somewhat simple, thanks in advance!
I simplified a bit, here's a suggestion, but I think the structure especially could be simplified even more.
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane"><button id="add">Add Field</button>
<div class='input_line'>
<input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br></div>
</div>
</form>
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
var blank_line = $('.input_line').clone();
$('#add').click(function () {
$('form').append(blank_line.clone())
$('.input_line').last().before($(this));
});
$('form').on('click', '.remove', function () {
$(this).parent().remove();
$('.input_line').last().before($('#add'));
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('form').append($(this).parent().clone());
$('.input_line').last().before($('#add'));
input = input + 1;
});
});
added some css:
#add
{
float: left;
}
See jsfiddle:http://jsfiddle.net/tor9wvev/
EDIT:
to duplicate beneath correct line, modify
$('form').append($(this).parent().clone());
For:
$(this).parent().after($(this).parent().clone());
check this code i edit your code to solve the problem
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.model').on('click', '.add', function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).prev().prev().prev().prev().prev().prev().prev().before('<button class="add">Add Field</button>')
$(this).prev().remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
</script>
<div class="model">
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
</div>
Probably not the neatest possible solution, but this works to move the button without changes to the rest of the code:
$('form').on('click', '.remove', function () {
/* ... */
$(this).closest('form')
.find('input[type="text"]:last')
.prev().prev().before($('.add'));
Updated fiddle:
http://jsfiddle.net/mah0nqz0/1/
I have an MVC application that has two listboxes. It uses jQuery to move selected items from one listbox. I would like to know how I can use jQuery to select all the items in the first listbox and how to remove all the items in the second listbox?
The code and markup is:
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script>
$(function () {
$("#add").click(function () {
$("#listBoxAvail > option:selected").each(function () {
$(this).remove().appendTo("#listBoxSel");
});
});
$("#remove").click(function () {
$("#listBoxSel > option:selected").each(function () {
$(this).remove().appendTo("#listBoxAvail");
});
});
});
</script>
</head>
<body>
<div>
#using (Html.BeginForm())
{
#Html.ListBoxFor(m => m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} )
<button type="button" id="add">MoveRight</button>
<button type="button" id="remove">"MoveLeft"></button>
<button type="button" id="remove-all">RemAll</button>
<button type="button" id="select-all">SelAll</button>
#Html.ListBoxFor(m => m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
}
</div>
</body>
To remove all element just make all option selected for listBoxSel select and trigger remove button's click action.
The same for select all:
$("#add").click(function () {
$("#listBoxAvail > option:selected").each(function () {
$(this).remove().appendTo("#listBoxSel");
});
});
$("#remove").click(function () {
$("#listBoxSel > option:selected").each(function () {
$(this).remove().appendTo("#listBoxAvail");
});
});
$("#remove-all").on("click", function (event){
$('#listBoxSel option').prop('selected', true);
$("#remove").trigger("click");
})
$("#select-all").on("click", function (event){
$('#listBoxAvail option').prop('selected', true);
$("#add").trigger("click");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select option multiple="true" id="listBoxAvail">
<option>1</option>
<option>2</option>
</select>
<input type="button" id="add" value="add">
<input type="button" id="select-all" value="select all">
<input type="button" id="remove" value="remove">
<input type="button" id="remove-all" value="remove all">
<select option multiple="true" id="listBoxSel">
</select>
UPDATE:
As Stephen Muecke suggested in comment thread below, more proper solution to select-all
$('#move').click(function(){
$('#first option').appendTo($('#second'));
});
see fiddle
I work with Bootstrap and i want to add several buttons with the loading state-"effect". But the problem is that the loading state only work with one button. Can anyone explain me why and maybe show me an working example?
HTML:
<td>
<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="btn btn-success" onclick="l1_on();" value= "einschalten" />
<input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="btn btn-danger" onclick="l1_off();" value= "ausschalten" />
</td>
JS:
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
IDs are supposed to only return one element.
Try with class names, it's more correct, adding another class for example 'loadable' will do the trick:
<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="loadable btn btn-success" onclick="l1_on();" value= "einschalten" />
<input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="loadable btn btn-danger" onclick="l1_off();" value= "ausschalten" />
$('.btn.loadable')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
});
I would encourage to don't repeat ID attributes on documents.
You can do this using the btn class like:
$('.btn').click(function () {
var btn = $(this);
btn.button('loading');
setTimeout(function () {
btn.button('reset')
}, 3000);
});