Web3 Eth SendTransaction without fixed value

Question

I'm trying to make a button on my website which allows people to send Ethereum to a specified address. Once clicked, it should for example pop up a MetaMask window where the user can enter the amount of Eth (and optionally fees) and only needs to click send to make the transaction.
However, as far as I understand the function web3.eth.sendTransaction needs to have already a specified amount of Eth in the value field, or otherwise the amount will simply be 0 and you can't change it anymore. Is there a solution to this?

I already managed to create a button with fixed amounts of Eth, however I'm struggling with a solution where the amount is variable and the user can decide how much he wants to send.

Another idea that I had would be to add a textbox/number box where the user can enter his desired amount of Eth that he wants to send, and to use that in the value field. However, that is above my current knowledge, if anyone would be willing to help me to find a solution, I would be very happy.

Thank you

Answer 1

If you need to enter amount of ethers dynamically like Metamask , then you have to create an api for that which receives your amount and performs transaction.

FLOW :-

1. Suppose you have a page with textfields accepting ether amount , to ,from and a submit button. Fill these entries.

2. Now you have to parse these values from your textfield as a body parameter and pass into your api. (you can use postman as frontend for now, as shown below :-)

Now api side :-

Web3 = require('web3');

//receive these values in a object named "data" and pass that object here

exports.transferEthers = (data, next) => {
let send_add = data.send_public_address;
let recv_add = data.rec_public_address;
let transfer_amount = web3.toWei(data.amount, 'ether');
let nonce = web3.toHex(web3.eth.getTransactionCount(data.send_public_address));
var private_key = private_key.slice(2);
let gas = web3.toHex(data.gas_limit);
let gasPrice = web3.toHex(data.gas_price);
var rawTx = {
    from: send_add,
    nonce: nonce,
    gasLimit: gas,
    gasPrice: gasPrice,
    value: web3.toHex(transfer_amount),
    to: recv_add,
};
var transaction = new tx(rawTx);
var txData = new Buffer(private_key, 'hex');
transaction.sign(txData);
var serializedTx = transaction.serialize().toString('hex');
web3.eth.sendRawTransaction('0x' + serializedTx, (err, txHash) => {
    if (txHash) {
        next(null, txHash);
    }
    else if (err && err.message) {
        next(err.message, null);
    }
    else {
        next('Unable to sendRawTransaction', null);
    }
});

}

// if you want to know how to pass these values from your front end to api then you need to search for that , because that is whole different thing. That is not a part of blockchain thats more like integration of frontend to backend. If you cant do that , you can always use postman.