How to pass pop up prompt value to its assigned textbox.

[samuel_lopez]

Hi to all,I'm newbie in using javascript,I want to ask if how can I pass pop up text value to it's assigned textbox.

I used php to display data. KIndly check attached image below,

Assuming I have 3 values to database and I had retrieve it. this is my form

 

 

 

<script>

function popup{

var remarks= prompt("Enter Remarks");

var remarks= prompt("Enter filename");

}

</script>

 

<form method="post">

<tr align="center">

<div class="tdportion">

<td class="tdportion1"><?php echo $row['student_id']; ?></td>

<td class="tdportion1"><?php echo $row['student_name']; ?></td>

</div>

<td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]" value="Passed"> Very Good </td>

<td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]"   value="Good" onclick="popup"> Good </td>

<td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]"   value="Average" onclick="popup")> Average </td>

<td><input type="text" name="remarks"/></td>

<td><input type="text" name="filename"/></td>

 --></tr>

<?php

};

?>

<tr><td><input type="submit" name="save" value="Save all"></td></tr>

</form>

 My process is:

when radio button Good and Average is clicked, then pop up will show to enter your remarks and document.

I was stuck on how to pass pop up value to its assigned textbox. 

Your response is much appreciated. Thank you.

 

 

 

 

 

 

 

[Ch0cu3r]

Why have a prompt if you are providing a text field? I feel that is unnecessary.

 

How about apply the  required  html5 attribute to the remarks and filename text fields. That way when the user attempts to submit the form the browser will highlight those text fields informing the user they must enter a value if they have left them blank.

[samuel_lopez]

Hi Ch0cu3r, your suggestion is good but I have to follow my own design/process. The text boxes in the future will be hidden so that when the user clicked failed or good radio button, the user will prompt a text box to enter remarks and file. the remarks and file data will be passed to hidden text boxes for saving. Please help me. Thank you.

. 

[samuel_lopez]

This is my updated function for passing on remarks textbox

 

<script type="text/javascript">

function popup(form)

{

  var reason = prompt("Enter remarks");

    for (var i = 0; i < form.testcase.length; i++) 

    {

       

       if(form.testcase.checked)

       { 

          var full = form.testcase.name;

          document.getElementsByName("remarks["+ full +"]")[0].value = reason;     

      }

    }

}

 </script>

 

but in only over write the first textbox.

Edited October 19, 2015 by samuel_lopez

[Ch0cu3r]

You need to name your remarks and filename fields with the same student id as your radio buttons

<td><input type="text" name="remarks[<?php echo $row['student_id'] ?>]" /></td>
<td><input type="text" name="filename[<?php echo $row['student_id'] ?>]" /></td>

Now when the user clicks the radio button you can need to only populate the remarks and filename textfields that use the same student id in thename. To handle this I would use Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('input[type=radio]').on('click', function(e) {
        // get the radio button name attribute value for the radio button that was clicked on
        name = $(this).attr('name');
        // extract the student id from from the radio button name
        student_id = name.match(/\d+/)[0];

        // target the remarks and filename textfields that are associated with the same student id
        remarksField = $('input[name="remarks['+student_id+']"]');
        filenameField = $('input[name="filename['+student_id+']"]');

        // display remark prompt and populate the prompt with the existing value
        enteredRemark   = prompt('Enter your remark', remarksField.val());

        // display filename prompt and populate the prompt with the existing value
        enteredFilename = prompt('Enter your filename', filenameField.val());

        // apply the values for the remarks and filename textfields
        remarksField.val(enteredRemark);
        filenameField.val(enteredFilename);
    });
})();
</script>

See Live Demo

[samuel_lopez]

HI Ch0cu3r, thank you for the fix but for "Very good" radio button, It should have no prompt..Please help. Thanks 

Edited October 19, 2015 by samuel_lopez

[samuel_lopez]

I got an error "Uncaught TypeError: $(...) is not a function"

[Ch0cu3r]

I got an error "Uncaught TypeError: $(...) is not a function"

 

Make sure you are loading Jquery into your page before that code

 

Edit On the last line before </script> remove the characters in red })();

 

but for "Very good" radio button, It should have no prompt.

 

Change

$('input[type=radio]').on('click', function(e) {
    ... code ...  
});

to be

$('input[type=radio]').on('click', function(e) {
    // if this radio button value is not Passed
    if($(this).val() != "Passed") {
        ... code ...
    }
});

Edited October 19, 2015 by Ch0cu3r

[samuel_lopez]

Hi Ch0cu3r,
No value were passed to remarks and filename.

 

this is my current code

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('input[type=radio]').on('click', function(e) {


      if($(this).val() != "Passed") {
        // get the radio button name attribute value for the radio button that was clicked on
        name = $(this).attr('name');
        // extract the student id from from the radio button name
        stud_ids = name.match(/\d+/)[0];


        // target the remarks and filename textfields that are associated with the same student id
        remarksField = $('input[name="remarks['+stud_ids+']"]');
        filenameField = $('input[name="filename['+stud_ids+']"]');


        // display remark prompt and populate the prompt with the existing value
        enteredRemark   = prompt('Enter your remarks', remarksField.val());


        // display filename prompt and populate the prompt with the existing value
        enteredFilename = prompt('Enter your filename', filenameField.val());


        // apply the values for the remarks and filename textfields
        remarksField.val(enteredRemark);
        filenameField.val(enteredFilename);
    }
        
    });
});
</script>






          <td><?php echo $row['student_id'] ?></td>
          <td class="tdportion1"><?php echo $row['student_id']; ?></td>
          <td class="tdportion1"><?php echo $row['student_name']; ?></td>


          <td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]" value="Passed"> Very Good </td>
          <td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]"   value="Good" onclick="prompt"> Good </td>
          <td><input type="radio" name="testcase[<?php echo $row['student_id'] ?>]"   value="Average" onclick="prompt"> Average </td>
          <td><input type="text" name="remarks[<?php echo $row['student_id'] ?>]" /></td>
          <td><input type="text" name="filename[<?php echo $row['student_id'] ?>]" /></td>

