how to write html Content To open New Window with JQuery - javascript

on click run button open new window with data of html, css and javascript code editor. css is pass in new window but html data not, in html using code mirror that can pass in javascipt
run botton code is here
<div style="float:left; width:100%; height:93px;">
<span class="containerTitle" style="top:65px;">
Result
</span>
</div>
on this button call function "nwin"
$("a#result").click(nWin);
nwin function is,
<script>
function nWin() {
var w = window.open();
$(w.document.body).html("<style>" + $('#css').val() + "</style>"+ $('#html').val() );
}
</script>
html data codemirror is,
<div class="codecontainer" id="htmlContainer" style="max-width:40%;">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html" style="display: none;"></textarea>
</div>
that pass value in editor variable,
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("html"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
</script>
how to set the value editor in function nwin in html window


I think you need to save from the code editor to the text area before getting the value. It is working in my example
http://jsfiddle.net/em1uz745/2/
Put the same code in a snippet for reference, but it appears that the window.open is blocked:
$("a#result").click(nWin);
var cssEditor = CodeMirror.fromTextArea(document.getElementById("css"), {
lineNumbers: true,
mode: "text/css",
matchBrackets: true
});
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("html"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
function nWin() {
// Commit the code to the textarea so that it can be extracted using value
cssEditor.save();
htmlEditor.save();
var w = window.open();
$(w.document.head).append("<style>" + $('#css').val() + "</style>");
$(w.document.body).html($('#html').val() );
}
body {
font-family: sans-serif;
font-size: 14px;
}
.button_example {
display: inline-block;
background: #ccc;
border-radius: 3px;
border: 1px solid #333;
color: #333;
padding: 10px 20px;
text-decoration: none;
}
.button_example:hover {
background: #aaa;
}
.codecontainer {
width: 50%;
float: left;
}
.clearfix {
clear: both;
}
}
<link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet"/>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_wrap">
<span class="containerTitle">
Result
</span>
</div>
<div class="codecontainer" id="cssContainer">
<span class="containerTitle">CSS</span>
<textarea class="code" id="css"></textarea>
</div>
<div class="codecontainer" id="htmlContainer">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html"></textarea>
</div>
<div class="clearfix"></div>

Related

Random Image for 404

To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>

Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>

Modifying JS pager - how to substitute html elements using JQuery

Here is the initial code:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
</div>
</div>
Now the pager file calls:
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, options.startPage, options.perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
where contentHolder is 'fs-table-content', and it points to a template:
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
##courseName##
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="##lessons##" />
<label for="##lessons##">##lessons##
</label>
</div>
</div>
</script>
and it yields:
<div class="fs-table-table">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
Art/Music/Social Media
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="What is art?">
<label for="What is art?">What is art?
</label>
</div>
</div>
</div>
So you see, calling the function "template" simply returns html code. Now, when I click on the next page number, I expect the html to change but it doesn't change, it stays the same because
<div id="fs-table-content">
</div>
has been replaced. How do I inject fs-table-content back into the code. It should be put in the page onclick code:
$('#' + pager).on('click', '.page, .last-page, .first-page, .next-pages, .prev-pages', function(e) {
var newPage = parseInt($(this).data('value'));
var perPage = parseInt($('#' + pager + ' .perPage').val());
$('#' + pager + ' .page.current').removeClass('current');
$('#' + pager + ' .page[data-value="' + newPage + '"]').addClass('current');
showProperPaging(pager, newPage, options.totalPages, options.pagesToShow);
$('#' + options.contentHolder).html(template(pager, options.template, options.currentData, newPage, perPage, options.alwaysShowPager, options.informationToShow, options.errorTemplate));
options.currentPage = newPage;
$('#' + pager).trigger("pagingChange");
});
I noticed that in the demo for the pager, they use the following line to change the html:
var showing = $('#' + templateToShow).html().format(data);
html += showing;
But my data is structured differently, I don't think I can use .format

The way this script has been designed is that you need to provide two separate divs (not nested within one another). One for your content and one of its content (where it places pagination, search .. etc).
So you can change your code to this for it work:
!function(a){function e(e,t,r,n,o,s,g){var p="",l=Math.ceil(t/r);p+='<div class="showing"></div>',p+='<div class="pager"><span class="first-page btn" data-value="1">First</span><span class="prev-page btn">Previous</span><span class="prev-pages btn" data-value="1">...</span><span class="page btn current" data-value="1">1</span>';for(var i=1;i<l;i++)p+='<span class="page btn" data-value="'+(i+1)+'">'+(i+1)+"</span>";p+='\t<span class="next-pages btn" data-value="6">...</span><span class="next-page btn">Next</span><span class="last-page btn" data-value="'+l+'">Last</span></div>',p+='<div class="options" style="text-align: center; margin-bottom: 10px;"><span>Show </span><select class="perPage">';for(i=0;i<n.length;i++)n[i]==r?p+='<option selected="selected">'+n[i]+"</option>":p+="<option>"+n[i]+"</option>";p+="\t</select><span> per page</span></div>",s&&(p+='<div class="searchBox"><input type="text" class="search" placeholder="Search" value="'+g+'" /></div>'),a("#"+e).html(p)}function t(e,t,r,n){1==t?a("#"+e).find(".prev-page").hide():a("#"+e).find(".prev-page").show(),t==r?a("#"+e).find(".next-page").hide():a("#"+e).find(".next-page").show();var o,s,g=n,p=Math.ceil(g/2),l=Math.floor(g/2);r<g?(o=0,s=r):t>=1&&t<=p?(o=0,s=g):t+l>=r?(o=r-g,s=r):(o=t-p,s=t+l),a("#"+e+" .pager").children().each(function(){a(this).hasClass("page")&&a(this).hide()});for(var i=o;i<s;i++)o>0?(a("#"+e+" .prev-pages").show(),a("#"+e+" .prev-pages").data("value",o)):a("#"+e+" .prev-pages").hide(),a("#"+e+" .page[data-value='"+(i+1)+"']").show(),s<r?(a("#"+e+" .next-pages").show(),a("#"+e+" .next-pages").data("value",s+1)):a("#"+e+" .next-pages").hide();1==r?a("#"+e+" .last-page, #"+e+" .first-page").hide():0==r?a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").hide():(a("#"+e+" .pager, #"+e+" .showing, #"+e+" .options").show(),a("#"+e+" .last-page, #"+e+" .first-page").show())}function r(e,t,r,n,o,s,g,p){var l="",i=n*o-(o-1),h=n*o>r.length?r.length:n*o;if(r.length<=0){if(""==p)l+='<div class="dataError">There is nothing to show here.</div>';else l+=a("#"+p).html().format(["There are no Messages to display."]);return s||a("#"+e).hide(),l}a("#"+e).show(),a("#"+e+" .showing").html("Showing "+i+" to "+h+" of "+r.length+" total.");for(var c=n*o-o;c<n*o&&c!=r.length;c++){var u=[];a.each(g,function(a,e){u.push(r[c][e])}),l+=a("#"+t).html().format(u)}return l}a.fn.extend({paging:function(n){var o={data:{},contentHolder:"",template:"",errorTemplate:"",informationToShow:[],informationToRefineBy:[],perPage:10,pageLengths:[5,10,20,30,40,50],startPage:1,pagesToShow:5,showOptions:!0,showSearch:!0,alwaysShowPager:!0},s={currentPage:o.startPage,totalPages:0,currentData:n.data,refine:""};n=a.extend(o,n),(n=a.extend(s,n)).totalPages=Math.ceil(n.currentData.length/n.perPage),function(n,o){o.totalPages;e(n,o.currentData.length,o.perPage,o.pageLengths,o.showOptions,o.showSearch,o.refine),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,o.perPage,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).on("click",".page, .last-page, .first-page, .next-pages, .prev-pages",function(e){var s=parseInt(a(this).data("value")),g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".next-page",function(e){var s=o.currentPage+1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("click",".prev-page",function(e){var s=o.currentPage-1,g=parseInt(a("#"+n+" .perPage").val());a("#"+n+" .page.current").removeClass("current"),a("#"+n+' .page[data-value="'+s+'"]').addClass("current"),t(n,s,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,s,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=s,a("#"+n).trigger("pagingChange")}),a("#"+n).on("change",".perPage",function(s){var g=parseInt(a(this).val());e(n,o.data.length,g,o.pageLengths,o.showOptions,o.showSearch,o.refine),o.totalPages=Math.ceil(o.currentData.length/g),t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,g,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),o.currentPage=o.startPage,a("#"+n).trigger("pagingChange")}),a("#"+n).on("keyup",".search",function(e){var s=parseInt(a("#"+n+" .perPage").val()),g=a(this).val();o.refine=g;var p=function(e,t,r){if(""==t)return;var n=t.toLowerCase();dataToKeep=[];for(var o=0;o<e.length;o++)a.each(r,function(a,t){if(null!=e[o][t]&&e[o][t].toLowerCase().indexOf(n)>=0)return dataToKeep.push(e[o]),!1});return dataToKeep}(o.data,g,o.informationToRefineBy);p||(p=o.data),o.currentData=p;var l=Math.ceil(o.currentData.length/s);o.totalPages=l,t(n,o.startPage,o.totalPages,o.pagesToShow),a("#"+o.contentHolder).html(r(n,o.template,o.currentData,o.startPage,s,o.alwaysShowPager,o.informationToShow,o.errorTemplate)),a("#"+n).trigger("pagingChange")}),a("#"+n).on("focusin",".search",function(){o.refineFocus=!0}),a("#"+n).on("focusout",".search",function(){o.refineFocus=!1})}(a(this).attr("id"),n)}})}(jQuery),String.prototype.format=function(){var a=arguments;return this.replace(/{(\d+)}/g,function(e,t){return void 0!==a[0][t]?a[0][t]:e})};
$(document).ready(function() {
var data = [{
"firstname": "John",
"lastname": "Smith"
}, {
"firstname": "Jane",
"lastname": "Doe"
}, {
"firstname": "James",
"lastname": "Smith"
}, {
"firstname": "Amanda",
"lastname": "Doe"
}, {
"firstname": "Billy",
"lastname": "Joe"
}];
$('#fs-table-table').paging({
data: data, //This is the data that is being used. It is using JSON data so you can pull from any source if you want.
contentHolder: 'fs-table-content', //The id for the area where you want the data to be displayed.
template: 'weeklyLessonTemplate', //The template that is being used to display the data.
errorTemplate: 'contentErrorTemplate', //The error template that is being used (optional)
informationToShow: ['firstname', 'lastname'], //The information that you want to show from the given data
informationToRefineBy: ['firstname', 'lastname'], //The information that you want to search on from the given data
perPage: 1, //Default number to show per page. (Since we have a small amount of data only show 1.)
pageLengths: [1, 2, 3, 4], //Options for number of items per page.
startPage: 1, //The default start page. (Better to leave as 1 but can be changed if desired).
pagesToShow: 4, //Number of pages to show at the top. If you have 10 pages it will show [...] when going above or below the this number.
showOptions: true, //Show the per page options.
showSearch: true, //Show the search bar.
alwaysShowPager: true //Show the pager even if there isn't any data. Should be true if showSearch is true otherwise there will be problems.
});
});
.pager span.current {
border: red;
border-radius: 5px;
font-weight: bold;
color: red;
}
.dataError {
width: 100%;
font-size: 20px;
text-align: center;
padding: 10px;
}
.searchBox {
width: 300px;
margin: 0 auto;
}
.searchBox .search {
width: 100%;
height: 30px;
}
.showing {
width: 100%;
text-align: center;
}
.dropdown:hover .dropdown-menu { display: block; }
.pager span {
border-radius: 5px;
border: #a6a6a8 1px solid;
padding: 5px 14px;
margin: 0 3px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.pager span:hover { background-color: #ddd; }
.pager span.current:hover {
background-color: #fff;
cursor: default;
}
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fs-table-content"></div>
<div id="fs-table-table"></div>
<script type="text/template" id="weeklyLessonTemplate">
<div class="fs-table-row header">
<div class="fs-table-cell">
Course Name
</div>
<div class="fs-table-cell">
Lessons
</div>
</div>
<div id="fs-table-content">
<div class="fs-table-row">
<div class="fs-table-cell" data-title="Course Name">
{0}
</div>
<div class="fs-table-cell" data-title="Lesson">
<input type="radio" class="radio" name="weekly_lesson" value="{1}" />
<label for="{1}">{1}</label>
</div>
</div>
</div>
</script>

How to get a particular <div>'s data by it's id by using js in android webview?

I'm a beginner in web developement so please do excuse me if my question is foolish . Bascially I'm using a html+css+js script for showing a textEditor in webView which is shown without any problem but now problem is how can I get the particular having id "myEditor"'s content ? Can anyone please help me to fix this issue ?
HTML code:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<style>
#editorContainer {
max-width: 600px;
margin: auto;
}
#myEditor {
border: 1px solid #000;
padding: 20px;
}
#toolbar {
padding: 10px 20px;
border: 1px solid #d9d9d9;
background-color: #d9d9d9;
}
#toolbar button {
border: 1px solid transparent;
font-size: 18px;
cursor: pointer;
padding: 5px 10px;
background-color: transparent;
}
#toolbar button:hover {
border: 1px solid #2e2e2e;
}
</style>
<div id="editorContainer">
<div id="toolbar">
<button onclick="document.execCommand('bold',true,'' )"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button onclick="document.execCommand('italic', true, '')"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button onclick="document.execCommand('underline', true, '')"><i class="fa fa-underline" aria-hidden="true"></i></button>
<button onclick="document.execCommand('strikethrough', true, '')"><i class="fa fa-strikethrough" aria-hidden="true"></i></button>
</div>
<div id="myEditor" contenteditable="true">
<h1>Simple Text Editor</h1>
<p>This is a very simple text editor. I will add other features and design elements to it as time goes along.</p>
</div>
</div>
<!-- Based on Codeburst.io Tutorial: https://codeburst.io/how-to-build-your-own-wysiwyg-editor-6002fa3f5ea8 -->
<!--
Features to add:
- Save command state
-->
<script>
var onclick = function() {
var cmd = this.getAttribute('data-role');
switch (cmd) {
case 'h1':
case 'h2':
case 'p':
document.execCommand('formatBlock', false, '<' + cmd + '>');
break;
default:
document.execCommand(cmd, false, null);
break;
}
};
var els = document.querySelectorAll('#editControls a');
Array.prototype.forEach.call(els, function(el) {
el.addEventListener('click', onclick);
});
</script>
Now the following code is returning the complete script of the webView but I wonder how to edit this to get only desired result.
Java Code:
webView.evaluateJavascript(
"(function() { return ('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>'); })();",
new ValueCallback<String>() {
#Override
public void onReceiveValue(String html) {
}
});

