Develop Reference

Display value of javascript variable in div

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>

How can implement enter key action in a form

In my php application i am using textfield and button[search].
when i am entering some data and i press Enter key the button action is not working.
can some one help on this.
My code like,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
function clearerrormessage()
{
document.getElementById('info').innerHTML="Enter a keyword to find prospective customer";
}
function submi()
{
/*$('#keyword').keyup(function(e) {
if (e.keyCode == 13) {
$('#form1').submit();
}
});*/
keyword1 =document.getElementById('keyword').value;
//var unvalidkey = new Array("is","am","a","b",'',"are","was","were");
var unvalidkey = new Array("is","am","a","b",'',"are","was","were","+","/","%",".","&","\\","\"","'","?","#");
for(keyitem in unvalidkey)
{
if(unvalidkey[keyitem]==keyword1)
var f=0;
}
if(f==0)
{
document.getElementById('info').innerHTML = '<h3><font color = red>Please enter a valid keyword to search</font></h3';
return false;
}
keyword=keyword1.replace(' ','_');
$.post( "<?php echo base_url() ?>ajax/followsearch.php", { keyword : keyword })
.done(function( data ) {
$("#content1").html("<div id ='content'></div>");
$('#content').scrollPagination(
{
nop : 30, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No Results To Display!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
}
);
});
}
</script>
</head>
<body>
<form id="form1" name="form1" action="" />
<div id="followkeyword">
<input type="text" style="width:300px;height:26px" name="keyword" id="keyword" onClick="clearerrormessage()" />
<div id="info1"><span id="info">Enter a keyword to find prospective leads</span>
</div>
</div>
<div id="followperloc">
<input type="button" name="mysubmit" id="mysubmit" value="Display my prospective leads" onclick="return submi()"/>
</div>
</form>
</body>
</html>
this code properly working in button click. But i need to also work in enter key submission. Please anyone help me..

Check for event keycode 13 to detect enter key.Try this:
Html: Use onkeypress instead onclick because onclick is a mouseevent.
<input type="button" name="mysubmit" id="mysubmit" value="Display my prospective leads"
onkeypress="return submi(event)" onclick="return submi(event)"/>
javascript:
function submi(event) {
event.which = event.which || event.keyCode;
if(event.which == 13 || event.which == 1) {
// wrap up your entire code here
}
}

Set/Get input value using cookie

I want the switch button to remember selected option. Because when I refresh browser my selection is resetting.. How can I do that?
Here is my code:
HTML:
<input type="button" value="Tak" onclick="return change(this);" />
JS:
<script>
function change( el )
{
if ( el.value === "Tak" ){
el.value = "Nie";
}else{
el.value = "Tak";
}
}
</script>

Client side values will reset when you refresh the browser.
You need to store in cookie or session for that

Include this to simply set and get cookie.
Something like:
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.cookie.js"></script>
</head>
...
<input type="button" value="Tak" onclick="return setValue(this)" id="btn"/>
Now you can get/set cookie and change input value whit no problem, something like:
function setValue(elem){
if(elem.value == "Tak"){
elem.value = "Nie";
$.cookie("btnState", true);
} else {
elem.value = "Tak";
$.cookie("btnState", false);
}
}
function getValue(){
var c = $.cookie("btnState");
if(c != null){
if(c){
$('#btn').val("Nie");
} else {
$('#btn').val("Tak");
}
} else {
//first page view
$.cookie("btnState", true);
$('#btn').val("Nie");
}
}
trigger getValue() on page load to check cookie value and set input value
EDIT:
To fire a function on page load use jQuery .ready function like this:
<script>
$(document).ready(function() {
getValue();
});
</script>
jQuery .ready documentation.
Here is a example in jsfiddle

Onclick event; If and Else

