We Keep Coding

RazorPay form auto load on page load without clicking Pay Now button

I am trying to integrate Razorpay in my application. Here is a code that controls loading of payment model when "Pay Now" button is clicked. I want to make the modal load on page load instead of button click. I tried submitting form via javascript to see if that loads the modal but that's not working.
Here is the code:
<form action="verify.php" method="POST" id="gateway">
<script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="<?php echo $data['key']?>"
data-amount="<?php echo $data['amount']?>"
data-currency="INR"
data-name="<?php echo $data['name']?>"
data-image="<?php echo $data['image']?>"
data-description="<?php echo $data['description']?>"
data-prefill.name="<?php echo $data['prefill']['name']?>"
data-prefill.email="<?php echo $data['prefill']['email']?>"
data-prefill.contact="<?php echo $data['prefill']['contact']?>"
data-notes.shopping_order_id="3456"
data-order_id="<?php echo $data['order_id']?>"
<?php if ($displayCurrency !== 'INR') { ?> data-display_amount="<?php echo $data['display_amount']?>" <?php } ?>
<?php if ($displayCurrency !== 'INR') { ?> data-display_currency="<?php echo $data['display_currency']?>" <?php } ?>
>
document.getElementById("gateway").submit(); // Not working
</script>
<!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
<input type="hidden" name="shopping_order_id" value="3456">
</form>
However, I also noticed that form actions to page verify.php so if the form is submitted it will go to that page where I just want to load the payment modal. Hence, what I tried can just not be the solution.

I found the solution. Posting as it may be of help for someone in the future:
In razorpay/checkout/automatic.php (or manual.php) place this right after the opening <form> element:
<script>
$(window).on('load', function() {
$('.razorpay-payment-button').click();
});
</script>

Attach an onload event to script and simulate click in the handler
<script>
function loadPaymentModal() {
const elem = document.getElementsByClassName('razorpay-payment-button')[0];
elem.click();
}
</script>
<form action="verify.php" method="POST" id="gateway">
<script onLoad="loadPaymentModal()" src="https://checkout.razorpay.com/v1/checkout.js"
data-key="<?php echo $data['key']?>"
data-amount="<?php echo $data['amount']?>"
data-currency="INR"
data-name="<?php echo $data['name']?>"
data-image="<?php echo $data['image']?>"
data-description="<?php echo $data['description']?>"
data-prefill.name="<?php echo $data['prefill']['name']?>"
data-prefill.email="<?php echo $data['prefill']['email']?>"
data-prefill.contact="<?php echo $data['prefill']['contact']?>"
data-notes.shopping_order_id="3456"
data-order_id="<?php echo $data['order_id']?>"
<?php if ($displayCurrency !=='INR' ) { ?> data - display_amount="<?php echo $data['display_amount']?>" <? php } ?>
<? php if ($displayCurrency !== 'INR') { ?> data - display_currency="<?php echo $data['display_currency']?>" <? php } ?>
>
</script>
<!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
<input type="hidden" name="shopping_order_id" value="3456">
</form>

<script src="{{url('/')}}/frontendtheme/js/plugins/jquery-3.3.1.min.js"></script>
<script>
$(window).on('load', function() {
jQuery('#gateway').submit();
});
</script>
note: Use your min.js file folder on script source

Ajax trigger live and dynamic form

