Hi I'm new to jQuery and Ajax
And I tried to make code that searching only last word
<form action="/index/output" method="POST">
<input type="text" name="text_box" id="target">
</form>
<script>
$('#t').keyup(function(){
$.ajax({
url : '/index/output',
data : {
text_box : $('input:text').val()
},
success : function(html) {
$('#result').html(html);
}
})
})
</script>
<div id="result"> </div>
Now when users type something, it show the results at <div id="result">
but I want to submit the data of last word
For example
When users type this sentence in textbox
He is a handsome guy
I want to make transmit only "guy"(typed last) through keyup() event
Is it possible to make it using jQuery..? I can't get the hang of it...
var str = 'He is a handsome guy';
var word = str.split(" ").pop();
alert(word);
Fiddle
You can get the value of the input then split that value getting the last word like above
FIDDLE WITH INPUT
Its ok to do the keyup event but i suggest you do it on an event click or event change
Related
Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
<script>
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', () => {
document.getElementById("coolButton").click();
});
</script>
</body>
</html>
When I click the "Click me" button, whatever is currently in the textbox is properly displayed below it.
I want this same behavior to happen automatically when the user pastes into the box. So I add an event listener to the text box listening for a paste.
However, the code inside this paste listener works on what was in the text box before the paste. i.e. if there is "a" in the text box, and the user pastes a "b" into the box, only "a" (and not "ab") will be displayed below.
How do I make the event listener's code take effect after the paste is complete?
I've tried things like forcing it to wait a couple seconds, or displaying in a separate element, but the paste function code always reads what was in the box before the paste instead of after.
How do I make the event listener's code take effect after the paste is complete?
You can use .getData():
The DataTransfer.getData() method retrieves drag data (as a DOMString)
for the specified type. If the drag operation does not include data,
this method returns an empty string.
In order to get the clipboard data you need to use the event parameter to your paste event handler as per documentation.
The snippet:
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
document.getElementById('myText').addEventListener('paste', function(e) {
// get the data from the clipboard.....
var txt = e.clipboardData.getData('text');
// use the data
document.getElementById("enteredBox").innerHTML = txt;
});
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
Or, if you need to get the data after the paste action compteted, you can delay the click event with a .setTimeout(). In this case your code:
document.getElementById("coolButton").click();
becomes:
setTimeout(() => document.getElementById("coolButton").click(), 10)
The snippet:
//display whatever is in the textbox in a text span below it
function coolFunction() {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
}
//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', (e) =>
setTimeout(() => document.getElementById("coolButton").click(), 10)
);
<input type="text" id="myText" value="some text">
<button id='coolButton' onclick="coolFunction()">Click me</button>
<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>
A last solution can avoid at all the button and it can be based on input event.
The snippet:
document.getElementById('myText').addEventListener('input', function(e) {
word = document.getElementById("myText").value;
document.getElementById("enteredBox").innerHTML = word;
});
<input type="text" id="myText" value="some text">
<br><br>
<span>Entered:</span>
<span id="enteredBox"/>
So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>
im new to js and have issues with following. I want the content of a html text input field to be displayed within a textarea via button click. I tried this:
.
.
function addText()
{
var contentOfTxtField = document.getElementById("txtToGet").value;
document.getElementById("idOfTheTextarea").innerHTML = contentOfTxtField;
}
.
.
Then I call my function in the onlick event of a button:
<button onclick="addText()">Add</button><br>
My problem is that the text shortly appears in the textarea but immediately disappears. Same for the entered text of the input text field. Any hints for me? Thk u
Try to replace :
document.getElementById("idOfTheTextarea").innerHTML = contentOfTxtField;
By :
document.getElementById("idOfTheTextarea").textContent= contentOfTxtField;
NOTE : make sure that you're adding type='button' to the button since button tag act like submit by default.
Hope this helps.
Snippet
function addText()
{
var contentOfTxtField = document.getElementById("txtToGet").value;
document.getElementById("idOfTheTextarea").textContent = contentOfTxtField;
}
<input type="text" value='example value' id="txtToGet"/>
<br>
<button type="button" onclick="addText()">Add</button>
<br>
<textarea id='idOfTheTextarea'></textarea>
Sounds like the form is submitting, cancel the click event
<button onclick="addText(); return false;">Add</button><br>
I have a HTML-JavaScript script in which the user can insert data to a new array [] by using a form's text field and an insert button.
By pressing insert button, the user inserts the data typed into the array.
I have a function which prints all the values of the array into <p id="demo"></p> and runs itself every 100 milliseconds in order to be updated with the arrays values.
I also have a reset button to delete every array's value when clicked.
What I want to do is add a delete button next to each array's value in order to be easier for the user to delete the wrong value he inserted.
I am using this code to insert values and print them:
HTML:
<div align="center">
<form id="form1">
<input type="text" name="fname" id="fname" placeholder="Type here!">
</form>
<br>
<input type="button" id="Button Insert" onclick="myFunction()" value="Insert">
<input type="button" onclick="myFunction3()" value="Reset">
</div>
<p id="demo" align="center"></p>
JavaScript/JQuery:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
all_values.push(temp_val);
document.getElementById("form1").reset();
}
setInterval(function () {
$("#demo").html(all_values.join("<br>"));
}, 100);
function myFunction3() {
all_values.length = 0;
}
To be more specific I want something like these things: iOS example JSFiddle Example 1 JSFiddle Example 2.
Could you please help me? Thanks in advance.
I'd do it the other way around.
Remove setInterval as it's really bad way to do such things.
Remove white spaces from the id attribute (id="Button-Insert", not id="Button Insert")
Don't use onclick attributes. Instead, register click event handlers with jQuery
// caching is a good practice when you reffer to the same elements multiple times:
var all_values =[], demo = $("#demo"), form = $("#form1")[0], fname = $("#fname");
$('#Button-insert').click(function(){
var temp_val = fname.val();
all_values.push(temp_val);
// create delete button along with the value
demo.append('<p>'+temp_val+' <button value="'+temp_val+'" type="button" class="del-btn">Delete</button></p>');
form.reset();
});
$('#Button-reset').click(function(){
all_values = [];
demo.html('');
});
// event delegation for dynamic elements:
demo.on('click', '.del-btn', function(){
all_values.splice(all_values.indexOf($(this).val()), 1);
$(this).parent().remove();
});
JSFiddle
Simply create the delete buttons at the same time you create the table.
function loadvalues(){
var i, button;
$('#demo').empty();
for(i in all_values){
$('#demo').append(all_values[i]);
button = $('<button>',{'text':'Delete'}).click(function(){
all_values.splice(this,1);
loadvalues();
}.bind(i)).appendTo('#demo');
$('#demo').append('<br>');
}
}
Also you don't need to poll, you could simply add each one on demand with a function like this:
function addVal(){
var val = $("#fname").val(), i = all_values.length;
all_values.push(val);
$('#demo').append(val);
button = $('<button>',{'text':'Delete'}).click(function(){
all_values.splice(this,1);
loadvalues();
}.bind(i)).appendTo('#demo');
$('#demo').append('<br>');
}
I had some typos, the code works,
Check here:
http://codepen.io/anon/pen/QbvgpW
I've seen some sites that using jquery to review instantly any text wrote inside an input text field.
Here is example :-
where i write a it instantly shown at => some_site.com/a
when i write another letter b it instantly shown at => some_site.com/ab
and so on anything i wrote instantly shown
But that is not all ! if i removed any text so the input field is empty
it shows => some_site.com/???
This could be good for reviewing input text before submit the whole form
How to do such nice effect ?
if html form code is
<input type="text" name="txt" id="txt">
~ thanks for help
Here is a working example
http://jsfiddle.net/ydzr8/
basically you want the keyup event to get the value from the text box
<input type='text' class='input'/> <div class="display">http://www.something/???</div>
Then
$('.input').keyup(function(){
if($(this).val() === '')
{
$('.display').html("http://www.something/???");
}else{
$('.display').html("http://www.something/" + $(this).val());
}
});
Since you tagged Mootools in this question, here is a Mootools way to do it:
HTML example:
<input type='text' class='input' />
<div id="result">http://www.mysite.com/<span></span>
</div>
Mootools:
document.getElement('input').addEvent('keyup', function () {
var val = this.value ? this.value : '???';
document.id('result').getElement('span').innerHTML = val;
});
// Option 2:
document.getElement('input').addEvent('keyup', function () {
$$('#result span').set('html', this.value ? this.value : '???');
});
Demo here