i've got the following request:
create a plain text field that transforms into an text input element when clicking on an edit trigger. When leaving the input element the text will be stored in the database and the field is transformed back into a plain text field with the new content. When ESC is pressed in the input the recent value is restored. To do this i use the following code:
<div id="value"><span id="text">some text</span></div>
<div id="trigger">[EDIT]</div>
<div style="display: none;" id="storage">
<input type="text" id="input" value="some text"/>
</div>
<script type="text/javascript">
$('#trigger').click(function() {
var t = $('#text').detach();
var e = $('#input').detach();
$('#storage').append(t);
$('#value').append(e);
e.focus();
});
$('#input').blur(function() {
var t = $('#text').detach();
var e = $('#input').detach();
if (t.text() != e.val()) {
$.getJSON(...);
}
$('#storage').append(e);
$('#value').append(t);
});
$('#input').keyup(function(event) {
if (event.which == 27) {
$('#input').val($('#text').text());
$('#input')[0].blur();
}
});
</script>
Thanks to #nnnnnn this now works. But is there maybe a simpler way to implement this using some preexisting API functions?
thanks very much.
use jquery editable here is a link
for demo:
http://www.appelsiini.net/projects/jeditable/default.html
for plugin home page
http://www.appelsiini.net/projects/jeditable
I developed a plugin that do what you need:
$.convertTo
I hope it will be helpful, regards.
Related
I have an input text that has to be something in it for the form to work.
So I wish to add some functionality to the Confirm button that checks if the input field is empty, and if so, recolor the border of that input.
I'm doing the following:
$(function mainListeners () {
"use strict";
var confirm = $('#addNewConfirm');
var cancel = $('#addNewCancel');
var eventBox = $('#eventname_input');
console.log("RUNS!!");
confirm.onclick = function (e) {
if (eventBox.val() == ''){
//so if we have an empty event
//recolor borders.
console.log("CHANGES!!");
eventBox.css('border-color','#d81919');
}else {
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
<button id="addNewConfirm" >Confirm</button>
<button id="addNewCancel">Cancel</button>
</div>
<div >
<label>Event:</label>
<input id="eventname_input" type="text" />
</div>
Here I get no errors and I always see the RUNS!! message, so my script is attached. However, I never see the CHANGES!! message, so the condition eventBox.val() == '' is never true. I looked up the internet on how to check if an input text's text is empty, and this is what I found, and it clearly isn't working.
How can I sort out this recolor of border if the input has no text?
Use JQuery click() function instead of onclick like so:
$(document).ready(function() {
var confirm = $("#addNewConfirm");
var cancel = $("#addNewCancel");
var eventBox = $("#eventname_input");
console.log("RUNS!!");
confirm.click(function(e) {
if (!eventBox.val()) {
console.log("CHANGES!!");
eventBox.css("border-color", "#d81919");
} else {
eventBox.css("border-color", 'inherit');
// whatever you want
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
<button id="addNewConfirm">Confirm</button>
<button id="addNewCancel">Cancel</button>
</div>
<div>
<label>Event:</label>
<input id="eventname_input" type="text" />
</div>
Try using either the Jquery method of setting a click event (.click()) or the vanilla JS way of retrieving a DOM element(document.getElementById()).
Below is a working example of changes!! getting called.
$(function mainListeners () {
"use strict";
var confirm = document.getElementById('addNewConfirm'); //GET DOM ELEMENTS THIS WAY OR SEE BELOW FOR CLICK
var cancel = $('#addNewCancel');
var eventBox = $('#eventname_input');
console.log("RUNS!!");
confirm.onclick = function (e) {//OR CHANGE THIS TO CLICK()
if (eventBox.val() == ''){
//so if we have an empty event
//recolor borders.
console.log("CHANGES!!");
event.css('border-color','#d81919');
}else {
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
<button id="addNewConfirm" >Confirm</button>
<button id="addNewCancel">Cancel</button>
</div>
<div >
<label>Event:</label>
<input id="eventname_input" type="text" />
</div>
The fact is that onclick is vanilla Javascript and you are trying to use it on the confirm jQuery object.
In order to fix it, you can use confirm[0].click = function(e) syntax or confirm.click(function (e). I suggest you to use jQuery syntax: if you load this library you are encouraged to use it in order to strengthen readability.
I have a very simple piece of Javascript that works perfectly onLoad, but I need it to work onChange.
My script;
<form action="" method="post" name="product_search">
<p><strong>Existing Part Number:</strong>
<input name="v_prodref" type="text" id="v_prodref" size="25" maxlength="25" onChange="searchValue()">
<input type="text" name="prodref" id="prodref">
<input type="submit" name="search_Submit" id="search_Submit" value="Submit">
</p>
<div>
<%=(rs_ProductCheck.Fields.Item("prodref").Value)%>
// <%=(rs_ProductCheck.Fields.Item("proddesc").Value)%></div>
<script>
function searchValue() {
var add = "NW";
var c_ProdRef = document.getElementById('v_prodref');
if(c_ProdRef.search(/GST/i) == -1) {
n_ProdRef = c_ProdRef.concat(add) }
else {
n_ProdRef = c_ProdRef.replace(/GST/i,"NWGST") }
document.getElementById("prodref").value = n_ProdRef;
}
</script>
</form>
So, I enter a part number in the first text box, and I want my javascript to run and enter the new value in the second text box, but it doesn't seem to work.
What am I missing?
search does not exist on an HTMLInputElement. You need to use c_ProdRef.value.search.
(Actually, since you're using it in many places as a string, and never as an input, you probably intended to define c_ProdRef as var document.getElementById('v_prodref').value)
You would've seen this error on load as well.
you want onkeyup if it works perfectly onLoad, and you want to start typing in something in textbox 1 and the javascript to run, you dont want onchange
onchange triggers after blur of focused element
onkeyup triggers after you release a keyboard input
Thanks to everyone for their help. After a little tweaking I have managed to get my code working.
function myFunction() {
var add = "NW";
var c_ProdRef = document.getElementById('v_prodref').value;
if (c_ProdRef.search(/GST/i) == -1) {
n_ProdRef = c_ProdRef.concat(add)
} else {
n_ProdRef = c_ProdRef.replace(/GST/i, "NWGST")
}
document.getElementById("prodref").value = n_ProdRef;
}
Along with #indubitablee suggestion of onKeyup and specifying the .value of my first text field it all works.
I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here
<form>
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button type="submit" id="WFFsearch">Search</button>
</form>
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').text();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics. The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/
you wanna use the .val() instead of .text() as text gets the value between 2 tags <div>here is some text</div> and val gets the value <input value="some value"/>
EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit", OR (recommended), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.
Also, you're trying to .text on an input. Input's have value. In jQuery you can get or set that value by calling .val() instead.
The code:
$('#frmGetStats').on('submit', function (e) {
e.preventDefault();
var searchInput = $('#search').val(),
url = "http://espn.go.com/" + searchInput + "/statistics",
win = window.open(url);
alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmGetStats">
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button id="WFFsearch" type="submit">Search</button>
</form>
To get the value of an input field, use .val(). .text() is for the text in a DOM element.
Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
return false;
});
DEMO
I have a webpage that I'm using to update a value remotely. To be more specific, on one side, I have a screen connected to the internet with a little field in it that reads (Now Serving: ##) and on the other side, I have a tablet connected to the internet with a webpage that is used to push the value to the screen and update it. Everything looks good except the following:
Getting the input field to clear after it submits the value so I can type another number in it without the need to manually clear it
Below is my HTML Code
<div id="container">
<div id="logoDiv"></div>
<h3>Type the number in the box</h3>
<div class="theWork">
<div id="formDiv">
<FORM NAME="test" class="theForm">
Now Serving: <input type="text" name="msg1" class="testingHuss" id="theOrderBox" autofocus ><br>
</FORM>
</div>
<div id="onScreenDiv"><span id="onscreen"></span></div>
</div>
</div>
and here is my JavaScript code
$(document).ready(function() {
$('.testingHuss').keydown(function(event) {
if (event.keyCode == 13) {
sendCommand("galaxy.signage.me", "wmt_huss", "husshuss", "3", "nowServing", document.test.msg1.value);
document.getElementById('onscreen').innerHTML = document.test.msg1.value;
return false;
}
});
});
Since you are using Jquery you can do it like this:
$(document).ready(function() {
$('.testingHuss').keydown(function(event) {
if (event.keyCode == 13) {
//Do Necesary stuff when enter was pressed.
$(event.currentTarget).val('');
}
});
});
Fiddle: https://jsfiddle.net/fgqs4hzb/
document.test.msg1.value =""
Before return false
Since you're using jquery replace this line:
updateTextInput(session, "testingHuss", value = "")
with:
$('.testingHuss').val('');
This is my first message here so I hope that newbies also get help :)
My problem is following:
let's start with code first....
javascript:
$(document).ready(function(){
if ($("input#datum2").val() == "")
{
$().click(function(){
$("input#datum2").val($("input#datum1").val());
});
}
});
html:
<form >
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
What I want this script to do is that first checks if input field datum2 is empty. If yes, than copy value from input#datum1. This action is suppose to happen each time user clicks (anywhere on page?)...
When user types something in datum1 and clicks somewhere than this value is copied to datum2. The problem is when user edits datum1 or datum2, than this value is again copied to datum2. Obviously this condition
if ($("input#datum2").val() == "")
works only once.
I'm new to javascript and jquery so I would appreciate for any help.
Thanks in advance!
Cheers,
Ile
Sounds like you'll need to bind to a different event. Blur occurs when an input loses focus, which sounds like what you're after.
$(function() {
var $datum2 = $('#datum2');
$('#datum1').blur(function() {
if(!$datum2.val())
$datum2.val($(this).val());
});
});
Couple of things:
1) $(function() { ... is a nice shortcut to $(document).ready
2) In JavaScript, an empty string evals to false, so its a nice shortcut.
I see the way round are the order of the click event and "if ($("#datum2",..."
HTML:
<form id="myform">
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
Javascript:
$(document).ready(function(){
$().click(function(){
if ($("#datum2", $("#myform")).val() == "") {
$("#datum2", $("#myform").val($("#datum1", $("#myform")).val());
}
});
});
$(document).ready(function(){
var $datum2 = $('#datum2');
$('#datum2').hover(function() {
if(!$datum2.val())
$datum2.val($('#datum1').val());
});
});