/    Sign up×
Community /Pin to ProfileBookmark

Populating Previously Entered Text Fields on AJAX Call

Copy linkTweet thisAlerts:
Feb 14.2017

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:

[code=html]
<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>
[/code]

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:

[code=php]
 $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++;
}

[/code]

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….?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootFeb 14.2017 — 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:
[code=html]<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.
Copy linkTweet thisAlerts:
@NtrimgsauthorFeb 14.2017 — 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:
[code=html]<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.[/QUOTE]

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:
[code=html]
<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>
[/code]

So with one selection, it would have to reveal all the hidden words.
Copy linkTweet thisAlerts:
@NtrimgsauthorFeb 14.2017 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@rootFeb 15.2017 — 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... [code=html]<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="" >
[/code] and using 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 [code=php]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
}
[/code] 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 [code=php]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]);[/code] and if you are putting out a block of HTML which needs variables plugging in data, use the HEREDOC method.
Copy linkTweet thisAlerts:
@NtrimgsauthorFeb 15.2017 — 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... [code=html]<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="" >
[/code] and using 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 [code=php]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
}
[/code] 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 [code=php]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]);[/code] and if you are putting out a block of HTML which needs variables plugging in data, use the HEREDOC method.[/QUOTE]

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?
Copy linkTweet thisAlerts:
@rootFeb 15.2017 — 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. [code=html]>
<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="" >[/code]
Using one button, a loop that steps
function toggle( w ){
for(var wrd=0; wrd&lt;6; wrd+=2){
var target = document.getElementsByName( w )[wrd];
target.type= target.type!="text" ? "text" : "hidden";
}
} will toggle all elements in that group.
Copy linkTweet thisAlerts:
@NtrimgsauthorFeb 15.2017 — 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. [code=html]>
<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="" >[/code]
Using one button, a loop that steps
function toggle( w ){
for(var wrd=0; wrd&lt;6; wrd+=2){
var target = document.getElementsByName( w )[wrd];
target.type= target.type!="text" ? "text" : "hidden";
}
} will toggle all elements in that group.[/QUOTE]


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.
Copy linkTweet thisAlerts:
@rootFeb 15.2017 — 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. [code=php]
 <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
}
}[/code]

So a script would receive post names word1 to word 50 and you wouldn't need to worry about the spelling group.
×

Success!

Help @Ntrimgs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...