dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: Populating Previously Entered Text Fields on AJAX Call

  1. #1
    Join Date
    Apr 2009
    Posts
    368

    Populating Previously Entered Text Fields on AJAX Call

    I've got an application where I'm allowing users to take a spelling test, and they have the option of showing the correct spelling of the word or hiding it. They can toggle this at any time. My problem is that once they start entering in their spellings, if they toggle, it'll wipe out everything they entered. So somehow I need to capture what they've already entered. I'm using a basic onClick that triggers a PHP script.

    Here is the toggle:

    HTML Code:
    <select name="display_spelling" class="form-control" onClick="displaySpelling(this.value, <?php echo $result['spelling_unit']; ?>)">
    <option value="yes" <?php if($result['display_spelling'] == 'yes') { echo 'selected'; } ?>>Yes</option>
    <option value="no" <?php if($result['display_spelling'] == 'no') { echo 'selected'; } ?>>No</option>	
    </select>
    The PHP script then just receives the spelling test ($result['spelling_unit']) they want to take, runs a query to get those words, then changes the display so the correct spelling either shows or doesn't show.

    Here is the PHP if they want to display the spelling:

    PHP Code:
               $g 1;
               while(
    $g 50) {
                if(
    $y['Word' $g] != '') {
                echo 
    '<div class="form-group">';
                echo 
    '<label class="col-sm-3 control-label">Correct Spelling</label>';
                echo 
    '<div class="col-sm-9">';
                echo 
    '<input type="text" value="' $y['Word' $g] . '" class="form-control" readonly>';
                echo 
    '</div>';
                            echo 
    '<label class="col-sm-3 control-label">Student Spelling</label>';
                            echo 
    '<div class="col-sm-9">';
                            echo 
    '<input type="text" name="word' $g '"class="form-control" value="' $result['word' $g] . '">';
                            echo 
    '</div>';
                              echo 
    '</div>';
                }
            
    $g++;
                   } 
    The words are just stored in the DB in columns named Word1, Word2, Word3, etc..., all the way to Word50.

    So is there even a way to capture the input fields of word1, word2, etc....?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,376
    Why not just have PHP write in to a hidden text field the correct spelling and use JavaScript to change that field from hidden to text to show that spelling, for example:
    HTML Code:
    <input name="word00" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word00" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word00" type="text" value="" >
    Code:
    function toggle( i ){
        var target = document.getElementsByName( i.name )[1];
        target.type= target.type!="text" ? "text" : "hidden";
    
    }
    will look for the name group that is associated with the word, this will then set the hidden item, the second item or array value 1 of that group to text or hidden.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Apr 2009
    Posts
    368
    Quote Originally Posted by \\.\ View Post
    Why not just have PHP write in to a hidden text field the correct spelling and use JavaScript to change that field from hidden to text to show that spelling, for example:
    HTML Code:
    <input name="word00" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word00" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word00" type="text" value="" >
    Code:
    function toggle( i ){
        var target = document.getElementsByName( i.name )[1];
        target.type= target.type!="text" ? "text" : "hidden";
    
    }
    will look for the name group that is associated with the word, this will then set the hidden item, the second item or array value 1 of that group to text or hidden.
    I think the problem with this is that I have one toggle (display spelling) for all the words, not each individual word. So at the top of the list is this:
    HTML Code:
    <select name="display_spelling" class="form-control" onClick="displaySpelling(this.value, <?php echo $result['spelling_unit']; ?>)">
    <option value="yes" <?php if($result['display_spelling'] == 'yes') { echo 'selected'; } ?>>Yes</option>
    <option value="no" <?php if($result['display_spelling'] == 'no') { echo 'selected'; } ?>>No</option>	
    </select>
    So with one selection, it would have to reveal all the hidden words.

  4. #4
    Join Date
    Apr 2009
    Posts
    368
    I think I could add a loop to that function, but how would I target the different names? Sorry, I don't know much JavaScript.

    Code:
    <script>
    function toggle( i ){
      for (var u = 0; u < 50) {
        var target = document.getElementsByName(i.name)[1];
        target.type= target.type!="text" ? "text" : "hidden";
      }
    }
    </script>

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,376
    The point is that you creat a group by the name="" attribute, each word has its own name like word01 and word02, etc and your toggle function is generic and is passed the "this" object reference so that it will always point to the element that called the function and then that means your group name can be found.

    It wouldn't toggle ALL at once but each individually.

    So...
    HTML Code:
    <input name="word00" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word00" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word00" type="text" value="" >
    <hr>
    <input name="word01" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word01" type="hidden" value="Carbon" readonly onfocus="this.blur();">
    <input name="word01" type="text" value="" >
    <hr>
    <input name="word01" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word01" type="hidden" value="Chello" readonly onfocus="this.blur();">
    <input name="word01" type="text" value="" >
    and using
    Code:
    function toggle( i ){
        var target = document.getElementsByName( i.name )[1];
        target.type= target.type!="text" ? "text" : "hidden";
    
    }
    will only target word01 id that button is clicked.

    So for PHP it would go something like this, yout routine would output one button per spelling field and that each button will be linked by the name group for that word, being word00 to word50
    PHP Code:
    for($word=0; $word<50; $word++){ 
    if( !empty( $spelling = $y['Word' . $word]) ) {
    ?>
      <input name="word<?php echo $word;?>" type="button" value="Show" onclick="toggle( this );" > 
      <input name="word<?php echo $word;?>"  type="hidden" value="<?php echo $spelling;?>" readonly >
      <input name="word<?php echo $word;?>" type="text" value=""> 
    <?php
    }
    You should also limit the amount of strings you put together, if you have to make strings, use the sprintf() function to plug in your information, much tidier than mixing quotes and risking syntax errors and struggling to debug. for example
    PHP Code:
    echo '<input type="text" value="' $y['Word' $g] . '" class="form-control" readonly>'
    // could be better presented as 
    echo sprintf("<input type=\"text\" value=\"%s\" class=\"form-control\" readonly>"$y['Word' $g]); 
    and if you are putting out a block of HTML which needs variables plugging in data, use the HEREDOC method.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  6. #6
    Join Date
    Apr 2009
    Posts
    368
    Quote Originally Posted by \\.\ View Post
    The point is that you creat a group by the name="" attribute, each word has its own name like word01 and word02, etc and your toggle function is generic and is passed the "this" object reference so that it will always point to the element that called the function and then that means your group name can be found.

    It wouldn't toggle ALL at once but each individually.

    So...
    HTML Code:
    <input name="word00" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word00" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word00" type="text" value="" >
    <hr>
    <input name="word01" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word01" type="hidden" value="Carbon" readonly onfocus="this.blur();">
    <input name="word01" type="text" value="" >
    <hr>
    <input name="word01" type="button" value="show spelling" onclick="toggle(this);">
    <input name="word01" type="hidden" value="Chello" readonly onfocus="this.blur();">
    <input name="word01" type="text" value="" >
    and using
    Code:
    function toggle( i ){
        var target = document.getElementsByName( i.name )[1];
        target.type= target.type!="text" ? "text" : "hidden";
    
    }
    will only target word01 id that button is clicked.

    So for PHP it would go something like this, yout routine would output one button per spelling field and that each button will be linked by the name group for that word, being word00 to word50
    PHP Code:
    for($word=0; $word<50; $word++){ 
    if( !empty( $spelling = $y['Word' . $word]) ) {
    ?>
      <input name="word<?php echo $word;?>" type="button" value="Show" onclick="toggle( this );" > 
      <input name="word<?php echo $word;?>"  type="hidden" value="<?php echo $spelling;?>" readonly >
      <input name="word<?php echo $word;?>" type="text" value=""> 
    <?php
    }
    You should also limit the amount of strings you put together, if you have to make strings, use the sprintf() function to plug in your information, much tidier than mixing quotes and risking syntax errors and struggling to debug. for example
    PHP Code:
    echo '<input type="text" value="' $y['Word' $g] . '" class="form-control" readonly>'
    // could be better presented as 
    echo sprintf("<input type=\"text\" value=\"%s\" class=\"form-control\" readonly>"$y['Word' $g]); 
    and if you are putting out a block of HTML which needs variables plugging in data, use the HEREDOC method.
    So you're saying that the toggle has to be per word, not as a group? There's no way to do it as a single toggle for an entire group of let's say 30 words?

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,376
    I assumed that you were looking at an individual operation.

    If you were to be looking for all to be toggled at once, then you have all your inputs with the same group name that need to be toggled but you would need to know which array elements they are.
    HTML Code:
    >
    <input name="wordButton" type="button" value="show spelling" onclick="toggle('word');">
    <input name="word" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    <hr>
    <input name="word" type="hidden" value="Carbon" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    <hr>
    <input name="word" type="hidden" value="Chello" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    Using one button, a loop that steps
    Code:
    function toggle( w ){
    for(var wrd=0; wrd<6; wrd+=2){
        var target = document.getElementsByName( w )[wrd];
        target.type= target.type!="text" ? "text" : "hidden";
    	}
    }
    will toggle all elements in that group.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  8. #8
    Join Date
    Apr 2009
    Posts
    368
    Quote Originally Posted by \\.\ View Post
    I assumed that you were looking at an individual operation.

    If you were to be looking for all to be toggled at once, then you have all your inputs with the same group name that need to be toggled but you would need to know which array elements they are.
    HTML Code:
    >
    <input name="wordButton" type="button" value="show spelling" onclick="toggle('word');">
    <input name="word" type="hidden" value="Cheese" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    <hr>
    <input name="word" type="hidden" value="Carbon" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    <hr>
    <input name="word" type="hidden" value="Chello" readonly onfocus="this.blur();">
    <input name="word" type="text" value="" >
    Using one button, a loop that steps
    Code:
    function toggle( w ){
    for(var wrd=0; wrd<6; wrd+=2){
        var target = document.getElementsByName( w )[wrd];
        target.type= target.type!="text" ? "text" : "hidden";
    	}
    }
    will toggle all elements in that group.

    Thanks for your help. And sorry to be a pain, but I'm just curious if it would make a difference if the input fields where the user is actually going to enter the word had a different name other than "word". Once the form is submitted, the PHP script will cycle through the POST variables as word1, word2, etc...I'm assuming that this wouldn't work with the way the script works.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,376
    if you have a collection all named the same, then the post data would be like an array, you may as well have all the response elements set to individual names and then you don't need to modify the server-script as much.
    PHP Code:
     <input name="spelling" type="button" value="Show" onclick="toggle( this );" > 
     for($word=1; $word<50; $word++){ 
    if( !empty( $spelling = $y['Word' . $word]) ) {
    ?>
      <input name="spelling"  type="hidden" value="<?php echo $spelling;?>" readonly >
      <input name="word<?php echo $word;?>" type="text" value=""> 
    <?php
      
    }
    }
    So a script would receive post names word1 to word 50 and you wouldn't need to worry about the spelling group.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles