Hello I have the following problem. I the site http://www.telefonkoll.se when I enter a number in the search and press the button then the text clears automatically and the result page return me all the results. If I don't use the jquery code it works correctly.
My jQuery code is this:
$("document").ready(function() {
$("#mod_search_searchword").attr("value","Sök telefonnummer här");
});
$("#mod_search_searchword").live('focus', function (event) {
$("#mod_search_searchword").focus(function() {
$(this).val("");
});
});
$("#mod_search_searchword").live('blur', function (event) {
$("#mod_search_searchword").blur(function() {
if ($(this).val() == ""){
$(this).val("Sök telefonnummer här"); }
});
});
What I want to do with the above code is to clear the current text when the user click there. If it write something to still there, if not to return the initial text. It looks to work correctly but when I try to submit the data something wrong obviously happen. I don't know if it's the code or something I don't know.
Avoid reinventing the wheel. Use one of the many jQuery watermark plugins available.
Related
I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).
In my form/textarea I use an emoji picker (https://github.com/mervick/emojionearea).
Idea is once user write some text/put some emoji and send this (“Submit”) the form will reset/clear.
My ongoing code: https://jsfiddle.net/byrvfwah/
Emoji picker works well, but I can’t clear the form after submit.
At the same time, without function which initiates an emoji-picker, the submit button clear the form: https://jsfiddle.net/9bps7f6v/3/
There are a lot of method to reset form and I already tried a lot of them:
$("#mytextarea").val('');
$('#mytextarea').trigger("reset");
$(‘#mytextarea').text('');
$("#mytextarea").reset();
$("#myform")[0].reset();
The explanations from the author of emoji-picker script not very useful:
https://github.com/mervick/emojionearea/issues/9
https://github.com/mervick/emojionearea/issues/54
https://github.com/mervick/emojionearea/issues/373
Any ideas how I can clear my form on submit?
You need to target emojionarea-editor class div and replace with empty '' string.
$(document).ready(function() {
$("#mytextarea").emojioneArea({
pickerPosition: "bottom"
});
});
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});
It is not being cleaned because it is not a data input element rather it is a div. Inspecting the item you can see:
And has a class, so you can just clear the html:
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});
$("#mytextarea").data("emojioneArea").setText('');
In a form, I have a State dropdown and a Zip Code text box. The client has specified they want to check to be sure the zip code matches the state, and if not, to pop up a message and prevent the form from being submitted.
After either the zip or the state is changed, I call an ajax function on the server to make sure the zip code is inside the state. If not, I pop up a tooltip over the zip code check box that says "Zip Code Not In Selected State". So that the tooltip doesn't appear unless there is a mismatch, I don't add it until/unless the zip doesn't match the state. That all works well.
Then, if the zip code changes, and it matches, I want to get rid of the tooltip. This is the part I can't get working. No matter what I try, that pesky tooltip sticks around, even after the zip matches the state.
Here's the client side method:
function CheckZip() {
var zip = $("#ZipCode").val();
var zipLength = zip.length;
var state = $("#StateCode").val();
if (zipLength === 5) {
$.getJSON("/Home/CheckZip", { zipCode: zip, stateCode: state },
function (data) {
if (data == "true") {
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
}
if (data == "false") {
$('#ZipCode').attr('data-toggle', 'tooltip');
$('#ZipCode').attr('data-placement', 'top');
$('#ZipCode').attr('title', 'Zip code not in selected state.');
$('#ZipCode').tooltip().mouseover();
DisableSubmitButton();
}
if (data == "error") {
// todo
}
});
}
else {
DisableSubmitButton();
}
}
This doesn't seem to be the right combination to make the tooltip go away.
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
I've also tried just removing all the attributes, opposite of what's done in if (data == "false"). That didn't work either.
Any ideas?
Try this once :
$("#ZipCode").off('mouseover',rf);
As I asked you in the comments if you were using bootstrap, I have an anwer for you. To hide the tooltip you must change disable to hide. Also you have to remove the line below the hide event, like this:
if (data == "true") {
$('#ZipCode').tooltip('hide');
}
Documentation for bootstrap tooltips can be found here
I hope this will help!
What I ended up doing was just creating my own div which, using CSS, hovers just over the Zip textbox. I can hide it and show it whenever I want. This works perfectly. Found a thread here on Stack Overflow that showed me how to do the css:
Relatively position an element without it taking up space in document flow
I'm currently making a search function using a onkeyup="Search();" like this:
<input type="text" id="IDsearch" onkeyup="Search()" autofocus>
The function for it is:
<script type="text/javascript">
function Search() {
var inputVal = $('#IDsearch').val();
$.post('searchTest.php', {postname: inputVal},
function (data) {
$('#IDsearch').val(data)
});
$('#divRefresh').load('searchTest.php');
}
</script>
Yes, I am using the same file to both put the value in a php $_SESSION['value']; AND to store the new div data. That's no problem, it works, it does fine.
But when I delete my last character from my search box, I need to press backspace twice in order for my div to update.
Say I had a textbox with "a" in it. I will press backspace to update the a, and nothing will happen. Once I press backspace again, my div will update and post all the original values again.
Am I missing something obvious?
It's supposed to work the same way http://www.datatables.net/ does.
I have asked a question about this program before, but not about this issue, I hope it's not a problem.
I would go throught $("#IDsearch").keyup(function(){});
Tried your code with the function and didn't work, even with $("#divRefresh").html(theInputOfYours); The other way I mention to you works perfectly, even with backspace.
$(document).ready(function() {
$("#IDsearch").keyup(function() {
var value = $(this).val();
var posting = $.post("your_php_file.php", {val: value})
posting.done(function( data ) {
$( "#divRefresh" ).html(data);
});
});
});
The posting is a very basic example I can give, I use to go with $.ajax() function
Unfortunately, the behavior of keyup/keypress/keydown can be finicky sometimes, especially across different browsers.
A possible solution to ensure changes are tracked would be a listener that would track changes via a setInterval function that runs at an interval you specify.
Example:
See below image what exactly i need
Thanks anyone help this to simple code...
I've implemented below Masked Input Plugin to apply the same functionality what you need.
Step1 : Download this plugin
http://digitalbush.com/projects/masked-input-plugin
Step2 :
Write Below code in your CSHTML or HTml Page.
<script type="text/javascript">
$(document).ready(function () {
$("#ContactNo").mask("(+9) 999-999-9999");
$("#txtContactNo2").mask("(+9) 999-999-9999");
});
</script>
Hope this works ! Cheers :)
link this script to your page and do masking format as you want
<script src="../JavaScript/jquerymaskedinput.js" type="text/javascript"></script>
enter code here
and then write this inside script
$(function () {
Masktext();
});
function Masktext() {
$('#<%=txtTelephone.ClientID %>').mask('(999)999-9999');
$('#<%=txtFaxNumber.ClientID %>').mask('(999)999-9999');
$('#<%=txtTelephoneMD.ClientID %>').mask('(999)999-9999');
$('#<%=txtTelephoneHC.ClientID %>').mask('(999)999-9999');
}
You can add an event listener to the submit button (I am assuming that it has got an ID like buttonId), and check if the number is valid (I'm assuming that your number input has an ID like numberId), like this:
var button = document.getElementById("buttonId"),
number = document.getElementById("numberId");
button.addEventListener("click", function(e) {
if (/[^0-9\-\+]/.test(number.value)) {
e.preventDefault();
alert("Please enter a valid telephone number!");
}
});