I have a little html page where I have a field which is for file upload and a input field which is filled by javascript ajax function on same page:
<div class="input-group>
<label>
<span>Select
<input type="file" name="file" style="display: none;">
</span>
</label>
<input type="text" readonly>
</div>
<script>
$(function() {
$(document).on('change', ':file', function()
{
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready( function()
{
$(':file').on('fileselect', function(event, label)
{
var input = $(this).parents('.input-group').find(':text'),
log = label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
</script>
I want to move the script from my index.html to my script.js file but it doesn't work. I guess it has something to do with not knowing things like $(document) and so on. I am not a javascript expert and need a little help with this.
Related
Good day all,
I have the following html code
<form method="post" action="blog_comment_post.php" id="post_blog_comment">
<input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/>
<textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea>
</form>
and, I have the following javascript code
<script type="text/javascript">
$(document).ready(function() {
$("#post_blog_comment").keypress(function(evt) {
if(evt.which == 13) {
var commentform = $("#post_blog_comment");
var blogid = $("#blogid").val();
var comment = $("#blog_comment").val();
$.post("blog_comment_post.php", { blogid: blogid, comment: comment},
function(data) {
var newmedia =
'<div class="blog_comm_hold"> \
<div class="user_comment_photo1"></div> \
<div class="blog_comment_"> \
<div class="blog_com_text">\
comment\
</div>\
</div>\
<br>\
</div>';
commentform.after(newmedia);
$('#post_blog_comment')[0].reset();
});
}
});
});
</script>
What I am trying to do is have the value that I typed into the textarea field of the form be displayed after the form when the user hits the enter key. The div classes load well but I don't know how to go about getting the actual value from the var variable be displayed too.
The var comment variable as can be seen above is not displaying its value. The variable is found under the blog_com_text div in the above script.
I want that when the user hits the enter key, that the value of the above comment variable is loaded inside of the respective div based on the above code. The div classes load well with no issue but how to have the value of the variable be loaded too.
Thanks much.
Here you go with the solution https://jsfiddle.net/xabt3vgt/
$(document).ready(function() {
$("#post_blog_comment").keypress(function(evt) {
if(evt.which == 13) {
var commentform = $("#post_blog_comment");
var blogid = $("#blogid").val();
var comment = $("#blog_comment").val();
//$.post("blog_comment_post.php", { blogid: blogid, comment: comment},
// function(data) {
var newmedia =`<div class="blog_comm_hold">
<div class="user_comment_photo1"></div>
<div class="blog_comment_">
<div class="blog_com_text">
${comment}
</div>
</div>
<br>
</div>`;
commentform.after(newmedia);
$('#post_blog_comment')[0].reset();
//});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="blog_comment_post.php" id="post_blog_comment">
<input type="hidden" value="<?php echo $postid; ?>" name="blogid" id="blogid"/>
<textarea name="blog_comment" class="blog_comment_form" id="blog_comment" placeholder="Join the discussion"></textarea>
</form>
You just need to uncomment you php ajax call.
Use back tick ` (left to 1) in the keyboard and if you want to add any variable then use ${variable_name} in between the back tick.
Try this
<script type="text/javascript">
$(document).ready(function() {
$("#post_blog_comment").keypress(function(evt) {
if(evt.which == 13) {
var commentform = $("#post_blog_comment");
var blogid = $("#blogid").val();
var comment = $("#blog_comment").val();
$.post("blog_comment_post.php", { blogid: blogid, comment: comment},
function(data) {
var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>');
newmedia.find('.blog_com_text').html(comment));
commentform.after(newmedia);
$('#post_blog_comment')[0].reset();
});
}
});
});
You can test with this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post_blog_comment"></div>
<textarea id="blog_comment"></textarea>
<input type="button" value="Go" id="postcomment" />
<script type="text/javascript">
$('#postcomment').click(function() {
showcomment();
});
function showcomment() {
var comment = $("#blog_comment").val();
var newmedia = $('<div class="blog_comm_hold"><div class="user_comment_photo1" /><div class="blog_com_text" /><br></div>');
newmedia.find('.blog_com_text').html(comment);
$('#post_blog_comment').after(newmedia);
$("#blog_comment").val('');
}
</script>
i am trying to add input boxes on click. but its strange without underscore it is working means input boxes is generating but with underscore.js it is not working.
Also tested with alert("testing"); alert is successfully coming.
<div class="form-group">
<div class="col-sm-10">
<div id="p_scents1">
Add More
<% _.each( type.size, function(i, listItem ){ %>
<%= "<p><label for='p_scents1'><input id='TypeSize"+listItem+"' class='form-control' type='text' placeholder='Please enter Type size' required='required' value='"+i+"' name='data[Type][size]["+listItem+"]'></label></p>" %>
<% }); %>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scents1');
var i = $('#p_scents1 p').size();
$('#addScnt1').live('click', function() {
alert("testing"); //tested . alert is working fine. but append is not working.
$(scntDiv).append('<p><label for="p_scents1"><input id="TypeSize0" class="form-control" type="text" placeholder="Please enter Type size" required="required" name="data[Type][size]['+i+']"></label> Remove</p>');
i++;
return false;
});
$('#remScnt1').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
Since those 2 elements are dynamically building, You have to use delegate like this
$(document).on('click', '#addScnt1', function () {
var i = $('#p_scents1 p').size();
$(scntDiv).append('<p><label for="p_scents1"><input id="TypeSize0" class="form-control" type="text" placeholder="Please enter Type size" required="required" name="data[Type][size][' + i + ']"></label> Remove</p>');
i++;
return false;
});
$(document).on('click', '.remScnt1', function () {
var i = $('#p_scents1 p').size();
if (i > 1) {
$(this).parents('p').remove();
i--;
}
return false;
});
Edit
Instead of appending all the elements, troubleshoot the steps by adding elements one by one.
First you can try like this,
$('#p_scents1').append("<span>test</span>");
Then add elements and findout which element causes the problem.
I am creating a system where a user can preview the title and steps of a recipe, i have created a dynamic form so the user can add more steps, the preview works with the title and first step however it seems that i can't get it to work on the second, third, fourth step. Can anyone help me? Any help would be greatly appreciated!
http://jsfiddle.net/uKgG2/
Jquery
var commentNode = $('#lp-step'),
nameNode = $('#lp-name');
$('input, textarea').bind('blur keyup', function () {
commentNode.html($('textarea[name="step_detail[]"]').val().replace(/\n/g, '<br />'));
nameNode.text('Title: ' + $('input[name="name"]').val());
});
var addDiv1 = $('#addStep');
var i = $('#addStep p').size() + 1;
$('#addNewStep').on('click', function () {
$('<p> <textarea id="step_' + i + '" name="step_detail[]"> </textarea>Remove </p>').appendTo(addDiv1);
i++;
return false;
});
$(document).on('click', '.remNew1', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
HTML
<label for="name">Enter recipe name:</label>
<input type="text" name="name">
<br />
<h1>Method</h1>
<div id="addStep">
<p>
<textarea id="step_1" name="step_detail[]"></textarea>
Add
</p>
</div>
<br />
<button type="submit">
Save on xml
</button>
</form>
<div id="live-preview-display">
<div id="lp-name"> </div>
<div id="lp-step"> </div>
</div>
You should bind the keyup or blur event to all the new textareas which are created with add button or link whatever.
Improved
try this :
$('#addStep').on('keyup', 'textarea', function () {
step_id = $(this).attr('id');
step_text = $('#' + step_id).val();
if($('.'+step_id).length > 0) {
$('.'+step_id).text(step_text);
return;
}
p = document.createElement('p');
p.className = step_id;
$(p).appendTo(commentNode);
$(p).text(step_text);
});
it worked! I saved it to fiddle too. you should just update the recipe name and clean this as I said i't very hacky just have to improve it.good luck. http://jsfiddle.net/uKgG2/3/
I've been on this one for a while but no luck so far, however I did get emoticons fully working using code for mootools.
Basically, I have a existing field of
<input type="text" class="post_action_input" value="Say Something..." id="emoticons_insert" />
And a image underneath containing
<img onClick="javascript:$('blove2').fancyShow();" src="./images/user_status_emoticon.jpg" width="25" height="25" />
Which triggers a dropdown containing this emoticon DIV that inserts the :alien: text into the field above
<div id="blove2"><img src="./images/smiley/alien.png" alt="" onClick="javascript:$('blove2').fancyHide();" /></div>
<div id="emoticon1" style="display:none;"> :alien: </div>
And it works great. However, what is really messing up our users is that our input field contains "Say Something" that dissapeares upon click, reappears on outer click etc. When they click the emoticon, it appends and produces "Say Something...:alien:" and posts just like that. How can I completely clear "Say Something..." while preserving the :alien: text upon clicking a emoticon? We are using MooTools 1.2.
Field insert Javascript:
<script type="text/javascript">
function get(id) {
return document.getElementById(id);
}
function contentHTML(id, m) {
var obj = get(id),
op = '';
if (m) {
op += obj.innerHTML;
} else if (!m) {
op += (!obj.innerText) ? obj.textContent : obj.innerText;
}
return (op);
}
function InsertText(input, output) {
var text = contentHTML(input, true);
var ele = get(output);
ele.value += text;
}
</script>
Emoticons drop-down JavaScript:
<script type="text/javascript">
window.addEvent('domready', function() {
Element.implement({
fancyShow: function() {
this.fade('in');
this.setStyle('display', '');
},
fancyHide: function() {
this.fade('out');
this.setStyle('display', 'none');
}
});
//$('element').fancyHide(); // FREEZES STATUS INPUT FIELD FOR SOME REASON
});
</script>
In other words, how can onClick insert replace "Say Something..." from the field, and insert :alien: successfully? Thank you very much guys!
Here is a suggestion, with less code.
In this suggestion I use Mootools's OverText, instead of your inline onfocus/onclick/onblur/value which will not work. OverText comes with Mootools More and in the fiddle I used mootools 1.3.
HTML
<input type="text" class="post_action_input" title="Say something..." id="emoticons_insert" />
<img onClick="javascript:$('blove2').fancyShow();" src="/images/user_status_emoticon.jpg" width="25" height="25" />
<div id="blove2">
<img src="/images/smiley/alien.png" data-name=":alien:" class="emoticon" alt="" />
</div>
Mootools
function InsertText(input, output) {
var ele = document.id(output);
ele.value += input;
ele.fireEvent('change');
}
window.addEvent('domready', function () {
Element.implement({
fancyShow: function () {
this.fade('in');
this.setStyle('display', '');
},
fancyHide: function () {
this.fade('out');
this.setStyle('display', 'none');
}
});
// Labels over the inputs.
document.getElements('input').each(function (el) {
new OverText(el);
});
document.getElements('.emoticon').addEvent('click', function () {
var icon_name = this.get('data-name');
InsertText(icon_name, 'emoticons_insert');
this.getParent().fancyHide();
});
});
Demo here
Sorry - still a beginner - How do I dynamically create action url using the input text from the user?
<form name="myInstitution" action="" method="GET">
<div>
<label for="names" class="bold">Institution Name</label>
<input id="names" name="schoolName" type="text"></input>
</div>
<div class="bold"></div>
<div>
<input type="submit" value="Submit" id="sbutton" name="submit" />
<input type="reset" value="Reset" />
</div>
</form>
Since you don't seem to be using a javascript library, I'll copy the bind code in pure javascript from this answer.
var on = (function(){
if ("addEventListener" in window) {
return function(target, type, listener){
target.addEventListener(type, listener, false);
};
}
else {
return function(object, sEvent, fpNotify){
object.attachEvent("on" + sEvent, function(){
fpNotify(window.event);
});
};
}
}());
on(document.getElementById("sbutton"), "click", function(){
this.action = document.getElementById( "names" ).val() + ".ext";
});
If you were using a javascript library like jQuery, you could bind to the event handler like this:
$( "form[name=\"myInstitution\"]" ).on( "submit", function( e ){
var $this = $(this),
text = $this.find( "input#names" ).val();
$this.prop( "action", text + ".ext" );
});
$('#myForm').submit(function ()
{
var action = '';
// compute action here...
$(this).attr('action', action);
});
Hope it will help you..