PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

click button activeren [gelukt!]

Door Jan te Pas op 22-03-2022 10:12 gewijzigd op 22-03-2022 20:37
4.065 views
Is er een mogelijkheid om bij een parameter check een button te clicken? 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.
Heeft iemand een idee hoe ik de buttonclick kan forceren?
J Jan te Pas
22-03-2022 11:40 gewijzigd op 22-03-2022 11:41
Het afvangen van parameters is niet zo'n probleem. Ik heb een script waarmee je een klik kunt realiseren, echter werkt dat niet.


<button type="button" class="btn-block float-right btn btn-primary btn-sm" style="background:red;" id="generate">CREATE BARCODE</button>
<!-- ingevoerde parameter correct is, dan click forceren. -->
<?php
  If ($ean<>"") {
    echo '<script>document.getElementById("#generate").click();</script>';
  }
?>
Jan R
22-03-2022 11:51
Uw id is niet #generate maar generate
J Jan te Pas
22-03-2022 12:55
Sorry, dat had ik ook al geprobeerd. maar werkte niet. Dit is in bovenstaande code niet aangepast.
- Ariën -
22-03-2022 12:57
Heb je mijn link al gezien?
J Jan te Pas
22-03-2022 15:51
@Arjën, daar moet ik even voor gaan zitten. Ik laat jou wat weten. Vanavond pak ik het op. Dank!
Ozzie PHP
22-03-2022 17:05
Misschien ligt het aan mij, maar wat probeer je precies te bereiken? Jouw onderstaande uitleg vind ik niet heel duidelijk, maar dat ligt wellicht aan mij. Kun je stap voor stap uitleggen wat je hiermee bedoelt en wat er moet gebeuren?

"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."
J Jan te Pas
22-03-2022 18:57
@Ariën jous suggestie werkt wel om een click te controleren. Zit in mijn code ook al in. jammer.
@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:

<!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>


Ik heb code al ingevoegd die zou moeten werken. Maar het werkt niet:

 <?php
  	    If ($ean<>""){
		echo '<script>document.querySelector("generate").click();</script>';
	    }
	?>


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.

Jan Koehoorn
22-03-2022 19:31 gewijzigd op 22-03-2022 19:31
Als je met jQuery een click op een element wilt simuleren, doe je dit:

$('#generate').trigger('click');


[size=xsmall]Toevoeging op 22/03/2022 19:36:06:[/size]

En, mocht je niet met jQuery werken, dan kun je dit doen:


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);

Reageren

Inloggen om te reageren