I am trying to create a form using the jquery ui datepicker.
Everything works perfectly except that since I changed the design of the input fields the placeholder attribute is not removed when a date is picked.
Here is the fiddle: https://jsfiddle.net/deqguphb/
HTML
<form>
<ol>
<li>
<input id="input1" name="input1" value="" placeholder="Input1: Working just fine"/>
<label for="input1">Input1</label>
</li>
<li>
<input id="input2" name="input2" value="" placeholder="Input2: The placeholder stays" />
<label for="input2">Input2</label>
</li>
<li>
<input id="input3" name="input2" value="" placeholder="Input3: The placeholder stays" />
<label for="input3">Input3</label>
</li>
</ol>
</form>
Javascript
/* The focus effect */
$("input:not([value]),input[value='']").addClass('empty');
/* Input event handling */
$('input').on('input keyup', function() {
$(this).toggleClass('empty', !Boolean($(this).val()));
});
I do not know what event is fired after a date is picked. I tried with onKeyup and onChange but that did not solve the problem.
I would be beyond happy for a solution on this.
I have updated your fiddle,
I have added two events to your each of the textbox for place holder.
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Input1: Working just fine'"
Fiddle is : https://jsfiddle.net/deqguphb/4/
You need to use focus and blur event for textbox.
Hope this will help you :)
Related
Cursor showing on ReadOnly Input in IE only. I try to disable the input but this jquery datepicker it is disabling everything.
I tried KeyCode===8 and return false. User complaining they are doing back space it is go to previous page.
<input name="BirthDate" class="SPE-Formcontrol section_detail-font-14 calendar hasDatepicker" id="BirthDate"
style="display: inline;" type="text" readonly="readonly" value="">
I don't see any valid answers for this.
Don't use the attribute "disabled" because the input would not be submitted when it is part of a form
$('#BirthDate').focus(function(){
this.blur();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="BirthDate" class="SPE-Formcontrol section_detail-font-14 calendar hasDatepicker" id="BirthDate"
style="display: inline;" type="text" readonly="readonly" value="">
I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>
The problem I'm having is with Safari and Chrome. It appears there is a bug that causes the mouseup event to fire twice when you click on a text or input box. I want the text in the input box to be completely selected when the box gets the focus (regardless if it's tabbed into, clicked on, or given the focus through code). If you tab to the box or give it the focus through code it works perfectly. However, if you click on the box, the text is selected until you let go of the mouse button. Then the text is immediately deselected. Here is the code I am using:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5"
onfocus="this.setSelectionRange(0,this.value.length)"
onblur="message(this.name, this.value)">
</form>
Is there any way around this for Chrome and Safari?
This should do it:
<input type="text" id="myText" value="Mickey" onclick="myFunction()">
<script>
function myFunction() {
document.getElementById("myText").select();
}
</script>
Here's a working demo using your code. Notice there needs to be 2 different functions and two different getElementByID parameters: http://codepen.io/anon/pen/pJXLro
HTML:
<h1>Slope Intercept Form</h1>
<form>
<p>Enter the beginning X and Y coordinates for your line.</p>
<label for="x1">X1: </label>
<input id="x1" type="text" name="x1" maxlength="6" size="5" onclick="myFunction()">
<label for="y1">Y1: </label>
<input id="y1" type="text" name="y1" maxlength="6" size="5" onclick="myFunction2()">
</form>
Javascript:
<script>
function myFunction() {
document.getElementById("x1").select();
}
function myFunction2() {
document.getElementById("y1").select();
}
</script>
As you may already know, it's a good idea to try to keep your HTML and JS as separated out from each other as possible (but that wasn't causing you the problem in your example).
I found a solution. I created event listeners for the input boxes:
document.getElementById("x1").addEventListener("click", function() {document.getElementById("x1").select();});
document.getElementById("y1").addEventListener("click", function() {document.getElementById("y1").select();});
Now, when the input box is clicked, it is automatically selected. When the input box is tabbed into it is also automatically selected. Now I don't have to use the onFocus event to select the input box text. The onFocus event and onClick event were conflicting with each other in Safari and Chrome but not on Firefox, IE or Opera.
I am using an input form with multiple input fields.
These input fields can be pre-populated so I want to give the user an easy option of deleting then with a 'delete' link or button beside the field which deletes the full contents of that input field.
Pressing the delete button will also give them a text confirmation that it has been deleted.
I have attached a jpeg of what I am trying to do
I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?
My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id's of course so I did not want to paste everything here just 1 as an exmpale.
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
</div>
// this would be the link to delete the contents of input field "input_15_144
Delete
</li>
Thanks for any help!
Here, I've added custom ids etc. for the fiddle. You can use it the way you like:
Older: jsFiddle - Lewdh
Edit
To meet newer requirements, some more edits were made.
jsFiddle - Lewdh/4/
HTML Code
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
<button value="delete">Delete</button><br />
</div>
</li>
<li id="field_15_145" class="gfield">
<label class="gfield_label" for="input_15_145">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
<button value="delete">Delete</button><br />
</div>
</li>
jQuery Code
$(document).ready(function() {
$("li div button").on('click', function() {
$(this).prev("input").val('');
$(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
});
});
HTML
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
delete <br/>
<span id="msg" style="color:green;"><span>
</div>
Jquery
$('a#delete').click(function(){
$('input#input_15_144').val('');
$('span#msg').html('deleted successfully');
});
check the demo
You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.
jQuery's val() does what you need. In the above example you could use a function like this.
$('#input_15_144').val('');
Try this
$(function(){
$(".ginput_container").append('delete'); // append a delete link
$('#delete_link').click(function(){
$('#input_15_144').val(''); // set the textfield empty
$(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
});
});
You may apply css for the formatting
Sorry if i misunderstood your question but to reset input type text field, you only need to set its value to empty string:
$('#id').val('');
jQuery, when i use it to create a modal window which contains form elemets,
it takes out those elements when i submit the form.
example of the form:
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</div>
</form>
exaple of JS:
<script>
$(document).ready(function(){
$("#add_photo").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
});
So what i nocited during the inspetion via firebug, is that jquery actually removes my form elements within #add_photo and puts them outside the form in DOM, so even tough in html the modal dialog is within my form, in DOM it isn't ....
An this is the reason why i'm having the issue!
Have anyone encountered simmilar problem?
Any solution?! Thank you very much!
I just had the same problem. I solved it by adding another
<div id="beforesubmit" style="display:none"></div>
at the end (but inside) of the form and then you have to add this to jQuery:
$("form").submit(function() {
$("#add_photo").prependTo("#beforesubmit");
});
This will make sure that before the form is submit your dialog div will be put back in between the form tags. Thanks to arnorhs I came to this solution.
Cheers!
I'm not sure what dialog box plugin you're using, but I would suspect that the dialog box plugin is pulling the DIV out of the form and placing it into the body of the page, so It can bring the box in front of the page, outside of the form element.
So to rephrase, in order for the dialog box plugin to make your dialog appear in front of all the content on your page, it needs to remove it from whatever element it is sitting in, no matter if it's a form or anything else.
The form needs to be inside the div. That's how it is in all the Dialog examples. Not sure how you're going to do that with the title and url inputs not being on the dialog. Couldn't you put them on it too?
This wouldn't have the problem:
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</form>
</div>
This article describes how to solve your problem:
You’ll see that the content we had mid-way through our page has been marked up with additional classes and, most importantly, placed at the bottom of the page immediately before the closing tag. Why is this important? Because it also means that any ASP.Net controls you place within this dialog will also appear at the bottom of the page, outside of the page’s tag. This means you won’t be able to get a handle to them on postback.
What’s the solution? Well, there are two options:
Move the elements back to the form, and manually submit when the button is clicked
Clone the elements when you create the dialog, then clone the values back, trigger click on the original button (or, if you only have one or two values to post back, simply assign the values to an ASP.Net hidden field control).
From http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/
Tie it to the form by doing $("mydialog").parent().appendTo($("form:first")).
Note that you have to this call after you already called $("mydialog").dialog()
As seen in the answer for this question, jQuery dialog has a field appendTo, that can be used to configure where to put your dialog (div-wise) on initialization.
This seems to be the least ninja-workaround version to tackle the problem.