How to dynamically create a bootstrap button that suites the input field's value

Question

I am checking whether an input field is empty or not, if it is empty display a button(google search) with a message if its has some value them display another button (update record) and a message.

My Elements:

Input field
button 1 ( field is empty ====> search)
button 2 (field is not empty ====> update information)

Currently i can see the 2 buttons i created in the inspect element and it looks very bad.

I have replicated the code below, thanks!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
        /* #googlesearch{display:none;}
        #updateinformation{display:none;}
        #emptyform{display:none;} */
</style>
</head>
<body>

<div class="container">

  <div class="form-group">
    <label >Company name:</label>
    <input onload="checker()" onkeydown="checker()" onchange="checker()" onkeyup="checker()" onfocus="checker()" class="form-control" id="txtcompany" value="dgfsd" >
   
    <div id="txtinformator">

        <small id="emptyform">Your form is empty, we recommend </small><br/>
        <button  id="googlesearch" class="btn btn-xs btn-primary">Search on Google</button>
     
        <button id="updateinformation" class="btn btn-xs btn-success">Update Information</button>

   </div>
    
  </div>
</div>

<script>


$( document ).ready(function() {
    $('#googlesearch').hide();
    $('#updateinformation').hide();
    $('#emptyform').hide();
});
// $( document ).ready(function() {
//     if($('#txtcompany').val() == ""){
           
//             $('#googlesearch').show();
//             $('#emptyform').show();
//         }
//         else if (!$('#txtcompany').val()){
//             $('#updateinformation').show();
//         }
//         else {
//             $('#googlesearch').hide();
//             $('#emptyform').hide();
          
//         }
// });
function checker(){
    if($('#txtcompany').val().length === 0){
           
        $('#updateinformation').hide();
        $('#googlesearch').show();
            $('#emptyform').show();
        }
        else if (!$('#txtcompany').val()){
            $('#updateinformation').hide();
        }
        else {
            $('#emptyform').text('We suggest that you update this information.');
            $('#updateinformation').show();
            $('#googlesearch').hide();
           
            
        }
}


</script>
</body>
</html>

function checker(){ var SearchonGoogle = document.createElement('button'); var UpdateInformation = document.createElement('button'); var CompanyField = document.getElementById('txtcompany'); if (CompanyField.value == '') { SearchonGoogle.innerText = 'Search on Google'; document.getElementById('CompanyVerification').appendChild(SearchonGoogle); } else{ SearchonGoogle.innerText = 'Update Information'; document.getElementById('CompanyVerification').appendChild(SearchonGoogle); } — 64YearOldCoder
– 64YearOldCoder, Commented Dec 12, 2017 at 23:29

developer_009 · Accepted Answer · 2017-12-12 22:45:59Z

1

You can use javascript to create dynamic elements for example

var myButton = document.createElement("<button style='background-color:yellow;' class='btn btn-default'> 
   MyButton</button>
");

answered Dec 12, 2017 at 22:45

developer_009

3671 gold badge3 silver badges13 bronze badges

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

3 Comments

64YearOldCoder Over a year ago

Good lead, i'm doing that, will let you know how it goes

developer_009 Over a year ago

After you create it, you can use it by declaring code var parentElement = document.getElementById("txtinformator"); parentElement.appendChild(myButton); code

64YearOldCoder Over a year ago

no, ity didnt work,i got very frustrated, code ended up create multiple button etc... that because i have and onkeyup="myfucntion()" and that how it should normally be... it night be a small thing that i'm missing and its 2:01AM :(

Collectives™ on Stack Overflow

How to dynamically create a bootstrap button that suites the input field's value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related