i have a text area and a click me. In that text area, if a user enters some URLs then the input should be marked invalid on the button click.
For example, if my input is
"StackOverFlow, the greatest codding buddy you could ever have. The URL: www.stackoverflow.com You can also checkout meta.stackoverflow.com which is also super cool"
At button Click the error should be.
"Form submit failed, because you have entered some URLS. The URLs are
- www.stackoverflow.com
- meta.stackoverflow.com"
I would like a pure javascript solution. No jquery please.
Took one of those regex from the link below:
http://regexlib.com/Search.aspx?k=URL
Then :
var input = document.getElementbyId(id_of_your_form);
var x = input.match(/reg_ex_here/g);
if (x.length>0) { // x[i] will hold the url
var urls=x.concat();
alert(urls);
}
It's not properly tested ... but hope you get the idea..
Related
Let's say there is a form field named txtphone and then with javascript I check it is at least 10 digits in length. User enters only 5 digits so validation fails. I want the cursor to go back to where the txtphone is input automatically so the user can not get any further without entering a 10 digit phone number. This is an example. I can not get it to go back to input field on fields like name, email, etc. On this example, on failure, this is how I am trying to accomplish this:
txtphone.focus()
txtphone.select()
return False
It shows the alert error message but the focus is placed on the next form field.
Please, respond only if you had this problem in the past and you solved it, and please, give me a few lines of actual working code. I have been fighting this for weeks and ready to give up. Answers like "have you tried..." do me no good. Thank you.
I created a JSFiddle showing how the focus method should work for what you're looking for. Let me know if it helps.
JSFiddle
HTML
<input id="txtphone" type="text">
<button id="btn">
Click me!
</button>
JavaScript
var txtphone = document.getElementById("txtphone");
var button = document.getElementById("btn");
button.addEventListener("click", function () {
if (txtphone.value.length < 10) {
txtphone.style.backgroundColor = "red";
txtphone.focus();
} else {
txtphone.style.backgroundColor = "white";
}
});
Title isn't that clear, so let me see if I can explain what I'm doing.
I'm listing off users' posts, and have a like/comment button with those posts.
What I need to do, is capture when the like button is clicked (<span> tags), and then grab the post id from the hidden input field, and use that to post to the PHP script.
The PHP is doing all of the checking for if they're friends, privacy level is correct, etc. before actually submitting the like to the database, but I am currently just having the javascript/jquery be generated when the post is shown (naming each js variable/DOM element according to post id), but that's not very efficient and looks messy when viewing the source (But, it's the only way I can get it to work).
I want to be able to use an external javascript file to check when just the like button is clicked, and know what post that is being liked, and work that way.
I've been looking into this for quite some time, and it's to my understanding that this might work, but I have had no luck. I'm generating multiple posts on one page using foreach() loop, so the names/ids/classes of the elements are the same.
For a little better understanding, here's an example of what a post might look like:
<div class="feedPost">
<img src="#" class="feedProfile"/>
FirstName LastName
<div class="feedPostBody">Hello, world!</div>
<input type="hidden" value="24772" name="feedPostID">
<span class="feedLikeButton">Like</span> | Comment | 2 mins ago
</div>
and, using javascript/jquery, I want to be able to do something like this in an external js file:
$('.feedLikeButton').on('click',function(){
var post_id = 0; //I need to get the ID from the post that the like button is related to.
//If I just did $('.feedPostID').val() it wouldn't work
$.post("https://mysite/path/to/like.php", {post: post_id}).done(function(data){
if(data == "success"){
//This will set text from "Like" to "Unlike"
//Again, I can't just do $('.feedLikeButton') to access
//I guess I could do this.innerHTML? Would still need to access feed post id
} else {
//Probably will just flash error to user if error, or something similar
}
});
});
You should get the like button
var likeButton = $(this);
Then get it's container
var container = likeButton.parent();
Then find the hidden field
var idInput = container.find('[name="feedPostID"]');
Then get it's value:
var id = idInput.val();
With all these references you can do whatever you want.
I'm currently working on http://flickogram.com.
I need to put rich comment textbox like facebook has.
Currently, I've developed a jquery plugin and you can find its working on http://jsfiddle.net/mike_ivanenko/k6zH6/3/
You can use the plugin as following.
$(document).ready(function() {
$('#ttt').richtextbox( {
highlights: [
{char:'#', class:'highlighted', markup: 'topic'},
{char:'#', class:'highlighted', markup: 'people'}
]
,change:function(richtextfield, input) {
$('#output').val(input.val());
}
}
);
});
It works pretty well for putting topic by typing hash(#), but I can't find a way to deal with people's name by typing #.
My intention is as followings.
When user types #, drop-down box with search text field will be shown just below the current textbox and user can search for the name.
Then the result will be shown in the dropdown, and on clicking the item will be entered in the main text field. But it should be non-editable. Deleting by [Delete] or [Backspace] key is available.
Any suggestions?
Or please help me out this on github.com/mike-ivanenko/richtextbox
Thank you
Mike
you should check out html5's contenteditable feature
Edit: (fixed)
here's what you need
http://jsfiddle.net/ZQSHT/2/
$('div').keyup(function(){
var test = $(this).text();
if( test.indexOf('#') >= 0){
// Found world
alert('#');
$('input').focus();
}
});
$('input').change(function(){
alert( $('input').val() );
$('div').append('#'+$('input').val()+'');
});
I have an order submitting form where I want to replace URL texts with corresponding HTML links. I've found the following code on Stackoverflow:
get_url = function() {
var urls = document.getElementById('w_descr').firstChild;
urls.nodeValue = replaceURLWithHTMLLinks(urls.nodeValue);
}
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
I'm calling the get_url() function on click even of the form submitting button. It works fine. However the submitted orders have a feature of editing. If you edit an order and click on the Submit button again, the function will work again and will duplicate the existing link.
Could anybody help me to figure out how can I prevent that to happen? I mean - how to modify the script above to not to duplicate the links which are already in HTML form.
Thanks in advance.
Always store the text 'plain' (without the links), and only add the links when outputting the text for display.
When outputting the text for editing, output the 'plain' text.
I am trying to automate iPHone UI testing throught JavaScript.
I am in a compose mail page and I need to enter email-id in the TO,CC & BCC fields. I have the focus in TO field and keyboard is displayed. To field is UIATextField, however the usual way of entering data into textfield is not entering the data.
I used the following code
var app = UIATarget.localTarget().frontMostApp();
app.keyboard().elements()["go"].tap();
But did no good for me :(
I want to input the email address(abc#xyz.com) through the displayed keyboard.
Please help me with a code snippet. Also please let me know how to change the focus from "TO" field to "CC" which are one below the other.
The Header, Body buttons on the page are a segmentedControls. I am not able to tap them using the code snippet.
var app = UIATarget.localTarget().frontMostApp();
app.segmentedControls()[0].buttons()["Body"].tap();
Please help me with this.
Thanks in Advance
Kiran
I think you could do this a little better and with some reusability. Try defining a method like this:
function typeCharacters(inputString) {
for(var i in inputString) {
target.frontMostApp().keyboard().typeString(inputString[i]);
}
target.frontMostApp().keyboard().typeString("\n");
}
A quick test of this might look like this:
var timestamp = new Date().toString();
typeCharacters(timestamp);
Then you sit back and enjoy watching the keyboard type out a nice date for you.
Finally figured out how to automate the keyboard tapping
This is the code snippet which worked for me
//Get the keyboard handle
var keyBoard=app.keyboard();
//Get the handle for keys
var keys = keyBoard.keys();
//Get the handle for buttons on the keyboard (Space, Enter, Shift etc)
var keyButtons = keyBoard.buttons();
//To type "hi"
//type "h"
keys.firstWithName("h").tap();
//insert a delay for the tap() action to be completed
target.delay(0.5);
keys.firstWithName("i").tap();
target.delay(0.5);