vendredi 24 avril 2020

check button in table field to select multiple rows (asp.net)

I searched the related questions and can't find something that works for me.

I have a page, where I have to fill in different text boxes (some mandatory, others not). One of them when you click opens a table that has different columns with data.

the first column is a button that selects the entire row, I would need that button to become a check so I can select multiple rows, not just one.

keep in mind that this is in javascript

This is the data that I must change:

 "<td><a href='#' class='btn btn-minier btn-inverse' onclick='return confirmarDato(" + '"' + est[i]._ID + '"' + "," + '"' + est[i]._DATO + '"' + ")'>Select</a> </td>" +



Why checkbox is not checking? (reactjs)

I have weird situation where my App component is working fine except for checking the checkbox, and the same App component, which I copy-paste in another project, is working totally fine. I created again new project with only App component, copy-pasted, same thing, everything is fine except checkbox. Can anyone explain to me what is going on here? How is it possible that the same component is working fine in one project and in others doesn't? And I restarted everything. So here is my code, just a simple to do list:

import React, { useRef, useReducer } from 'react'

function App() {

    const inputRef = useRef<HTMLInputElement>(null)

    const handleSubmit = (e: any) => {
        e.preventDefault()
        inputRef.current?.value !== "" && dispatch({ type: 'ADD_TODO', payload: inputRef.current?.value })
        inputRef.current && (inputRef.current.value = "")
    }

    const [todo, dispatch] = useReducer((state: any, action: any): any => {
        switch (action.type) {
            case 'ADD_TODO':
                return [...state, { id: state.length, name: action.payload, isCheck: false }]
            case 'CHECK_TODO':
                return state.filter((item: any, index: any):any => {
                    if (index === action.id) {
                        item.isCheck = !item.isCheck
                    }
                    return item
                })

        }
    }, [])

    const todos = todo.map((item: any, index: number) => {
        return (
            <li key={index}>
                <input type="checkbox" checked={item.isCheck} onChange={() => dispatch({ type: "CHECK_TODO", id: index })} />
                {item.name}
            </li>
        )
    })

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="Buy milk"
                    ref={inputRef}
                />
            </form>
            <ul>{todos}</ul>
        </div>
    )
}

export default App

here, in some old project is working fine, I can check it and uncheck it: enter image description here

here, in any other new project is not working at all:

enter image description here

I didn't do anything unusual, created it with npx create-react-app . --template typescript

EDIT

Here is console log with snippet when clicked on checkbox 'eggs' (don't know why is it rendering twice, in project that works it's rendering only once):

case 'CHECK_TODO':
    return state.filter((item: any, index: any): any => {
        if (index === action.id) {
            item.isCheck = !item.isCheck
            console.log('click')
            console.log(`${index} === ${action.id}`)
            console.log(item.isCheck)
        }
        return item
    })

enter image description here




How to make a "link" from CheckboxlistTile to another page on Flutter