All right so I am doing a javascript code for a login type form and it will lead you to a new page. Here it is:
function submit1()
{
var x=document.getElementById("username");
var y=document.getElementById("password");
if (x.value=="username" && y.value=="password")
{
window.location="Example.php";
}
else
{
window.alert=("The information you have submitted is incorrect and needs to be submitted again!");
}
}
When ever I am hitting the submit button it takes me straight to the page instead of checking to see if it right. Please help!
Thank you in advanced! To let you know this is not a permanet login page!

The easy way to do this would be to use a button input:
<input type="button" value="Check" onclick = "submit1();" />
The alternative is to prevent this default behavior of a submit type input, by making the handler return false. Your HTML would look like this:
<input type="submit" value="Check" onclick = "return submit1();" />
Your function would need to be changed a well (considering the fact that you want it to not redirect). I am assuming you want to preserve data entered, so I am not going to use window.location to redirect. Instead, I am going to allow the form to be submitted:
function submit1()
{
var x=document.getElementById("username");
var y=document.getElementById("password");
if (x.value == "username" && y.value == "password") {
window.alert=("The information you have submitted is incorrect and needs to be submitted again!");
return false;
}
}

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
{
window.location="Example.php"; /*opens the target page while Id & password matches*/
}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>

The event needs to cancel the default event and return false. This will prevent the form from submitting.
HOWEVER, it should be a non-issue if the form submits anyway, because JavaScript CANNOT be trusted and therefore you MUST validate all input server-side.

<form method="post" action="." id="myform">
<!-- form contents --->
</form>
<script type="text/javascript">
(function () {
var f = document.getElementById('myform'), // get your form element
x = document.getElementById('username'),
y = document.getElementById('password'),
handler;
handler = function (e) {
e.preventDefault(); // stop submit
if (x.value=='username' && y.value=='password') {
window.location = 'Example.php';
} else {
window.alert('The information...');
}
};
// listen to submit event
if ('addEventListener' in f) {
f.addEventListener('submit', handler, false);
} else { // handle also IE...
f.attachEvent('submit', function () {
handler(window.event);
});
}
}());
</script>
anyway it looks like you're trying to check login/password from JS what is not greatest idea (anyone can just look into source and read it)

jQuery events not firing

I have been trying to get this to work. Basically I have a search box that has a default string in it (i.e. Search) and it should go away when the user clicks on the input field.
Here is the code:
HTML:
<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' value="Search <?php print $row[0]?> tweets!" autocomplete="off" />
</form>
Javascript/jQuery: (defaultString is a global variable that has the value of the textbox)
function clearDefault() {
var element = $('#searchBox');
if(element.attr('value') == defaultString) {
element.attr('value',"");
}
element.css('color','black');
}
$('#searchBox').focus(function() {
clearDefault();
});

Problem is here:
if(element.attr('value') == defaultString) {
element.attr('value',"");
}
Change it with:
if(element.val() == defaultString) {
element.val('value');
}
Update: Check it here:
http://jsfiddle.net/mr3T3/2/

The problem was that the event binding was not inside the $(document).ready() handler.
Fixed:
function clearDefault() {
var element = $('#searchBox');
if(element.val() == defaultString) {
element.val("");
}
element.css('color','black');
}
$(document).ready(function() {
$('#searchBox').focus(function() {
clearDefault();
});
});

It could be that event in fact is firing and your problem is in
if(element.attr('value') == defaultString) {
element.attr('value',"");
}
is "defaultString" properly defined?
put a simple alert() inside clearDefaults() and see if the event works.

i don't think clearDefault is reusable function, so don't create unnecessary function for small block of code. See the following code sample, i added a small improvement in your functionality.
<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' default="Search tweets!" value="Search tweets!" autocomplete="off" />
</form>
$(document).ready(function() {
$("#searchBox").focus(function(e){
var $this = $(this);
if($this.val() == $this.attr('default')) $this.val('');
else if($this.val().length == 0 ) $this.val($this.attr('default'));
});
$("#searchBox").blur(function(e){
var $this = $(this);
if($this.val().length == 0 ) $this.val($this.attr('default'));
});
});
I added a default attribute to store default value and used it later on blur event.
See the example in jsFiddler