let's say I have a code like that:
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
<div id="stuff<? echo $dynID; ?>" class="bla">
<form id="myform<? echo $dynID; ?> " action="bla.php">
<input name="iname<? echo $dynID; ?>" value="<? echo $row[1]; ?>">
</form>
</div>
Many forms. In this example 3. (It could be more or less)
How can I trigger this form (to send ist with AJAX)? This form is live-AJAX generated content and have a dynamic ID. I did not now the specific ID of the form to trigger like:
$("#myform").submit(function(event) {
How, can I handle this?

We could use some more information to help further, for example, is the text in this form (any of it) unique when compared to other forms? You can target it by basically anything and even combine these conditions. For example, if the action attribute is unique you could always do something like this (untested):
//if the form id starts with 'myform', perform a function on submit
$("form[id^='myform']").submit(function(event) {
//if that form's 'action' attribute is 'bla.php', then do something
if($('form').attr('action', 'bla.php')){
//your code here
}
});
EDIT:
Is this unique enough to snag it? I've made it rely on the div above it having an id that starts with 'stuff', that div must also have class 'bla' and the form attribute of 'action' must be 'bla.php'
$("div[id^='stuff'] form[id^='myform']").submit(function(event) {
if($(this).parent().hasClass('bla')) {
if($(this).attr('action', 'bla.php')){
//your code here
}
}
});

I can't take the value attribute on button | jQuery AJAX

I made ajax script for delete button and have data attribute based on id on the table in database. This is the HTML :
<textarea name="komentar" id="komentar" cols="30" rows="10"></textarea><br>
<input type="submit" name="submit" id="submit" value="Submit"><br>
<br><br><hr><br>
<!-- Komentar akan ada di dalam sini -->
<div id="komentar_wrapper">
<?php
include_once 'db.php';
$query = "SELECT * FROM komentar ORDER BY id DESC";
$show_comments = mysqli_query($db, $query);
foreach ($show_comments as $comment) { ?>
<p id="komentar_<?php echo $comment['id']; ?>"><?php echo $comment['komentar']; ?>
<!-- data-id-> data attribute, buat spesifik id mana yang mau di hapus -->
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment['id']; ?>">Delete</button>
</p>
<?php } ?>
</div>
And when i try to console the data-id, it wont show the value on console. This is the script :
$(".hapus_komentar").on("click", function() {
console.log($(this).attr("data-id"));
});
When i click the button it say undefined, i think it should print the id based on button data-id

try this i have prepared a demo code for you and runs ok
<?php
$as = array(1,2,3,4,5,6,7);
foreach ($as as $comment) { ?>
<p id="komentar_<?php echo $comment ?>"><?php echo $comment; ?>
<button id="button_hapus" class="hapus_komentar" data-id="<?php echo $comment; ?>">Delete</button>
</p>
<?php
}
?>
<script type="text/javascript">
$(".hapus_komentar").on("click", function() {
alert($(this).attr("data-id"));
//console.log($(this).attr("data-id"));
});
</script>

use Jquery.data(). and use event delegation since your button is generated dynamically.
$(document).on("click",".hapus_komentar",function() {
console.log($(this).data("id"));
});
You can use $(this).data("id") to get the id.

Your code is correct. Just check in HTML weather data-id will have value or not. Maybe that's the reason you are not getting proper value. As well you have taken that button in the loop so make sure on individual button click you will get all buttons data-id.

$(".hapus_komentar").on("click", function() {
console.log($(this).data("id"));
});
now use this.

$(document).on("click",".hapus_komentar",function() {
console.log($(this).attr("data-id"));
});

Create form inside for loop

I'm using codeignitor and am very new to it so sorry in advance if the question is senseless,but i'm stuck with certain requirement while coding.I have a for loop as below:
<?php foreach($messages as $req):?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction1()" value="Submit"/>
<?php endforeach; ?>
//Below is javascript code for from submit.
<script>
function myFunction1() {
document.getElementById("myform").submit();
}
the problem is i want the id name for form to be unique since each time a button is clicked same form is being submitted.I don't want to use the submit button inside the form.Please someone help me

use this code
<?php foreach($messages as $req):?>
<?php $count = 1; ?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform$count"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction<?php echo $count; ?>()" value="Submit"/>
<?php $count++; ?>
<?php endforeach; ?>
//Below is javascript code for from submit.
<?php
$arrayCount = count($messages);
if(!empty($arrayCount)){
for($i=1; $i<= $arrayCount; $i++){
?>
<script>
function myFunction<?php echo $arrayCount; ?>() {
document.getElementById("myform<?php echo $arrayCount; ?>").submit();
}
</script>
<?php
}
}
?>
Hope this will help you!!
Note: But the your concept like this is not good.

How to call javascript function reset() from PHP?

I am trying to call JavaScript reset() function by using button onclick method. The code is embedded in PHP as follows :
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo "<input type='button' value='Clear' onclick='<script>reset();</script>'>";
echo "</form>";
?>
The clear button is not working.

One solution would be to replace input button line with following:
echo "<input type='button' value='Clear' onclick='javascript:reset()'>";

try this:
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo "<input type='button' value='Clear' onclick='reset()'";
echo "</form>";

This should work - But i would try to get away from putting event handlers inline like this. Perhaps you could use jquery instead.
Below however is a 'Vanilla javascript" solution as you requested...
<?php
echo "
<form>
<input type='text' name='keyword'>
<input type='button' value='Clear' onclick='this.parentNode.reset()' >
</form>
";
?>

You can do this if you want :
<?php
echo "<form>";
echo "<input type='text' name='keyword'>";
echo " <input type='button' value='Clear' onclick='reset();'>";
echo "</form>";
?>
Another way to show HTML code in PHP :
Instead of using echo you can just put any HTML or Javascript code in side this ?> HTML | JAVASCRIPT CODE <?PHP
If you want to put PHP code inside that HTML code you can do the normal procedure which is this :
Example :
<?php
// Here it can be any PHP code
?>
<form>
<input type="hidden" name="<?php echo 'phpinsidehtml';?>"> //This is an example
<input type='text' name='keyword'>
<input type='button' value='Clear' onclick='reset();'>
</form>
<?php
?>