HTML/Bootstrap form with Json API

Question

I want to create a simple HTML form (ideally using bootstrap).

On this form some input elements are filled by the user(which is simple!) but I also need to call an API with json data to fill a drop down box. like list of countries,etc.

How can I implement API into a form?

thanks

    <form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>My form</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="title">Title</label>
  <div class="controls">
    <input id="title" name="title" type="text" placeholder="Article on Banking,etc." class="input-medium">

  </div>
</div>

<!-- Select Basic -->
<div class="control-group">
  <label class="control-label" for="Article Type">Article Type</label>
  <div class="controls">
    <select id="Article Type" name="Article Type" class="input-xlarge">
      <option>ashkanarvaneh.co.uk/test/api.json</option>
    </select>
  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="summary">Summary</label>
  <div class="controls">                     
    <textarea id="summary" name="summary">Enthusiastically strategize superior infomediaries after clicks-and-mortar process improvements. Appropriately incubate stand-alone methodologies vis-a-vis pandemic potentialities. Authoritatively build.</textarea>
  </div>
</div>

<!-- Button -->
<div class="control-group">
  <label class="control-label" for="submit">Submit</label>
  <div class="controls">
    <button id="submit" name="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

</fieldset>
</form>

@Hassan I've added the code, basically I want the "article type" gets uses the API and get data from json document. — Ash
– Ash, Commented Aug 3, 2015 at 10:50
from where you will get json data? http://publicapidev.chambersandpartners.com/api/taggedlocations is not resolving to me. — Hassaan
– Hassaan, Commented Aug 3, 2015 at 10:57
@Hassan I've updated the link so anyone can view it. ashkanarvaneh.co.uk/test/api.json — Ash
– Ash, Commented Aug 3, 2015 at 11:24
php.net/curl & php.net/json_decode are your starting points. As it stands, your question is rather broad though. — Quentin
– Quentin, Commented Aug 3, 2015 at 11:36

Hassaan · Accepted Answer · 2015-08-03 12:14:34Z

-1

Try Example

<!-- Select Basic -->
<div class="control-group">
  <label class="control-label" for="Article Type">Article Type</label>
  <div class="controls">
    <select id="Article Type" name="Article Type" class="input-xlarge">
    <?php
        $countries = file_get_contents("http://ashkanarvaneh.co.uk/test/api.json");
        $countries = json_decode($countries, true);
        foreach($countries as $country)
        {
            echo "<option value='".$country['Id']."'>".$country['Description']."</option>";
        }
    ?>
      <!--<option>http://publicapidev.chambersandpartners.com/api/taggedlocations</option>-->
    </select>
  </div>
</div>

Note The above code is tested & works fine.

edited Aug 3, 2015 at 12:14

answered Aug 3, 2015 at 12:01

Hassaan

7,7407 gold badges34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ash Over a year ago

I tried the code but the Article type is empty. I didn't vote you down though. Thanks for your help so far :)

Ash Over a year ago

Also would it be possible to use javascript lib as I'm more comfortable with that. stackoverflow.com/questions/5508871/…

Collectives™ on Stack Overflow

HTML/Bootstrap form with Json API

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related