using Jsoup Library : https://github.com/jhy/jsoup
Document document = Jsoup.parse(html);
Element sampleDiv = document.getElementById("sampleDiv");
Example:
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
public class JsoupTester {
public static void main(String[] args) {
String html = "<html><head><title>Sample Title</title></head>"
+ "<body>"
+ "<p>Sample Content</p>"
+ "<div id='sampleDiv'><a href='www.google.com'>Google</a>"
+ "<h3><a>Sample</a><h3>"
+"</div>"
+ "<div id='imageDiv' class='header'><img name='google' src='google.png' />"
+ "<img name='yahoo' src='yahoo.jpg' />"
+"</div>"
+"</body></html>";
Document document = Jsoup.parse(html);
//a with href
Elements links = document.select("a[href]");
for (Element link : links) {
System.out.println("Href: " + link.attr("href"));
System.out.println("Text: " + link.text());
}
// img with src ending .png
Elements pngs = document.select("img[src$=.png]");
for (Element png : pngs) {
System.out.println("Name: " + png.attr("name"));
}
// div with class=header
Element headerDiv = document.select("div.header").first();
System.out.println("Id: " + headerDiv.id());
// direct a after h3
Elements sampleLinks = document.select("h3 > a");
for (Element link : sampleLinks) {
System.out.println("Text: " + link.text());
}
}
}
Result:
Href: www.google.com
Text: Google
Name: google
Id: imageDiv
Text: Sample

