I have one question regarding to JQuery UI Timepicker. I have multiple text fields.
<input type="text" style="width: 31px;" id="timepicker.[1]" name="mon1" readonly="true"/>
<input type="text" style="width: 31px;" id="timepicker.[2]" name="mon2" readonly="true"/>
<input type="text" style="width: 31px;" id="timepicker.[3]" name="mon3" readonly="true"/>
I have called the jquery function using this.
$('#timepicker\\.\\[1\\]').timepicker();
$('#timepicker\\.\\[2\\]').timepicker();
$('#timepicker\\.\\[3\\]').timepicker();
They are working. when i clicked first text field, the timepicker shows up. the same behavior goes to the second timepicker. But when i clicked third textfield, it won't show up. I have to click outside the textfield first and then click again on the third text field,after that the timepicker shows up. The same goes to the rest of text field (I have many textfields). What is the problem and may i know how to solve it?
Thanks guys,appreciate it....
Try like this
$("input[id^=timepicker]").timepicker();
Related
I am new to WordPress and elementor. I have created a form and I have to perform some functions on button click.
The functions are like redirecting to different or validating some information.
I inserted the HTML code element in the section and created the form. But I am not clear where to write the function and how to call it.
Below is the HTML code
<input type="text" id="IMEI" name="IMEI" placeholder="Enter your IMEI here" class="textbox">
<input type="button" class="buttonchk" value="Check Phone">
<br>
<br>
Can someone please help
Kind of an odd question and kinda hard to explain so will try my best.
I am wondering if it is possible to take the following:
<label for="page_name">page name</label><br>
<input type="text" name="page_name" maxlength="50" size="30">
and Display none; in the CSS so that this field isn't visible to anyone filling our the form, so that its left blank. Well not blank I would like to have a preset value so that when the form is filled out, I get all their entered details and I get my preset field "page_name" that has text I have entered so that I can put for example "page 5" so that I can see which page the form has been filled out on.
Is it possible to do it in html? I have done in the past by making each page have its own form and this time around I feel like there must be an easier solution?
Thanks in advance!
Simple use type="hidden" value="your value"
<input type="text" type="hidden" value="your value" name="page_name" maxlength="50" size="30">
and submit this input field with other all fields
This is very possible, I used it to track IP adresses once.
You can simply set the value by hand:
<input type="text" name="page_name" value="Default input value" style="display:none;">
Make sure you set it to display:none; (this can be done from your stylesheet too).
Set the value="default value" wich is what otherwise would be entered by the user.
Example:
function showvalue(){
alert($('input').attr('value'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="page_name" value="Default input value" style="display:none;">
<button onclick="showvalue()">Show value </button>
I want to display the input from a input-box text, right beside the input-box if it got data.
I want to use it in our checkout for the customer name.
That when the customer has entered their name, it echo beside it "Hi (customer-name)"
The input-box is on the same page. So the echo needs to be displayed right beside the input-box.
The data needs to be displayed when the customer is not focussing anymore on this input-box. So when it clicks on an other input-box or beside it, it needs to be displayed.
How can I fix that?
If you are OK with pure inline javascript, you can attain this using onblur event:
<input type="text" value="" onblur="if(this.value !=''){document.getElementById('hi').innerHTML='Hi, '+this.value;}else{document.getElementById('hi').innerHTML='';}" />
<span id='hi'></span>
Empty span, or whatever other html place holder will fill with "Hi, (username)" if the input loses focus and is not empty.
You are looking for Javascript, rather than php.
To make it very simple:
function sayHi(){
var name = document.getElementById("box1").value;
document.getElementById("username").innerHTML = name;
}
<input type="text" id="box1" onblur="sayHi();"><span id="username"></span>
I am converting an old double dropdown box search form. With the old method, the form was submitted on each user selection using this:
<form name="navTwo">
<select name="item" id="item" onChange="document.location.href=document.navTwo.game.options[document.navTwo.game.selectedIndex].value">
The problem with the old method is that users were forced to look thru the second dropdown that contained an ever growing number of options.
I opted to make a new search using one auto submit drop down and a new jquery type ahead search field (thanks to Jamie McConnell, jamie#blue44.com). Everything works great with the type ahead. However, I cannot figure out how to submit the new form once the user picks the type ahead item. Ideally I would like to force the user to click submit once they've selected that second item.
I've tried carrying the id of the second search item and placing it in a hidden input but I cannot get the variable set to the id. Here is what I've tried so far, unsuccessfully;
//The page name is dash3.php
//If list = 1 it will add the record
//The jquery stuff works fine, it adds the value to the input field, I need it to grab the id of that record, not just the title. The $vid is empty, not sure how to set it.
//The code below is missing the submit button, I tried adding a link so that I could see the variables.
<form name="nav">
<div>
Start typing the name of the item, select the correct title when it appears:<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<input type="hidden" value="?list=1&ptfm_ctrl=1&vid=<?=$vid?>" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<strong>+</strong>
</form>
So, to make my question more clear;
How can I grab the id of the type ahead record that is being placed in the input field by a jquery autocomplete script and make a self referencing form carrying this id to the same page?
Thanks much!
Maybe this example in the autocomplete documentation will help: http://jqueryui.com/demos/autocomplete/#custom-data
The idea is that you populate your autocomplete boxes with enough data for the user to select the right choice and then provide the id and hook into the success event.
select: function( event, ui ) { ... }
This might help get you started: http://jsfiddle.net/shanabus/HGF59/
Instead of the alert that fires upon the second dropdown selection, do something like update your form action:
$("#myForm").attr("action", $("#myForm").attr("action") + "/" + ui.item.id);
and then submit if needed. Hope this helps!
I am playing with the Ajax Live Search functionality from the W3Schools website. It is working fine except I would like the results div, #livesearch, to hide again when the user clicks away from it. I have found an example piece of code which does this but I cannot comdine the two successfully. If I add the code the search results can be hidden when the user clicks away but the user has to click first to see them, which obviously wont work.
http://www.w3schools.com/php/php_ajax_livesearch.asp
http://bytes.com/topic/javascript/answers/676788-hide-div-tag-if-outside-div-clicked
Can anyone point me in the right direction?
Thanks
Chris
Checkout the javascript 'onblur' event.
You could create a new function which cleared the div:
blurFunction() {
document.getElementById("livesearch").innerHTML = ''
}
The onblur event:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="blurFunction()" />
EDIT: Actually I just noticed the showResult function already caters for clearing the div, so just insert:
<input type="text" size="30" onkeyup="showResult(this.value)" onblur="showResult('')" />
If I'm reading this right, you want the dropdown to disappear when the input loses focus and reappear when the mouse is moved over it, not just clicked?
I was able to achieve this by using an onblur event to hide the box (your example that you found works equally well, I believe). onblur="hide(this)" to hide the dropdown div. Hide js function is the same: function hide(id)
{
document.getElementById("livesearch").style.display = "none";
}
To make it reappear on mouseover, I added an onmousemove event to the input: <input type="text" size="30" onkeyup="showResult(this.value)" onblur="hide(this)" onmousemove="showResult(this.value)" />
.
Most importantly I added this line document.getElementById("livesearch").style.display = "block"; in the xmlhttp.onreadystatechange=function() to make the div reappear.