Jump to content

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


samuel_lopez

Recommended Posts

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.
 
 

 

 

 

 

 

post-181301-0-00731000-1445088820_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by samuel_lopez
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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 by samuel_lopez
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

File not move to target folder.  :sweat: 

 

 

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 by Ch0cu3r
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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());
Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.