In your Javascript, document.getElementsByTagName('html')[0].innerHTML finds the first instance of an <html> tag, then retrieves the HTML inside it. Since the <html> tag encloses our entire HTML file, it returns the entire file.
To get the HTML of a particular element with an ID of myEditor, try using document.getElementById('myEditor').innerHTML, which finds the first instance of an element with the matching ID attribute and returns its innerHTML.

javascript/jquery onChange function for div.text to update form hidden field value

My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks

This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>

With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)

So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end

Bootstrap Jquery/Ajax Inline Edit when clicking Edit button

Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.
My code:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!!

I would probably just use contentEditable, if possible.
document.addEventListener('DOMContentLoaded', function(){
var btn = document.getElementById("editButton");
btn.addEventListener("click", function(){
var editLabel = document.getElementById("editLabel");
editLabel.contentEditable = true;
editLabel.className = "editActive";
});
});
#editLabel{
margin-bottom: 25px;
display: inline-block;
padding: 5px;
box-sizing: border-box;
}
#editButton{
display: block;
}
.editActive{
border: 1px inset #e3e3e3;
cursor: text;
}
<label id="editLabel">Hello World</label>
<button id="editButton">Edit Label</button>

I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;" value="myInput">
<button onclick="$('label').text($('input').val())">edit</button>

Categories