javascript: how to change span value to textbox value while post using php

Question

0.00/5 (No votes)

See more:

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

HTML

<!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!

Posted 20-Feb-15 18:28pm

Prabakaran T

Add a Solution

2 solutions

Solution 1

You have to pass value from spantext to hiddentext before submit button click. When you click on submit button, during that time hidden input value is null.
So, you have to provide value to hiddentext before button click. For this, you can use mouseover event on button. And change your script as:

<script>
$(document).ready(function(){
$("#save").mouseover(function(){
	var mysave = $('#spantxt').html();
    $("#hiddeninput").val(mysave);
    });
});
</script>

In this way, hidden value will get value as soon as your mouse is over the submit button.

Posted 20-Feb-15 19:43pm

Ishpreet Kaur

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prabakaran T · Accepted Answer · 2015-02-22T03:56:00

Thanks Mr.Ishpreet Kaur to spent your valuable time to answer this question., i accept your answer, ya its quiteworking too...

But i had another idea to solve this.

Please go through the following.

XML

<span id="editable-math" class="mathquill-editor" name="spanname" ng-model="mathditor"></span>
                     <input id="latex-source" type="hidden" name="outputBox" /><br/><br/>
                     <input type="submit" id="subclick" class="btn btn-success pull-right" name="sol" value="Submit" />
                    </form>

Just give one ID value to hidden textbox, now whatever i type in span which is look like Textarea that also printed in hidden text box.!

Here is the full code:

HTML

br mode="hold" /> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html ng-app="">


<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>
angular.module("unit5",[])
    .controller("sum1", function sum1(){

            var first = this;

        first.greeting = "This is my demo";

        var sec = this;

        sec.greeting = "This is my second demo";

    })
  
</script>

</script></head>
<body>

    <form action="math.php" method="post">
 
 <span id="editable-math" class="mathquill-editable">y=</span>
 <span id="editable-math" class="mathquill-editor" ng-model="mathditor"></span>

         
<input id="latex-source" name="chkd" ng-model="demo" placeholder="Your sum here!" />

<input type="submit" id="save" name="save" value="Submit" />
{{demo}}
</form>
<script type="text/javascript" src="angular.min.js"></script>

<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>



if(isset($_POST['save'])){

    
    $temp = $_POST['chkd'];

    echo $temp;

}