[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 142
  • Last Modified:

json value get in input box

https://www.experts-exchange.com/questions/28972605/Json-result-print-in-html.html
solution of this question append div. i want a hidden input box store value.
 i try but i don't get right solution.
actually  i want to send this value in other page by get or post.
0
Amita Singh
Asked:
Amita Singh
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
If I understand you correctly - you want the hidden input to store the selections the user makes from the typeahead?
So if they have PHP, JavaScript, Jquery in the selection you want to be able to send these to another post?

Is that correct?
0
 
Amita SinghWeb DeveloperAuthor Commented:
yes
0
 
Julian HansenCommented:
I am confused in the sample I posted in the referred question is already adding the value to an input that can then be sent back.

Consider this sample
HTML
  <form action="reflect.php" method="post">
    <div class="form-group">
      <input type="text" id="skills" name="skills" class="col-md-12" value="" readonly style="width:100%; background-color:#ccc;padding:1px 3px; margin-left:3px; cursor:pointer; float:right; margin-left:5px;">
      <span style="float:right; margin-top:-25px; font-weight:bold;font-size:15px; cursor:pointer; position: relative;" id="clear_skills" title="Clear Skills">&nbsp;X&nbsp;</span>
      <br/><br/>
      <div class="skills-container"></div>
      <input type="text" name="typeahead" value="" class="typeahead tt-query form-control col-md-12" autocomplete="off" placeholder="Add More Skills" style="width:200px;"/>
    </div>  
    <div class="alert alert-danger" id="error" style="display: none">You have already selected this skill.</div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Open in new window

<script>
var counter = 0;
$(function() {
  $('input.typeahead').typeahead([{  
      name: 'typeahead',
      valueKey: 'skill',
      remote: {
        url: 't1638.php?key=%QUERY',
        filter: function (parsedResponse) {
          $('#error').hide();
            
            return parsedResponse;
        }
      },                                            
  }]);

  $(".typeahead").focusin(function(){
    if(this.value!='') {
      var skills = $("#skills").val();
      var ifSkillAlreadyExist = skills.indexOf(this.value);   // ifSkillAlreadyExist ending till , comma
      //console.log((checkString.match(/,/g) || []).length);       // Check Occurance count of , (comma)
      if(ifSkillAlreadyExist == '-1') {
        $('.skills-container').append(
        $('<div/>', {
          class: 'skill-item',
          html: this.value
          }).append(
            $('<a/>', {
              class: 'skill-remove glyphicon glyphicon-remove'
            })
          )
        );
        
        if (skills.length > 0) skills += ', ';
        $("#skills").val(skills + this.value);
      } 
      else { 
        // Don't do this - rather add an error to the page
        //alert('You have already selected this skill.');
        $('#error').show();
      }
    }
    this.value = "";
  }); 
  
  $('body').on('click', '.skill-remove', function() {
    var val = $(this).parent().text();
    $(this).parent().remove();
    var inp = $('#skills').val().split(',');
    var res = [];

    while(inp.length > 0) {
      var top = inp.pop().trim();
      if (top != val) {
        res.push(top);
      }
    }

    $('#skills').val(res.join(', '));
  });
});
</script>

Open in new window

Working sample here
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Ray PaseurCommented:
i want to send this value in other page by get or post
A simple jQuery example showing just the moving parts of the AJAX communication is profiled in this article.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
Amita SinghWeb DeveloperAuthor Commented:
Thank you.
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now