Fill an input, with several texts with Jquery and PHP

Question

Fill an input, with several texts with Jquery and PHP

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Greetings, I am creating a similar help window even on this same page, when you write a certain character and it is detected, a help window comes out and when you click on it it is placed inside the input (In the question form section , in the input of labels), I want to do exactly the same. The way I am doing is that the user to write a certain character sends me a request to the database and with ajax I get a window with a small button, which when I click what I want is to be placed inside the input , but allow you to place several, not just one, until here is that I could only get one input input, if you click on another is replaced and what I'm looking for is that they are placing chord click by clicking.

This is the HTML code that is responsible for sending the requests

<fieldset class="fieldset-job_tags">
<label for="job_tags">Habilidades necesarias para este proyecto <small>(opcional)</small></label>

<div class="field ">

<input oninput="parameter();" type="text" class="input-text" name="job_tags" id="job_tags" placeholder="Ejemplo : php,marketing,traducción" value="" maxlength="60"  />

<small class="description"><strong>Indica las habilidades que debe poseer el freelancer para este proyecto</strong></small>

<script>
function parameter(){
// alert(jQuery("input[name=job_tags]").val());
jQuery.ajax({
url:"wp-admin/añadir-habilidades.php?ajax_method=accept",
method:"POST",
cache:false,
data:jQuery("#submit-job-form").serialize(),
success:function(data){
//   alert(data);
if(data!="" && (data!=null)){
jQuery("#modal").html(data);
}
jQuery("#modal").html(data);
},
error:function(data){
console.log(data);
}

});
}
</script>
</div>
</fieldset>

This is the code that the server sends to the client so that he can fill in the input with the ajax request.

public function filter($key){
try{
$stm = "SELECT * FROM habilidades WHERE habilidad LIKE ? LIMIT 1";
$FILTER = $this->BBDD->prepare($stm);
$FILTER->execute(array(htmlentities(addslashes("%$key%"))));
if($FILTER->rowCount()!=0){
foreach($FILTER->fetchAll(PDO::FETCH_OBJ) as $filters_category){
if(!empty($filters_category->habilidad) && ($filters_category->habilidad!="")){
echo "<div style='min-width:2em; display:block;' class='container'>
<div style='min-width:2em;' class=''>
<div style='min-width:2em;' class=''>
<div style='min-width:2em;' class=''>
<div style='min-width:2em;' class=''>
<button style='width:2em !important; height:0px;padding-bottom:30px;padding-top:10px;position:absolute; margin-top:-2.2em' type='button' id='modal_button' name='modal_button' class='close' data-dismiss='modal'>
<span id='val_span' style='margin-left:-2.8em; font-size: 10px;'>
$filters_category->habilidad
</span>

</button>

</div>   
</div>
</div>
</div>
</div>";
echo "<script>
jQuery('#modal_button').click(
function(event){
jQuery('input[name=job_tags]').attr('placeholder','$filters_category->habilidad').attr('value','$filters_category->habilidad');
return false;
});
</script>";

}
}
}else{
return null;
exit;
}

} catch (PDOException $ex) {
die("Error en los filtros" . $ex->getLine() . PHP_EOL . $ex->getCode() . " " . PHP_EOL. $ex->getMessage());
}finally{
$this->BBDD = NULL;
}
}

jquery php ajax

asked by Carlos Estarita 11.05.2017 в 20:11

source

2 answers

how to get the "border-color" value of the ".ui-widget-header" class? Error saving an excel with PHP excel

score 0 · Answer 1

just save your previous result and add the new one:

function agregarhabilidad(attrib){
  var old=$('input[name=job_tags]').val();
  if (!old){
    old='';
  }else{
    old+=', '
  }
  $('input[name=job_tags]').val(old+attrib);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input name="job_tags">
<button onClick="agregarhabilidad('cazar')">cazar<button>
<button onClick="agregarhabilidad('volar')">volar<button>
<button onClick="agregarhabilidad('nadar')">nadar<button>

score 0 · Answer 2

Use Jquery's Autocomplete

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>