Skip to content

Instantly share code, notes, and snippets.

@onewoorks

onewoorks/wasaptext.html

Created August 7, 2023 06:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save onewoorks/2d860dc24d9e2dc9450655c5745661c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save onewoorks/2d860dc24d9e2dc9450655c5745661c3 to your computer and use it in GitHub Desktop.
Download ZIP
Basic form to wassap message builder
Raw
wasaptext.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container mt-4 mb-4">
<form type="submit" id="sample">
<div class="card mb-2">
<div class="card-body">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://placehold.co/600x400"/>
</div>
<div class="col-8">
<div class="row">
<h1>Product Sample A</h1>
<div class="mb-3">
<label for="nama" class="form-label">Quantity</label>
<input type="text" class="form-control" name="quantity_a" value="1">
<input type="hidden" class="form-control" name="product_a" value="Product Sample A">
<input type="hidden" class="form-control" name="price_a" value="20.00">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://placehold.co/600x400"/>
</div>
<div class="col-8">
<div class="row">
<h1>Product Sample B</h1>
<div class="mb-3">
<label for="nama" class="form-label">Quantity</label>
<input type="text" class="form-control" name="quantity_b" value="1">
<input type="hidden" class="form-control" name="product_b" value="Product Sample B">
<input type="hidden" class="form-control" name="price_b" value="20.00">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" name="nama" value="Nama Anda">
</div>
<div class="mb-3">
<label for="quantity" class="form-label">Alamat</label>
<textarea class="form-control" name="alamat">Alamat Anda</textarea>
</div>
<div class="mb-3">
<label class="form-label">No Wasap</label>
<input type="text" class="form-control" id="nowasap" value="601966655588">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
$('#sample').submit(function(e){
e.preventDefault();
const input = $(this).serializeArray();
payload(input)
})
function payload(content){
const data = Object.fromEntries(content.map(({ name, value }) => [name, value]));
const message = messageBuilder(data)
wasapweb(message)
}
function messageBuilder(payload){
let msg = `*Product :* ${payload.product_a}\n`
msg += `*Quantity :* ${payload.quantity_a}\n`
msg += `*Price :* ${payload.price_a}\n`
msg += `*Product :* ${payload.product_b}\n`
msg += `*Quantity :* ${payload.quantity_b}\n`
msg += `*Price :* ${payload.price_b}\n`
msg += `*Total :* RM${(parseFloat(payload.price_a) + parseFloat(payload.price_b)).toFixed(2)}\n\n`
msg += `*Nama :* ${payload.nama}\n`
msg += `*Alamat :* ${payload.alamat}\n`
return msg
}
function wasapweb(message){
const wasapTo = $('#nowasap').val()
const text = encodeURIComponent(message)
const url = `https://wa.me/${wasapTo}?text=${text}`
window.open(url, '_blank');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment