click button activeren [gelukt!]
Heeft iemand een idee hoe ik de buttonclick kan forceren?
Gewijzigd op 22/03/2022 20:37:52 door Jan te Pas
De URLSearchParams interface in JavaScript is ook erg handig
https://www.sitepoint.com/get-url-parameters-with-javascript/
Gewijzigd op 22/03/2022 10:16:42 door - Ariën -
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
Gewijzigd op 22/03/2022 11:41:29 door Jan te Pas
Kijk eens naar https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript/2706236#2706236
"De bedoeling is dat als een parameter meegegeven wordt, bijvoorbeeld test.php?code=123 dat dan de button om verder te gaan in een veld, button wordt via script id="generate" bewerking geactiveerd. Dus als test.php aangeroepen wordt zonder parameter, kan de gebruiker een code invullen. En vervolgens op de button clicken om de berekening te tonen."
@Ozzie PHP ik heb een php.pagina die door de gebruiker opgeroepen kan worden zonder parameters. Je krijgt dan een scherm te zien waarin je een formulier te zien waarin een paar velden ingevuld dan wel gekozen kunnen worden. Vervolgens kan de gebruiker op de BUTTON klikken om een barcode te maken.
Op het moment dat de pagina aangeroepen wordt met een parameter, test.php?ean=786211233 dan wordt de pagina getoond, waarbij de code wordt ingevuld in het formulier. Tevens wordt de EAN-13 methode gekozen. En dan wil ik automatisch de code laten genereren.
De hele code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Snel een barcode maken</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="html2canvas.js"></script>
</head>
<style>
@media screen{
body{
height: calc(100%);
width: calc(100%);
}
}
.container-fluid{
height: calc(100%);
}
div#display {
display: flex;
height: 100%;
width: 100%;
align-items: center;
}
@media print{
div#display {
display: flex;
height: auto;
width: 100%;
align-items: center;
}
}
#display #field,#display center {
margin: auto;
}
#field img{
height: 9vh;
max-width: 100%
}
div#code {
font-weight: 700;
font-size: 17px;
text-align: justify;
text-align-last: justify;
}
</style>
<body class="alert-info text-dark" style="background:#48a9e0;">
<?php
$ean=$_GET['ean'];
$label=$_GET['label'];
if (empty($label)) {
$label="Vul hier jouw tekst in";
}
?>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="card col-md-4 offset-md-4 mt-5">
<div class="card-body text-center">
<h4><br>Barcode Maker</h4>
</div>
</div>
</div>
<div class="row">
<div class="card col-md-6 mt-5 mr-5">
<div class="card-body">
<div class="form-group">
<label for="" class="control-label ">EAN-Code</label>
<input type="text" id="code" value="<?php echo $ean; ?>" class="form-control">
</div>
<div class="form-group">
<label for="" class="control-label">Label</label>
<input type="text" id="label" value="<?php echo $label; ?>" class="form-control">
</div>
<div class="form-group">
<?php
if ($ean<>"") {
echo '<input type="hidden" id="type" value="EAN13">';
} else {
echo '<label for="" class="control-label">Wich Barcode Type</label>';
echo '<select class="browser-default custom-select" id="type">';
echo '<option value="EAN13" selected>EAN 13*</option>';
echo '<option value="C128" >Code 128</option>';
echo '<option value="C128A">Code 128 A</option>';
echo '<option value="C128B">Code 128 B</option>';
echo '<option value="C39">Code 39</option>';
echo '<option value="C39E">Code 39 E</option>';
echo '<option value="C93">Code 93</option>';
echo '<option value="EAN8">EAN 8</option>';
echo '</select>';
}
?>
</div>
<button type="button" class="btn-block float-right btn btn-primary btn-sm" style="background:red;" id="generate">CREATE BARCODE</button>
<?php
If ($ean<>""){
echo '<script>document.querySelector("generate").click();</script>';
}
?>
</div>
</div>
<div class=" card col-md-5 ml-5 mt-5" id='bcode-card'>
<div class="card-body">
<div id="display">
<center>Barcode Creator</center>
</div>
</div>
<div class="card-footer" style="display:none">
<center>
<button type="button" class=" btn-block btn btn-success btn-sm" id="print">PRINT</button>
<button type="button" class=" btn-block btn btn-primary btn-sm" style="background:red;" id="save">DOWNLOAD BARCODE</button>
</center>
</div>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
<script>
$('#generate').on('click',function(){
if($('#code').val() != ''){
$.ajax({
url:'barcode.php',
method:"POST",
data:{code:$('#code').val(),type:$('#type').val(),label:$('#label').val()},
error:err=>{
console.log(err)
},
success:function(resp){
$('#display').html(resp)
$('#bcode-card .card-footer').show('slideUp')
}
})
}
})
$('#save').click(function(){
html2canvas($('#field'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
var link = document.createElement('a');
if (typeof link.download === 'string') {
document.body.appendChild(link);
link.download = 'MP-barcode_'+$('#code').val()+'.png';
link.href = uri;
link.click();
document.body.removeChild(link);
} else {
location.replace(uri);
}
}
});
})
$('#print').click(function(){
var openWindow = window.open("", "", "_blank");
openWindow.document.write($('#display').parent().html());
openWindow.document.write('<style>'+$('style').html()+'</style>');
openWindow.document.close();
openWindow.focus();
openWindow.print();
// openWindow.close();
setTimeout(function(){
openWindow.close();
},1000)
})
</script>
<html lang="nl">
<head>
<title>Snel een barcode maken</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="html2canvas.js"></script>
</head>
<style>
@media screen{
body{
height: calc(100%);
width: calc(100%);
}
}
.container-fluid{
height: calc(100%);
}
div#display {
display: flex;
height: 100%;
width: 100%;
align-items: center;
}
@media print{
div#display {
display: flex;
height: auto;
width: 100%;
align-items: center;
}
}
#display #field,#display center {
margin: auto;
}
#field img{
height: 9vh;
max-width: 100%
}
div#code {
font-weight: 700;
font-size: 17px;
text-align: justify;
text-align-last: justify;
}
</style>
<body class="alert-info text-dark" style="background:#48a9e0;">
<?php
$ean=$_GET['ean'];
$label=$_GET['label'];
if (empty($label)) {
$label="Vul hier jouw tekst in";
}
?>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="card col-md-4 offset-md-4 mt-5">
<div class="card-body text-center">
<h4><br>Barcode Maker</h4>
</div>
</div>
</div>
<div class="row">
<div class="card col-md-6 mt-5 mr-5">
<div class="card-body">
<div class="form-group">
<label for="" class="control-label ">EAN-Code</label>
<input type="text" id="code" value="<?php echo $ean; ?>" class="form-control">
</div>
<div class="form-group">
<label for="" class="control-label">Label</label>
<input type="text" id="label" value="<?php echo $label; ?>" class="form-control">
</div>
<div class="form-group">
<?php
if ($ean<>"") {
echo '<input type="hidden" id="type" value="EAN13">';
} else {
echo '<label for="" class="control-label">Wich Barcode Type</label>';
echo '<select class="browser-default custom-select" id="type">';
echo '<option value="EAN13" selected>EAN 13*</option>';
echo '<option value="C128" >Code 128</option>';
echo '<option value="C128A">Code 128 A</option>';
echo '<option value="C128B">Code 128 B</option>';
echo '<option value="C39">Code 39</option>';
echo '<option value="C39E">Code 39 E</option>';
echo '<option value="C93">Code 93</option>';
echo '<option value="EAN8">EAN 8</option>';
echo '</select>';
}
?>
</div>
<button type="button" class="btn-block float-right btn btn-primary btn-sm" style="background:red;" id="generate">CREATE BARCODE</button>
<?php
If ($ean<>""){
echo '<script>document.querySelector("generate").click();</script>';
}
?>
</div>
</div>
<div class=" card col-md-5 ml-5 mt-5" id='bcode-card'>
<div class="card-body">
<div id="display">
<center>Barcode Creator</center>
</div>
</div>
<div class="card-footer" style="display:none">
<center>
<button type="button" class=" btn-block btn btn-success btn-sm" id="print">PRINT</button>
<button type="button" class=" btn-block btn btn-primary btn-sm" style="background:red;" id="save">DOWNLOAD BARCODE</button>
</center>
</div>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
<script>
$('#generate').on('click',function(){
if($('#code').val() != ''){
$.ajax({
url:'barcode.php',
method:"POST",
data:{code:$('#code').val(),type:$('#type').val(),label:$('#label').val()},
error:err=>{
console.log(err)
},
success:function(resp){
$('#display').html(resp)
$('#bcode-card .card-footer').show('slideUp')
}
})
}
})
$('#save').click(function(){
html2canvas($('#field'), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
var link = document.createElement('a');
if (typeof link.download === 'string') {
document.body.appendChild(link);
link.download = 'MP-barcode_'+$('#code').val()+'.png';
link.href = uri;
link.click();
document.body.removeChild(link);
} else {
location.replace(uri);
}
}
});
})
$('#print').click(function(){
var openWindow = window.open("", "", "_blank");
openWindow.document.write($('#display').parent().html());
openWindow.document.write('<style>'+$('style').html()+'</style>');
openWindow.document.close();
openWindow.focus();
openWindow.print();
// openWindow.close();
setTimeout(function(){
openWindow.close();
},1000)
})
</script>
Ik heb code al ingevoegd die zou moeten werken. Maar het werkt niet:
Code (php)
Kortom, ik ben er nog niet. Zo kan als tweede parameter ook een tekst meegegeven worden. Dat wordt dan ook ingevuld. Ik heb ook al eens de focus op de BUTTON gelegd.
Code (php)
1
$('#generate').trigger('click');
Toevoeging op 22/03/2022 19:36:06:
En, mocht je niet met jQuery werken, dan kun je dit doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
var simulateClick = function (elem) {
// Create our event (with options)
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
var canceled = !elem.dispatchEvent(evt);
};
var btn_generate = document.querySelector('#generate');
simulateClick(btn_generate);
// Create our event (with options)
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
var canceled = !elem.dispatchEvent(evt);
};
var btn_generate = document.querySelector('#generate');
simulateClick(btn_generate);
Gewijzigd op 22/03/2022 19:31:28 door Jan Koehoorn
Waarom dan niet gelijk het resultaat tonen zonder een knop?