如何在不提交表单的情况下获取输入控件的价值？

Question

I spend almost an hour googling it but i found nothing helpful, Here's my code

<div class = "form-group col-md-12">
    <input type="text"  name="filename" id="filename"></input>
</div>

Its outside the form, what i want to do is that what i type there should be put here

 $fopen=fopen( $uploadpath.here.'.png','wb');

So i can manage the filename thus it wont be static.

Answer 1

You'll have to send the data to your back-end code (php) as it won't run once it comes to browser. If I'm right, you want to open the file in your back-end but your page might get reload, so you want to not submit the form. If this is the case you can use ajax, like this:

<div class = "form-group col-md-12">
    <input type ="text"  name = "filename" id="filename"></input>
</div>
<script>
var filename = $("#filename").val();
$.ajax({
    url: myfile.php, //url to your php file with code  $fopen=fopen( $uploadpath.here.'.png','wb');
    type: post,
    data: {"fileName":filename},
    success: function(result) {
        // use your code to handle the result whatever you want to do here
    }
})
</script>

Your php file

myfile.php

<?php
$uploadPath = $_POST['fileName'];
$fopen=fopen( $uploadpath.here.'.png','wb');
echo "success"; // you can return whatever you want and that will go to success function in your javascript

?>

Answer 2

use jquery ajax $.post it's much easier

<div class = "form-group col-md-12">
    <input type ="text"  name = "filename" id="filename"></input>
</div>
<script>
var filename = $("#filename").val();
$.post("yourfile.php", {"fileName":filename}, function(data) {
    // do something
})
</script>

your php

<?php
    $uploadPath = 'youruploadfolder'; // this is the location of your file folder
    $fileName = $_POST['fileName'];  // this is your file passed via ajax request
    $fopen = fopen($uploadpath.$fileName.'.png','wb');
    echo "success"; // you can return whatever you want and that will go to success function in your javascript
?>