I want to take all the HTML from a div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags.
Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good!
But when a change the information in textareas my javascript code do not take the new information from that field.
What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<?php
if(isset($_POST['save'])){
$scrita = $_POST['hid'];
$scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
echo $scritaInsert;
exit; //just for the test
}
?>
<form method="POST">
<input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
<input type="hidden" name="hid" id="hid"/>
</form>
<div id="container">
<p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
<p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
The address
</p>
<p style="font-weight: bold; color: black;">
To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="font-weight: bold; color: black;">
Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
CONTRACT<br>
<n style="text-align: center;font-size: 16px;color: black;">
For transport
</n><br>
<nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
</nz>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think your problem could be the type of html slashes:
Try:
String.prototype.stripSlashes = function(){
return this.replace(/\\(.)/mg, "$1");
}
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content.stripSlashes());
});
I have changed my JavaScript to the following code and it's now working properly:
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {
$(this).text($(this).val());
});
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think you should be using the method text() not html(), because html() will just copy all the text including the HTML tag, but text() will only copy the real text.
Check out this fiddle.
Related
I have just started learning Javascript & i cant figure out why this code wont work, the submit button wont display any results.
I want to try the task in my way & not in any of the ways listed online as we havent learnt how to do that yet.
I think this is a very efficient method which does not include any prompts or alerts.
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num=document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2')("Entered number is even");
else
document.getElementById('type2')("Entered number is odd");
}
</script>
<h2 id="type2"></h2>
</body>
</html>
You need to use .textContent to display the results. You are not displaying any message on your submit click event.
You can read more about .textContent on JS MDN reference
Run snippet below to see in it working.
function myFunction() {
var num = document.getElementById('ooe').value
if (num % 2 == 0)
document.getElementById('type2').textContent = "Entered number is even";
else
document.getElementById('type2').textContent = "Entered number is odd";
}
h1 {
font-family: serif;
font-size: 48px;
color: #ff00ff;
text-align: center
}
h2 {
font-family: sans-serif;
font-size: 36px;
color: #0000ff;
text-align: center
}
h3 {
font-family: sans-serif;
font-size: 24px;
color: #00ffff;
text-align: center
}
<html>
<head>
<title>Basic Task 2</title>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<h2 id="type2"></h2>
Your problem is in document.getElementById('type2')("Entered number is even"); you need to use .textContent
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num = document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2').textContent = "Entered number is even" ;
else
document.getElementById('type2').textContent = "Entered number is odd";
}
</script>
<h2 id="type2"></h2>
</body>
</html>
I am trying to create a quiz game that allows the user to simply click on an image as their answer.
I
function checkimage(){
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onclick="checkimage"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
</body>
</html>
have tried firstly to make the images into buttons which worked because they are clickable.However, i have very basic javascript knowledge and i am not able to do the "on-click" function that once the user clicks the image, the program will check if the image clicked is the right answer and then return a message.
You can get id value when an image got clicked and then you can compare with your original answer to check whether it's right or not.
function checkimage(element) {
var rightAns = "Apple";
if (element.id == rightAns) {
alert("You selected right ans!")
} else {
alert("You selected wrong ans!")
}
}
<h3>Which image is of an apple?</h3>
<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
Note that here i am passing reference of an image element to the
javascript function on click event like
'onclick="checkimage(this)"' where 'this' is a reference.
Hello this is simple if i understood correctly, you need to use hidden values in your html code for example:
//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>
Finally if you are using a loop you could use any option with uniques ID in order to make it work:
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
<input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
}
//end//
in fact, you are telling to the JS what ID is the real answer even if you have a lot of options
USAGE in your case:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
<script>
$( document ).ready(function() {
console.log( "ready!" );
function checkimage(value){
alert('answer is:' + value);
if (value == "apple"){
//do something
}else{
//optionally do something here too
}
}
});
</script>
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onClick="checkimage('banana');return false;"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
<input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
}
//end//
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<script>function checkimage(value)</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div>
<input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
</div>
<div>
<script src="test.js"></script>
</div>
</body>
</html>
This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<form action=" " method="post">
<input id="myInput" type="text"/>
<input id="myButton" type="button" value="submit"/>
<p id="myOutput" style="color: yellow; background: black; width: 100px;"></p>
</form>
<script>
$("#myButton").click(function() {
var data = $("#myInput").val();
$("#myOutput").val(data);
});
</script>
</body>
Let's say at the moment my code is
<p id="myOutput" style="color: yellow; background: black; width: 100px;"></p>
Is jQuery able to change the codes?
let's say if somehow I type red then the code would be
<p id="myOutput" style="color: red; background: black; width: 100px;"></p>
and if I have another input text area and input 200 then the code would be
<p id="myOutput" style="color: yellow; background: black; width: 200px;"></p>
something like that.
Not exactly want to change just the class or just the style or the width but just wondering if I can use a text area input and after submitting then maybe the value of the code would change something like that...
Yes, you mainly can manipulate all your HTML Code with JQuery.
For Setting a value
$( '#myOutput' ).css( "color", "red" );
For getting a value
$( '#myOutput' ).css( "color");
http://api.jquery.com/css/
I have situation where in my page one text field and a small icon(edit.png) is there. Initially text field is in readonly mode & when I click this edit.png it remove the attribute readonly from text field. It works fine but now I want to do this: When click on edit.png it should remove the attribute readonly from text field as well as the icon itself change to save.png icon. This is my code. Please suggest where should I change to achieve this.
<html>
<head>
<script language="JavaScript">
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
.ic-table-edit { background-image: url("actions-edit.png"); }
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
</p>
<input type="submit" id="toogle" value="OK" />
</body>
Where should I change? Please answer according to my Page.
Here's the edit.
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
Make sure you have included j query plugin in your code.
With in the anchor tag,include <img> tag.
In toggle function,just change src attribute of your image to new image.
Find the example code below
<html>
<head>
<script>
function removeAlignment(x){
var read=document.getElementById(x).removeAttribute("readonly",0);
if(document.getElementById("toogle").value==="OK")
{
document.getElementById("toogle").value="SAVE";
$("#image").attr("src","actions-save.png");
}
}
</script>
<style type="text/css">
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
</style>
</head>
<body>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="abcd#dsa.com" readonly="readonly"/>
<img src="actions-edit.png" id="image">
</p>
<input type="submit" id="toogle" value="OK" />
</body>
</html>
I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}