I'm trying to remove input's val when clicking a button that appear when focusing on input.
This is my html:
<div class="search-area">
<form action="#" id="ingredientSearchForm">
<input type="text" placeholder="Arama" id="ingredientsSearch"/>
<span class="clearable"></span>
<span></span>
<input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>
</form>
</div>
And this is javascript function:
var searchinput = $(".search-area").find("input");
searchinput.focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'));
$(this).attr('placeholder','');
$(this).siblings(".clearable").show();
});
$(".search-area").find(".clearable").on("click", function() {
$(this).val('');
});
searchinput.blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
$(this).siblings(".clearable").hide();
});
.clearable is a span with background. Normally it is display:none.
I think you're wanting to clear searchinput on clicking .clearable?
If so, you should instead use:
$(".search-area").find(".clearable").on("click", function() {
searchinput.val('');
});
if you want to remove value of span then:
$(".search-area").find(".clearable").on("click", function() {
$(this).text('');
});
if you are trying to remove textbox value then:
$(".search-area").on("click",".clearable", function() {
$(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
});
Related
For example when somebody inputs text and presses submit I want the text to be displayed in an h1 tag.
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
$(document).ready(function() {
$('btn1').click(function() {
$('#test').text($("#message").val());
});
});
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
//--> if you want to remove the value of the input after parsing the code, simply check if
//--> not `null` or not `undefined` by placing the selector.val() in your if conditional...
if($("#message").val()){
$("#message").val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
You did not add the # selector in JQuery for ID
$(document).ready(function() {
$('#btn1').click(function() {//<-- Make sure to add the ID selector # in Jquery
$('#test').text($("#message").val());
});
});
$(document).ready(function () {
$('#btn1').click(function (e) {
e.preventDefault();
$('#test').html($("#message").val());
});
});
This would work fine, but like #Teemu says this removes the form functionality. If you want to add a check mechanism you can use something like this:
$(document).ready(function () {
$("#message").keyup(function() {
$("#test").html($("#message").val());
});
});
I trying to use form validation when a user leaves the text form.
this code is actually run as I wanted but, the problem is I cannot validate specific form I input. when I leave form name, the form number also showing an error before I have a chance to input on it.
How can I split the error message on every input into the global function when the user leaves the form text?
$(document).ready(function(){
$('input[type=text]').on('blur', function(){
$(this).each(function(){
nama ($('#nama').val());
no($('#nomor').val());
});
});
function nama(myname){
if(!myname){
$('<span>name cannot be empty</span>').insertAfter('#nama');
}
}
function no(mynomor){
if(!mynomor){
$('<span>number cannot be empty</span>').insertAfter('#nomor');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>name</p>
<input type="text" id='nama'>
<br>
<p>number</p>
<input type="text" id='nomor'>
You can simplify your code to achieve that hide show by using the error message span in the HTML itself and then selecting the span element based on the input element id. Something like this:
$(document).ready(function() {
$('input[type=text]').on('blur', function(e) {
var id = this.id;
if (e.target.value) {
$('#' + id + 'span').hide();
} else {
$('#' + id + 'span').show();
}
});
});
.error-span {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>name</p>
<input type="text" id='nama'>
<span id='namaspan' class='error-span'>name cannot be empty</span>
<br>
<p>number</p>
<input type="text" id='nomor'>
<span id='nomorspan' class='error-span'>number cannot be empty</span>
I would suggest to let the error message in the HTML, but not being displayed, then when the blur events occur, you check to see if the field is empty, if it is, then get the element with the error message and show it.
I created a function that will be called by every input[type=text] when blur occurs, that function will check/validate the field
$(document).ready(function(){
$('input[type=text]').on('blur', function(){
validateField(this)
});
function validateField(field){
let value = field.value;
if (value.trim().length < 1 || value === null){
$(field).siblings(".invalid-msg").removeClass("not-error").addClass("error-show")
}else{
$(field).siblings(".invalid-msg").removeClass("error-show").addClass("not-error")
}
}
});
.error-show{
display: inline-block;
color: red;
}
.not-error{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>name</p>
<input type="text" id='nama'> <span class="not-error invalid-msg">Name can't be empty</span>
</div>
<br>
<div>
<p>number</p>
<input type="text" id='nomor'> <span class="not-error invalid-msg">Number can't be empty</span>
</div>
I have a form with inputs. The first input needs to be filled out before the second input.
If the user clicks on input 2 first they get a message saying to fill the other input first. Now I want to make it so that after the message pops up, if the user then fills out input one the message disappears.
My codepen.
I tried adding an onchange function but that doesn't seem to work.
$('body').on('focus', '.clickable', function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$('body').on('change', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br> Input-2:
<br>
<input class="clickable" type="text" name="second" id="two">
<p class="warning"></p>
</div>
</form>
on change called when you leave the input, your code works when leaving the input, also you can change the "on change" by keyup to see the changes whitout leaving the input
codepen : https://codepen.io/anon/pen/QOzKwQ
You could use keyup as your event instead of change. Change needs to wait for you to click away from the input (blur).
$( 'body').on('focus','.clickable',function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$( 'body').on('keyup','.look',function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
Use .on("change keyup paste"...)
to detect immediate changes to the text-field
$( 'body').on('focus','.clickable',function() {
$('.look').on("change keyup paste", function(){
$(this).siblings('p').text('')
});
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$( 'body').on('change','.look',function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
I don't mean to change your approach but you could try disabling the field so they can't click it and then enable it once input 1 has been filled?
HTML:
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br>
Input-2:<br>
<input class="clickable" type="text" name="second" id="two" >
<p class="warning"></p>
</div>
</form>
The JS:
document.getElementById("two").disabled = true;
var dis1 = document.getElementById("one");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("two").disabled = false;
}
}
It will be more efficient if you track the user input using input event like :
$('body').on('input', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
Snippet:
$('body').on('focus', '.clickable', function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please fill the first input.')
}
});
$('body').on('input', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
.warning {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br> Input-2:
<br>
<input class="clickable" type="text" name="second" id="two">
<p class="warning"></p>
</div>
</form>
I have a textbox, a checkbox and a span tag. When I click on the checkbox, it should show its state in the span tag. When textbox is updated, it reinserts the checkbox block. When you click on the checkbox now, it fails to update the state.
I am using the on event handler for checkbox click event, so I expect it to work.
Any idea why this is not working as expected?
$('div[role] input[type=checkbox]').on('click', chg);
$('div[role] input[type=text]').on('input', sourceChanged);
function chg() {
var istiki = $(this).is(":checked");
$('#upd').html(istiki);
}
function sourceChanged() {
$('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>
As you're dynamically creating a new checkbox when the value changes, you need to delegate the event to your checkbox by assigning it to a non-dynamic ancestor:
$('div[role]').on('change', 'input[type=checkbox]', chg);
Note how I've used change instead of click as this is more appropriate for checkboxes.
In the below snippet I've also changed $(this).is(":checked") to just this.checked.
$('div[role]').on('change', 'input[type=checkbox]', chg);
$('div[role] input[type=text]').on('input', sourceChanged);
function chg() {
var istiki = this.checked;
$('#upd').html(istiki);
}
function sourceChanged() {
$('span', $(this).closest('.input-group')).html('<input type="checkbox">');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="Tiki" class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon"><input type="checkbox" /></span>
</div>
<span id="upd"></span>
Note also that if you want it to say false you should convert your istiki variable to a string:
$('#upd').html('' + isticki);
I'm trying to use jQuery.Validate on a multi-part form that requires showing and hiding some content and disabling the inputs that are not in view. Basically, if the user clicks on the button to toggle the additional input, it then shows so that they can enter data. But until it shows I need to keep it disabled so that jquery.validate will ignore it. Thus far I found a simple script that will toggle the disabled attribute and I can show/hide the input as needed but I need them to work together. Is there a simple way to have the input show/hide while toggling the attribute as well?
Here is a fiddle that shows what I have right now and it works but I have to click the #toggleDisabled button twice the first time:
JS Fiddle
Here is the function logic I am using:
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled').show();
else $this.attr('disabled', 'disabled').hide();
});
};
})(jQuery);
$(function() {
$('#toggleButton').click(function() {
$('#toggleInput').toggleDisabled();
});
});
And here is the simple HTML:
<form id="myform">
<input type="text" name="field1" /> <br/>
<br /> <input type="text" id="toggleInput" name="toggleInputName" style="display:none" />
<input type="button" id="toggleButton" value="Toggle Disabled" />
<input type="submit" />
</form>
Use .prop() instead of .attr()
$.fn.toggleDisabled = function () {
return this.each(function () {
var $this = $(this);
if ($this.prop('disabled')) {
$this.prop('disabled', false).show();
} else {
$this.prop('disabled', true).hide();
}
});
};
DEMO, You can try shorter form here
Also go through .prop() vs .attr()