Edited October 19, 2015 by samuel_lopez

[Ch0cu3r]

Remove the  onclick="prompt"  from your radio buttons you don't need that now.

 

The javascript should either be placed between the <head></head> tags or before the closing </body> tag

[samuel_lopez]

When I alert the stud_ids = name.match(/\d+/)[0];

it only show 1 for s-01, i thought that was the error? 

Edited October 19, 2015 by samuel_lopez

[Ch0cu3r]

Oh the grade id in your screenshot is the $row['student_id'] value. In that case change

 

stud_ids = name.match(/\d+/)[0];  

 

to be

 

stud_ids =  name.match(/\[(.*)\]/)[1];

Edited October 19, 2015 by Ch0cu3r

[samuel_lopez]

Hi Ch0cu3r, how can I change prompt to textbox pop up?

[Ch0cu3r]

I don't understand what do you mean by that?

[samuel_lopez]

I want to replace prompt to pop up textbox

[samuel_lopez]

Hi, I changed 

<td><input type="text" name="filename[<?php echo $row['student_id'] ?>]" /></td>
<td><input type="file" name="filename[<?php echo $row['student_id'] ?>]" /></td>

How can I save it to database? Please help. Thank you

[Ch0cu3r]

I want to replace prompt to pop up textbox

You can not customize the javascript prompt. However you can create your own custom popup windows the modern way is to create a modal window

 

 

Hi, I changed 

<td><input type="text" name="filename[<?php echo $row['student_id'] ?>]" /></td>
<td><input type="file" name="filename[<?php echo $row['student_id'] ?>]" /></td>

How can I save it to database? Please help. Thank you

 

I assume you mean the file upload. If so then please read the following chapter Handling file uploads in the php manual it explains how PHP handles file uploads.

 

When saving the uploaded file to the database you should only be storing the filename (or path to the file). The file itself should stored on the servers file system. 

 

Why is there two different fields named filename?

[samuel_lopez]

File not move to target folder.   

 

 

foreach ($testcase as $ids => $result )
 
       // echo $id;
        //echo $result;
       {
         $remarks = $_POST['remarks'][$ids];
         $filename = $_POST['filename'][$ids];
         $file = $_FILES['filename']['name'];
         $file_loc = $_FILES['filename']['tmp_name'];
         $file_size = $_FILES['filename']['size'];
         $file_type = $_FILES['filename']['type'];
         $folder="studentdocument/";
 // new file size in KB
         $new_size = $file_size/1024;  
 // new file size in KB
 // make file name in lower case
         $new_file_name = strtolower($file);
 // make file name in lower case
         $final_file=str_replace(' ','-',$new_file_name);
 
 

if(move_uploaded_file($file_loc,$folder.$final_file)){
       //insert statement
       }
}

Edited October 21, 2015 by Ch0cu3r

[Ch0cu3r]

As you have named your file field as filename[<?php echo $row['student_id'] ?>]

You need to add the student id to the $_FILES array

         $file = $_FILES['filename']['name'][$ids];
         $file_loc = $_FILES['filename']['tmp_name'][$ids];
         $file_size = $_FILES['filename']['size'][$ids];
         $file_type = $_FILES['filename']['type'][$ids];

Next make sure the studentdocument/ directory exists and is in the same directory as your php file that is processing the upload. You may also need to set the necessary file permissions to allow PHP to write that directory too.

[samuel_lopez]

Hi Ch0cu3r, I want to change my promt to a textbox popup. how can I do that? 

this is the current code
enteredRemark   = prompt('Enter your remarks', remarksField.val());

[samuel_lopez]

Hi all, i have a problem on how to pass sweet alert prompt value to another textbox.
Please refer to https://limonte.github.io/sweetalert2/.

this is my code

 

        remarksField = $('input[name="remarks['+testcase+']"]');
        filenameField = $('input[name="filename['+testcase+']"]');
        //enteredRemark   = prompt('Enter your remarks', remarksField.val());

      
        swal({ 

          title: 'Input something',
          html: '<p><input id="input-field">',   
          showCancelButton: true,   
          closeOnConfirm: false }, function() {   swal({     html:       'You entered:' + $('#input-field').val() 
          

        });
         remarksField.val(#input-field').val());

[Ch0cu3r]

I have merged your two topics as this is continuation from last time.

 

The textbox value needs to be set in swal's callback function. So replace the following

function() {   swal({     html:       'You entered:' + $('#input-field').val() 
});
remarksField.val(#input-field').val());

With

function() {
    remarksField.val(  $('#input-field').val() );
});

Also  closeOnConfirm:  needs to be set to  true

Edited November 3, 2015 by Ch0cu3r