javascript：如何使用php发布时将跨度值更改为文本框值 [英] javascript: how to change span value to textbox value while post using php
本文介绍了javascript：如何使用php发布时将跨度值更改为文本框值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好。
我在数学项目上工作。我使用mathquill js来获取用户的输入，就像书籍总和一样，但没有选项从span发布值，所以我会喜欢使用javascript将值从span更改为隐藏文本框，但隐藏文本框字段中没有任何帖子，这是代码
< ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.1 // EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd >
< html >
< head >
< span class =code-keyword>< title > Untitled Page < / title >
< link href = mathquill.css rel = 样式表 / >
< script src = http://ajax.googleapis.com /ajax/libs/jquery/1.7.2/jquery.min.js\"
<跨度lass =code-attribute> < script >
$（ function （） {
$（' ＃save'）。click（ function （）{
var mysave = $（' ＃spantxt'）。html（）;
$（' ＃hiddeninput'）。val（mysave）;
}）;
}）;
< / script >
< / head >
< 正文 >
< 表格 action = math.php 方法 = 发布 >
< span id = spantxt < span class =code-attribute> class = mathquill-editor > < / span >
< 输入 type = hidden id = hiddeninput 名称 = hiddeninput >
< input type = 提交 id = save name = save value = 提交 / >
< / form >
< span class =cod e-keyword>< script 类型 = text / javascript src = jquery.min.js > < / script >
< script type = text / javascript src = mathquill.js < span class =code-keyword>> < / script >
< script type = text / javascript >
var LatexImages = false ;
$（ function （）{
function printTree（html）
{
html = html.match（/< [az] + |< \ / [az] +> | ./ig）;
if （！html） return ' ';
var indent = ' \ n'，tree = ' ';
while （html.length）
{
var token = html.shift（）;
if （token.charAt（ 0 ）=== ' <'）
{
if （token.charAt（ 1 ）=== ' /'）
{
indent = indent.slice（ 0 ， - 2）;
if （html [ 0 ]&& html [ 0 ]。slice（ 0 ， 2 ）=== ' < /'）
token + = indent.slice（ 0 ， - 2）;
}
else
{
tree + = indent;
缩进+ = ' ';
}
token = token.toLowerCase（）;
}
tree + = token;
}
return tree.slice（ 1 ）;
}
var editingSource = false ，latexSource = $（' ＃latex-source'），htmlSource = $（'' #html-source'），codecogs = $（' #codecogs'），latexMath = $（' ＃editable-math'）。 bind（' keydown keypress'， function （）
{
setTimeout（ function （）{
htmlSource.text（printTree（latexMath.mathquill（' html'）））;
var latex = latexMath.mathquill（' latex'）;
if （！editingSource）
latexSource.val（latex）;
if （！LatexImages）
return ;
latex = encodeURIComponent（latexSource.val（））;
// location.hash ='＃'+ latex; //由于某种原因导致Chrome中性能严重下降
codecogs.attr（' src' ，' http://latex.codecogs.com/gif.latex？' + latex）.parent（）。attr（' href'，' http://latex.codecogs.com/gif.latex？' + latex）;
}）;
}）。keydown（）。focus（）;
if （ location .hash&& location .hash.length> 1 ）
latexMath.mathquill（'' latex'，decodeURIComponent（ location .hash.slice（ 1 ）））聚焦（）;
var textarea = latexSource.focus（ function （）{
editingSource = < span class =code-keyword> true ;
}）。blur（ function （）{
editingSource = false ;
}）。bind（' keydown keypress '， function （）
{
var oldtext = textarea .val（）;
setTimeout（ function （）
{
var newtext = textarea.val（）;
if （newtext！== oldtext）
latexMath.mathquill（' latex'，newtext）;
}）;
}）;
}）;
< / script >
< / body >
< / html >
<？ php
if（isset（$ _ POST [' save' ]））{
$ temp = $ _POST [ ' hiddeninput'];
echo $ temp ;
}
提前致谢！
解决方案
（ function （）{
（' < span class =code-string>＃save'）。click（ function （）{
var mysave =
（' #spantxt'）HTML（）;
Hi there.
I work on maths project., i use mathquill js to get input from user as like as book sums, but there is no option to post values from span, so i would like to change value from span to hidden textbox using javascript, but there is nothing post from hidden textbox field, Here is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head >
<title>Untitled Page</title>
<link href="mathquill.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
<script>
$(function(){
$('#save').click(function () {
var mysave = $('#spantxt').html();
$('#hiddeninput').val(mysave);
});
});
</script>
</head>
<body>
<form action="math.php" method="post">
<span id="spantxt" class="mathquill-editor"></span>
<input type="hidden" id="hiddeninput" name="hiddeninput">
<input type="submit" id="save" name="save" value="Submit"/>
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="mathquill.js"></script>
<script type="text/javascript">
var LatexImages = false;
$(function(){
function printTree(html)
{
html = html.match(/<[a-z]+|<\/[a-z]+>|./ig);
if(!html) return '';
var indent = '\n', tree = '';
while(html.length)
{
var token = html.shift();
if(token.charAt(0) === '<')
{
if(token.charAt(1) === '/')
{
indent = indent.slice(0,-2);
if(html[0] && html[0].slice(0,2) === '</')
token += indent.slice(0,-2);
}
else
{
tree += indent;
indent += ' ';
}
token = token.toLowerCase();
}
tree += token;
}
return tree.slice(1);
}
var editingSource = false, latexSource = $('#latex-source'), htmlSource = $('#html-source'), codecogs = $('#codecogs'), latexMath = $('#editable-math').bind('keydown keypress', function()
{
setTimeout(function() {
htmlSource.text(printTree(latexMath.mathquill('html')));
var latex = latexMath.mathquill('latex');
if(!editingSource)
latexSource.val(latex);
if(!LatexImages)
return;
latex = encodeURIComponent(latexSource.val());
// location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason
codecogs.attr('src','http://latex.codecogs.com/gif.latex?'+latex).parent().attr('href','http://latex.codecogs.com/gif.latex?'+latex);
});
}).keydown().focus();
if(location.hash && location.hash.length > 1)
latexMath.mathquill('latex', decodeURIComponent(location.hash.slice(1))).focus();
var textarea = latexSource.focus(function(){
editingSource = true;
}).blur(function(){
editingSource = false;
}).bind('keydown keypress', function()
{
var oldtext = textarea.val();
setTimeout(function()
{
var newtext = textarea.val();
if(newtext !== oldtext)
latexMath.mathquill('latex', newtext);
});
});
});
</script>
</body>
</html>
<?php
if(isset($_POST['save'])){
$temp = $_POST['hiddeninput'];
echo $temp;
}
Thanks in advance!
解决方案
(function(){
('#save').click(function () { var mysave =
('#spantxt').html();
这篇关于javascript：如何使用php发布时将跨度值更改为文本框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
