|
JavaScript - Making An Onclick Comment Field
Hi, I'm trying to make a comment field that only appears once you've clicked the "Add comment link". I'd like it to replace the add comment link. I assume this is an onclick event of some sort, but I'm not sure quite how to go about doing it.
Help would be highly appreciated. Similar TutorialsHi. So, I have this loop I run to retrieve wallposts with php. Within this loop, I want a link/button on every post that says "comment". When the user clicks the comment link I want a comment field and post button to appear on the post I clicked on. The problem is that when I've tried making a link that does this, it only drops down the comment field on the most recent wallpost regardless of which wallpost I click on. I'd appreciate some help, a lot! Hi, I'm mainly a PHP/HTML coder, but now I saw an excellent opportunity to use some Javascript. On my social network I'm adding the option to comment on statuses. What I need help with is how to this: I want it to be a text that says "Comment on status", when the user clicks this text I want the comment form to drop down under there and the "comment on status" link to disappear. Please help me with this, thank you in advance. I have an image gallery with about 10 images. Its a very simple image gallery, basically you have "A" "B" "C" "D" etc, and for each letter you click on, JavaScript changes the relative image from hidden to block. The problem I have is that all of the 10 images load in the background, despite the user not clicking on the corresponding letter, which wastes a ton of bandwidth. I have isolated and placed the image gallery code into a HTML file and included 3 pics so you can see it working: http://www.maxsurl.com/link.php?ref=rk925Lzd48 I don't know much about JavaScript, but I hope this code I just made up gives you can idea of what I am trying to achieve: Code: <SCRIPT type="text/javascript">
function pic1() {
load.pic('src="pic1.png"')
}
function pic2() {
load.pic('src="pic2.png"')
}
function pic3() {
load.pic('src="pic3.png"')
}
</SCRIPT>
<SPAN onclick="return pic1()">PIC 1</SPAN>
<SPAN onclick="return pic2()">PIC 2</SPAN>
<SPAN onclick="return pic2()">PIC 3</SPAN>
<IMG id="pic">
Does anyone have a suggestion on how I could achieve what I would like to do? If so, could you please show me a basic example of code so I can make sense of it (I am a visual learner). Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi there, I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason Hello, I'm trying to make sure that my email field contains at least 5 characters and the @ symbol. I've been trying to do this using an if...else loop, but so far I've only been running into brick walls. I think my problem is I don't know what to use when it comes to document.form1.email.value This is the latest script I tried: Code: <html>
<head>
<title>Form Example</title>
<script language="JavaScript" type="text/javascript">
function validate() {
if (document.form1.yourname.value.length < 1) {
alert("Please enter your full name.");
return false;
}
if (document.form1.address.value.length < 3) {
alert("Please enter your address.");
return false;
}
if (document.form1.phone.value.length < 3) {
alert("Please enter your phone number.");
return false;
}
if (document.form1.email.value.length < 5) alert("Please enter at least 5 characters.");
else if (document.form1.email.value.match(@)) alert("Please enter an @ symbol.");
return false;
return true;
}
</script>
</head>
<body>
<h1>Form Example</h1>
<p>Enter the following information. When you press the Submit button,
the data you entered will be validated, then sent by email.</p>
<form name="form1" action="mailto:user@host.com" enctype="text/plain"
method="POST" onSubmit="return validate();">
<p><b>Name:</b> <input type="TEXT" size="20" name="yourname">
</p>
<p><b>Address:</b> <input type="TEXT" size="30" name="address">
</p>
<p><b>Phone: </b> <input type="TEXT" size="15" name="phone">
</p>
<p><b>Email Address: </b> <input type="TEXT" size="30" name="email">
</p>
<p><input type="SUBMIT" value="Submit"></p>
</form>
</body>
</html>
I need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field. So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help... Hello, i Have problem about clear value when ppl input data on text field Any idea? Code:
<form action="http://www.packagetrackr.com/track/" method="get" name="track" target="_blank">
<div class="form-field-error-message hidden" style="display: none; ">
<div class="CommonEmptyTrackingNumber"></div>
</div>
<div id="track-form-tracking-number-container">
<div id="track-form-tracking-number-inner-container" class="track-form-control-boxer"><input id="track-form-tracking-number" class="track-form-element " type="text" name="n" value="Type a tracking number" title="Type a tracking number..." onFocus="if(/^Type a tracking number...$/i.test(this.value)){this.value='';}" onBlur="if(this.value==''){this.value='Type a tracking number...';}">
<input value="Track!" name="submit" type="submit" title="Track your package" class="track-form-submit-button sprite-master">
</div>
</div>
<div id="track-form-jss-carrier-container" class="hidden" style="z-index: 1000; display: none; ">
<div id="track-form-jss-carrier-content">
<label id="jss-carrier-auto" class="track-form-jss-carrier-label jss-carrier-label">
<input id="jss-carrier-auto-value" value="" type="radio" name="c" checked="checked"> <span>Auto Detect Carrier</span>
</label>
</div>
</div>
</form>
Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help! What I'm trying to do is.. When you select multiple <div> get the value of each one and save in separate hidden fields accordingly. What needs to happen is... Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Here's what I've come up with so far (currently I'm using JQuery) The problem with this is that no matter what div I click in which order it only updates the 1st hidden field Code: <div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div>
<div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div>
<input id="passenger_1" name="passenger_1" type="hidden" value="none" />
<input id="passenger_2" name="passenger_2" type="hidden" value="none" />
<script>
function abc() {
var pasvalue = $('#click1').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
$('#passenger_2').attr('value', pasvalue);
}}
function def() {
var pasvalue = $('#click2').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
$('#passenger_2').attr('value', pasvalue);
}}
</script>
I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page. Any way you know of to do this? I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful. Thanks very much. I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change();
});
});
</script>
I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help what's the fastest or easiest way to get all comment nodes into an Array? the solution only needs to work in ie8/w3 if that helps. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so: PHP Code: $my_list .= ' <form action="#" method="post"> <textarea class="commentbox" name="comment" id="comment"></textarea> <input type="hidden" name="post_id" id="post_id" value=' . $post_id . ' /> <input type="hidden" name="member_id" id="member_id" value=' . $id . ' /> <input type="submit" class="submit' . $post_id . '" value="Comment " /> </form> ' . $comment_list . ' // existing comments queried from the db <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments '; ?> Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id). So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function. Code: <head>
<script type="text/javascript">
$(function() {
$(".submit<?php echo $post_id; ?>").click(function() {
var post_id = $("#post_id").val(); // this is the unique id for each story, in a hidden input
var member_id = $("#member_id").val(); // this is a member for the commenter, in a hidden input
var comment = $("#comment").val(); // this is the comment from the input box
var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;
if(comment=='') {
alert('Please enter a valid comment');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("#update<?php echo $post_id; ?>").append(html);
$("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
document.getElementById('post_id').value='';
document.getElementById('member_id').value='';
document.getElementById('comment').value='';
$("#comment").focus();
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
Hi I am creating a help page on my website and I am putting a form on there in case users wish to leave any feedback/suggestions. Now, I am using JavaScript to try and solve this. What I want is a form box, which when the submit button is clicked, it creates a new div box underneath the form (or existing comment div) and updates the site this way. At first I would like to just get the functionality of the div being created and updated, then I will imrpove/add my form inputs etc. Here is what code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>template</title>
<meta name="description" content="Brief description of the page" />
<meta name="author" content="Thomas S. P. Vasey" />
<style type="text/css">
label {width: 7em;
float: left;
text-align: right;
margin-right: 1em;
margin-left: 1em;
display: block;
text-decoration: underline;
font-family: century gothic;
font-size: 10pt;
font-weight: bold;}
fieldset {background-color: gray;
width: 50%;
color: #f7852c;
display: inline;
border: 0pt;}
legend {color: black;
border: 1px solid #000000;
font-size: 14pt;
padding-left: 1em;
padding-right: 1em;}
textarea {border: 1pt solid black;
background-color: #f7852c;}
input {border: 1pt solid black;}
input[type="text"] {background-color: #f7852c;}
input[type="button"] {background-color: #f7852c;
font-family: century gothic;
border: 2px solid black;
padding: 0.5%;
margin: 2%;}
input[type="reset"] {background-color: #f7852c;
font-family: century gothic;
padding: 0.5%;
border: 2px solid black;
margin: 2%;}
input:focus {background-color: #80b7ff;}
textarea:focus {background-color: #80b7ff;}
</style>
<script type="text/javascript">
function printOut() {
var alias = document.form1.username.value;
var comment = document.form1.comments.value;
document.write('<div class="output">' + alias + '</div>');
document.write('<div class="output">' + comment + '</div>');
}
</script>
</head>
<body>
<form action="" name="form1" method="">
<fieldset>
<legend>[A!B]Attitude Brothaz Feedback</legend>
<p>
<label for="username">Name/Alias:</label>
<input type="text" name="username" maxlength="25" size="20" />
</p>
<p>
<label for="comments">Comments:</label>
<textarea name="comments" rows="5" cols="40"></textarea>
</p>
<input type="button" value="Submit Post" onclick="printOut()" />
<input type="reset" value="Reset Form" />
</fieldset>
</form>
</body>
</html>
I hope someone can help me achieve this, I believe I am going in the right direction with it, just need some guidance. Thank you for your time, Regards, LC. I am trying to create a comments posting feature in my site using javascript However everytime i click on submit it shows the comment posted for a second and then the comment dissapears. It does not retain the comment posted. Please help. code is given below: Code:
<html>
<head>
<script type="text/javascript">
function post(){
document.getElementById("label").innerHTML=document.hello.posted.value;
}
</script>
</head>
<body>
<form name="hello">
<div id="label"> </div>
<textarea name="posted"> </textarea>
<input type="submit" value="Submit" onclick="post()">
</form>
</body>
</html>
I came across some embedded JavaScript code and I noticed some weird “HTML comment-like tags” within embedded JavaScript that are getting rendered in FireFox but not IE. Specifically the closing tag "//-->" And the JavaScript code between these tags is functional (not commented out)! Code: <SCRIPT type=text/javascript> <!-- .... //--> </SCRIPT> What are these? Example usage: Code: <SCRIPT type=text/javascript>
<!--
var zz, zv, d, fTSR;
d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;
var gBF=false;
function GoTo(u){window.top.location = u + zz;}
function Go(u){window.top.location = u;}
....
//-->
</SCRIPT>
|
|||||||