I'm making a Terms and Conditions agreement and I want this sentence to be highlighted and clickable, when clicked it should take the user to another page in the app where they can read the agreement. I'm having trouble creating something that's both clickable and higlighted.



     CheckboxListTile(
        value: checkboxValue,
      onChanged: (val) {
        if (checkboxValue == false) {
          setState(() {
            checkboxValue = true;
          });
        } else if (checkboxValue == true) {
          setState(() {
            checkboxValue = false;
          });
        }
      },
      subtitle: !checkboxValue
          ? Text(
              'Required.',
              style: TextStyle(color: Colors.red),
            )
          : null,
      title: new Text(
        'I agree to the Terms and Conditions.',
        style: TextStyle(fontSize: 14.0),
      ),
      controlAffinity: ListTileControlAffinity.leading,
      activeColor: Colors.green,
    ),
    ```





How to show the text of the selected checkbox in a Toast?

I have tried this:

public void onCheckboxClicked(View view) {
    // La view è checked?
    boolean checked = ((CheckBox) view).isChecked();
    // Seleziona quale casella di controllo selezionare
    switch (view.getId()) {
        case R.id.checkBox:
            if (checked)
                Toast.makeText( getApplicationContext(), "Hai selezionato: " + checkBox.getText(), Toast.LENGTH_SHORT ).show();}

But I get this error:

java.lang.IllegalStateException: Could not execute method for android:onClick

The OnClick method is missing, but how can I use it together with the onCheckboxClicked method? Sorry I'm a beginner. Thanks




Bootstrap toggle checkbox not working on alternate page load

I am using bootstrap toggle checkbox. Following css and js included

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

I am creating checkbox like this

<input type="checkbox"  id="currentSeason"  name="currentSeason" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-size="small">

But toggle checkbox is getting checked on alternate page load means when i open page it works and then i open same page again, it doesn't work.




How to check all the checkboxes by a single click?

I have a list of items in my Recyclerview. At first, the checkbox is not visible.When I longclick on any item, checkbox appears on each item and it can be checked . But how to provide SELECT ALL option and check all the checkboxes by a single click?

Here is my Adapter class

package adapters;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckBox;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.mynotes.R;

import java.util.ArrayList;
import java.util.List;

import callbacks.NoteEventListener;
import model.Note;
import utils.NoteUtils;

public class NotesAdapter extends RecyclerView.Adapter<NotesAdapter.NoteHolder> {
    private Context context;
    private ArrayList<Note> notes;
    private NoteEventListener listener;
    private boolean multiCheckMode = false;


    public NotesAdapter(Context context, ArrayList<Note> notes) {
        this.context = context;
        this.notes = notes;
    }


    @NonNull
    @Override
    public NoteHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(context).inflate(R.layout.note_layout, parent, false);
        return new NoteHolder(v);
    }

    @Override
    public void onBindViewHolder(NoteHolder holder, int position) {
        final Note note = getNote(position);
        if (note != null) {
            holder.noteText.setText(note.getNoteText());
            holder.noteDate.setText(NoteUtils.dateFromLong(note.getNoteDate()));
            // init note click event
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    listener.onNoteClick(note);
                }
            });

            // init note long click
            holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    listener.onNoteLongClick(note);
                    return false;
                }
            });

            // check checkBox if note selected
            if (multiCheckMode) {
                holder.checkBox.setVisibility(View.VISIBLE); // show checkBox if multiMode on
                holder.checkBox.setChecked(note.isChecked());
            } else holder.checkBox.setVisibility(View.GONE); // hide checkBox if multiMode off

        }
    }

    @Override
    public int getItemCount() {
        return notes.size();
    }

    private Note getNote(int position) {
        return notes.get(position);
    }


    /**
     * get All checked notes
     *
     * @return Array
     */
    public List<Note> getCheckedNotes() {
        List<Note> checkedNotes = new ArrayList<>();
        for (Note n : this.notes) {
            if (n.isChecked())
                checkedNotes.add(n);
        }

        return checkedNotes;
    }


    class NoteHolder extends RecyclerView.ViewHolder {
        TextView noteText, noteDate;
        CheckBox checkBox;

        public NoteHolder(View itemView) {
            super(itemView);
            noteDate = itemView.findViewById(R.id.note_date);
            noteText = itemView.findViewById(R.id.note_text);
            checkBox = itemView.findViewById(R.id.checkBox);
        }
    }


    public void setListener(NoteEventListener listener) {
        this.listener = listener;
    }

    public void setMultiCheckMode(boolean multiCheckMode) {
        this.multiCheckMode = multiCheckMode;
        if (!multiCheckMode)
            for (Note note : this.notes) {
                note.setChecked(false);
            }
        notifyDataSetChanged();
    }
}

MainActivity

package com.example.mynotes;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.view.ActionMode;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import adapters.NotesAdapter;
import callbacks.MainActionModeCallback;
import callbacks.NoteEventListener;
import db.NotesDB;
import db.NotesDao;
import model.Note;


import static com.example.mynotes.EditNoteActivity.NOTE_EXTRA_Key;

public class MainActivity extends AppCompatActivity implements NoteEventListener {
    private static final String TAG = "MainActivity";
    private RecyclerView recyclerView;
    private ArrayList<Note> notes;
    private NotesAdapter adapter;
    private NotesDao dao;
    private MainActionModeCallback actionModeCallback;
    private int chackedCount = 0;
    private FloatingActionButton fab;
    private SharedPreferences settings;
    public static final String THEME_Key = "app_theme";
    public static final String APP_PREFERENCES="notepad_settings";
    private int theme;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        settings = getSharedPreferences(APP_PREFERENCES, Context.MODE_PRIVATE);
        theme = settings.getInt(THEME_Key, R.style.AppTheme);
        setTheme(theme);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        settings = this.getSharedPreferences("My Data", MODE_PRIVATE);


        // init recyclerView
        recyclerView = findViewById(R.id.notes_list);


        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // add new note
                onAddNewNote();
            }
        });

        dao = NotesDB.getInstance(this).notesDao();
    }


    private void loadNotes() {
        this.notes = new ArrayList<>();
        List<Note> list = dao.getNotes();// get All notes from DataBase
        this.notes.addAll(list);

        String mSortSettings = settings.getString("Sort", "ascending");
        if (mSortSettings.equals("ascending"))  {

                Collections.sort(notes, Note.BY_TITLE_ASCENDING);

        }

        else if (mSortSettings.equals("descending")) {

                Collections.sort(notes, Note.BY_TITLE_DESCENDING);

        }

        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        this.adapter = new NotesAdapter(this, this.notes);
        // set listener to adapter
        this.adapter.setListener(this);

        this.recyclerView.setAdapter(adapter);
        showEmptyView();

        // add swipe helper to recyclerView
        swipeToDeleteHelper.attachToRecyclerView(recyclerView);
    }

    /**
     * when no notes show msg in main_layout
     */
    private void showEmptyView() {
        if (notes.size() == 0) {
            this.recyclerView.setVisibility(View.GONE);
            findViewById(R.id.empty_notes_view).setVisibility(View.VISIBLE);

        } else {
            this.recyclerView.setVisibility(View.VISIBLE);
            findViewById(R.id.empty_notes_view).setVisibility(View.GONE);
        }
    }

    /**
     * Start EditNoteActivity.class for Create New Note
     */
    private void onAddNewNote() {
        startActivity(new Intent(this, EditNoteActivity.class));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        if (id == R.id.action_sort) {
            showSortDialog();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }



    private void showSortDialog () {
        String[] options = {"Ascending", "Descending"};

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Sort by");

        builder.setItems(options, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

                if (which == 0) {
                    SharedPreferences.Editor editor = settings.edit();
                    editor.putString("Sort", "ascending");
                    editor.apply();
                    loadNotes();

                }
                else if (which == 1) {
                    SharedPreferences.Editor editor = settings.edit();
                    editor.putString("Sort", "descending");
                    editor.apply();
                    loadNotes();

                }
            }
        });
        builder.show();
    }



    @Override
    protected void onResume() {
        super.onResume();
        loadNotes();
    }

    @Override
    public void onNoteClick(Note note) {
        // note clicked : edit note
        Intent edit = new Intent(this, EditNoteActivity.class);
        edit.putExtra(NOTE_EXTRA_Key, note.getId());
        startActivity(edit);

    }

    @Override
    public void onNoteLongClick(Note note) {
        // note long clicked : delete 

        note.setChecked(true);
        chackedCount = 1;


        adapter.setMultiCheckMode(true);

        // set new listener to adapter intend off MainActivity listener that we have implement
        adapter.setListener(new NoteEventListener() {
            @Override
            public void onNoteClick(Note note) {


                note.setChecked(!note.isChecked()); // inverse selected
                if (note.isChecked())
                    chackedCount++;
                else chackedCount--;


                if (chackedCount == 0) {
                    //  finish multi select mode wen checked count =0
                    actionModeCallback.getAction().finish();
                }

                actionModeCallback.setCount(chackedCount + "/" + notes.size());
                adapter.notifyDataSetChanged();
            }

            @Override
            public void onNoteLongClick(Note note) {

            }
        });

        actionModeCallback = new MainActionModeCallback() {
            @Override
            public boolean onActionItemClicked(ActionMode actionMode, MenuItem menuItem) {
                if (menuItem.getItemId() == R.id.action_delete_notes)
                    onDeleteMultiNotes();

                actionMode.finish();
                return false;

            }
        };

        // start action mode
        startActionMode(actionModeCallback);
        // hide fab button
        fab.setVisibility(View.GONE);
        actionModeCallback.setCount(chackedCount + "/" + notes.size());
    }

    private void onDeleteMultiNotes() {
        //delete multi notes

        List<Note> chackedNotes = adapter.getCheckedNotes();
        if (chackedNotes.size() != 0) {
            for (Note note : chackedNotes) {
                dao.deleteNote(note);
            }
            // refresh Notes
            loadNotes();
            Toast.makeText(this, chackedNotes.size() + " Note(s) Deleted successfully !", Toast.LENGTH_SHORT).show();
        } else Toast.makeText(this, "No Note(s) selected", Toast.LENGTH_SHORT).show();

        adapter.setMultiCheckMode(false);
    }

    @Override
    public void onActionModeFinished(ActionMode mode) {
        super.onActionModeFinished(mode);

        adapter.setMultiCheckMode(false); // uncheck the notes
        adapter.setListener(this); // set back the old listener
        fab.setVisibility(View.VISIBLE);
    }

    // swipe to right or to left to delete
    private ItemTouchHelper swipeToDeleteHelper = new ItemTouchHelper(
            new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT) {
                @Override
                public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
                    return false;
                }

                @Override
                public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
                    //  delete note when swipe

                    if (notes != null) {
                        // get swiped note
                        Note swipedNote = notes.get(viewHolder.getAdapterPosition());
                        if (swipedNote != null) {
                            swipeToDelete(swipedNote, viewHolder);

                        }

                    }
                }
            });

    private void swipeToDelete(final Note swipedNote, final RecyclerView.ViewHolder viewHolder) {
        new AlertDialog.Builder(MainActivity.this)
                .setMessage("Delete Note?")
                .setPositiveButton("Delete", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // delete note
                        dao.deleteNote(swipedNote);
                        notes.remove(swipedNote);
                        adapter.notifyItemRemoved(viewHolder.getAdapterPosition());
                        showEmptyView();

                        Toast.makeText(MainActivity.this, "Note deleted", Toast.LENGTH_SHORT).show();

                    }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // TODO: 28/09/2018  Undo swipe and restore swipedNote
                        recyclerView.getAdapter().notifyItemChanged(viewHolder.getAdapterPosition());

                    }
                })
                .setCancelable(false)
                .create().show();

    }
}

Model class

package model;

import androidx.room.ColumnInfo;
import androidx.room.Entity;
import androidx.room.Ignore;
import androidx.room.PrimaryKey;

import java.util.Comparator;

@Entity(tableName = "notes")
public class Note {
    @PrimaryKey(autoGenerate = true)
    private int id; // default value
    @ColumnInfo(name = "text")
    private String noteText;
    @ColumnInfo(name = "date")
    private long noteDate;

    @Ignore // we don't want to store this value on database so ignore it
    private boolean checked = false;

    public Note() {
    }


    public static final Comparator<Note> BY_TITLE_ASCENDING = new Comparator<Note>() {
        @Override
        public int compare(Note o1, Note o2) {

            return o1.getNoteText().compareTo(o2.getNoteText()) ;
        }
    };

    public static final Comparator<Note> BY_TITLE_DESCENDING = new Comparator<Note>() {
        @Override
        public int compare(Note o1, Note o2) {

            return o2.getNoteText().compareTo(o1.getNoteText()) ;
        }
    };



    public Note(String noteText, long noteDate) {
        this.noteText = noteText;
        this.noteDate = noteDate;
    }

    public String getNoteText() {
        return noteText;
    }

    public void setNoteText(String noteText) {
        this.noteText = noteText;
    }

    public long getNoteDate() {
        return noteDate;
    }

    public void setNoteDate(long noteDate) {
        this.noteDate = noteDate;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }

    @Override
    public String toString() {
        return "Note{" +
                "id=" + id +
                ", noteDate=" + noteDate +
                '}';
    }
}

Please help me with this




jeudi 23 avril 2020

JQuery | How to display variables when associated checkbox is checked

I'm creating a website that grabs weather information based on the location entered by the user. At the moment there are some features on the page with no functionality, it is still a work in progress. I apologies for the sloppy code.

I have 9 checkboxes at the top of my form that have the info that should be displayed and I'm not sure of the best method to edit the output accordingly.

$(document).ready(function() {
  var inputType = 1;

  $("#Radio1").click(function() {
    $("#lbl1").text("City Name:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';


    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2,}",
      "placeholder": "Regina"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 1;
  });

  $("#Radio2").click(function() {
    $("#lbl1").text("Postal Code:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[A-Z][0-9][A-Z]",
      "placeholder": "S4X"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 2;
  });

  $("#Radio3").click(function() {
    $("#lbl1").text("Latitude:");
    $("#lbl2").text("Longitude:");
    $("#Firstbox").removeAttr("pattern");
    $("#Secondbox").removeAttr("pattern");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "number",
      "min": "-90",
      "max": "90",
      "step": "any",
      "placeholder": "50.4"
    });

    $("#Secondbox").attr({
      "type": "number",
      "min": "-180",
      "max": "180",
      "step": "any",
      "placeholder": "-105.5"
    });

    inputType = 3;
  });

  $("#SearchButton").click(function() {
    if (checkValidity()) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var SearchResponse = this.responseText;

          var obj = JSON.parse(SearchResponse);
          var city_name = obj["name"];
          var country_name = obj["sys"]["country"];
          var longitude = obj["coord"]["lon"];
          var latitude = obj["coord"]["lat"];
          var weather_description = obj["weather"][0]["description"];
          var temp = obj["main"]["temp"] - 273.15;
          var pressure = obj["main"]["pressure"];
          var humidity = obj["main"]["humidity"];
          var wind_speed = obj["wind"]["speed"];
          var wind_direction = obj["wind"]["deg"];
          var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
          var sunset = new Date(obj["sys"]["sunset"] * 1000);

          var SearchResultsHTML = "City: " + city_name + "<br />" +
            "Country: " + country_name + "<br />" +
            "Longitude: " + longitude + "<br />" +
            "Latitude: " + latitude + "<br />" +
            "Weather: " + weather_description + "<br />" +
            "Temperature: " + temp + "<br />" +
            "Pressure: " + pressure + "<br />" +
            "Humidity: " + humidity + "<br />" +
            "Wind Speed: " + wind_speed + "<br />" +
            "Wind Direction: " + wind_direction + "<br />" +
            "Sunrise: " + sunrise.toLocaleTimeString() + "<br />" +
            "Sunset: " + sunset.toLocaleTimeString() + "<br />";

          $("#SearchResults").html(SearchResultsHTML);
        }
      }



      var Firstbox = $("#Firstbox").val();
      var Secondbox = $("#Secondbox").val();

      var apiKey = "52453f34dee0d65b1a41a02656142c6b";

      if (inputType == 1) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?q=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 2) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?zip=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 3) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?lat=" + Firstbox + "&lon=" + Secondbox +
          "&APPID=" + apiKey;
      }

      xhttp.open("GET", SearchString, true);
      xhttp.send();
    }
  });

  function displayError() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid) {
      if (inputType == 1 || inputType == 2) {
        alert("Country code must be 2 characters in length.");
      } else {
        alert("Longitude must be between -180 and 180");
      }
    } else {
      if (inputType == 1) {
        alert("City name must be longer than 1 character.");
      } else if (inputType == 2) {
        alert("Postal code must be 3 characters in length, following the format 'S4X'");
      } else {
        alert("Latitude must be between -90 and 90");
      }
    }
  }

  function checkValidity() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid && second.validity.valid) {
      return true;
    } else {
      displayError();
      return false;
    }
  }

  function checksSelected() {

  }
});
.validated:valid {
  background-color: #BDF0A8;
}

.validated:invalid {
  background-color: #FAC3C9;
}

.row {
  margin-bottom: 10px;
}

.ticksel {
  border: solid black 1px;
}

tr,
td {
  border: solid black 1px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">

<form id="searchForm" method="POST" action="URL">
  <div class="row col-md-12">
    <h2>OpenWeatherMap Weather Search</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h4>Search by:</h4>
      <input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
      <input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
      <input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
    </div>
    <div class="col-md-6">
      <h4>Show in search results:</h4>

      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value="yes"> Longitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Latitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Temperature</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Pressure</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Humidity</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Speed</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Direction</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunrise</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunset</div>
      </div>

    </div>
  </div>
  <div class="row col-md-12">
    <label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
    <label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
    <input id="SearchButton" type="button" value="Search" />
  </div>
</form>

<div class="row col-md-12">
  <h4>Current Weather</h4>
</div>
<div class="row col-md-12">
  <p id="SearchResults"></p>
</div>

<div class="row col-md-12">
  <table width="100%">
    <thead>
      <tr>
        <th>City</th>
        <th>Country</th>
        <th>Longitude</th>
        <th>Latitude</th>
        <th>Weather</th>
        <th>Temperature</th>
        <th>Pressure</th>
        <th>Humidity</th>
        <th>Wind Speed</th>
        <th>Wind Direction</th>
        <th>Sunrise</th>
        <th>Sunst</th>
        <th><a class="deleteAll" href="#">Clear Log</a></th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>