I'm trying to get filtered data from a webform more quickly. Basically I want to use URL input to specify a date and to precheck a checkbox. I'm getting stuck with how to specify the check box as I'm not sure what the value should be.
<form action="/xxx/yyy" class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
####snip and skip to the part of the form I wish to pre-check####
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
So far I'm using URL string: /xxx/yyy?from=2020-03-05 - what would I need next to pre-check the checkbox as well?
Thanks in advance!
Clare
Getting your checkbox checked and also getting value of the checkbox just through URL string is little bit troublesome. But you can try this :
You can assign unique name to the checkbox.
<input class="form-check-input" type="checkbox" name="checkbox_1" id="departureGatewayCheck_AMS">
And then what you can do is pass the value of checkbox through URL string. For example :
/xxx/yyy?from=2020-03-05&checkbox_1=test.
Now, using javascript you can parse URL strings and get your search params, compare it and get your checkbox checked.
<script lang="javascript">
var url_string = window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var c = url.searchParams.get("checkbox_1"); //get the params
if(c == "test") {
document.getElementById("departureGatewayCheck_AMS").checked = true; //checks your checkbox
}
</script>
Hope it helps ! Have a good day!
I think all you need to do is add a (checked="true") argument to your input tag your code should look like this then:
<div class="form-check">
<input class="form-check-input" checked="true" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
Hope this helps
If you want to make the checkbox departureGatewayCheck_AMS checked by default, it is sufficient to edit its code like this:
<input class="form-check-input" type="checkbox" value="AMS" name="departureGatewayCheck_AMS" id="departureGatewayCheck_AMS" checked> AMS
If the checkbox is selected, since its "value" attribute is "AMS",your url (if you submit the form via GET) would be something like:
/xxx/yyy?from=2020-03-05&departureGatewayCheck_AMS=AMS
Complete solution for your requirement:-
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<div class="container">
<form class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" name="checkname" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function () {
var url_string = "https://www.example.com/page?from=2020-12-12&checkname=1";//window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var date=url.searchParams.get("from");
var check = url.searchParams.get("checkname"); //get the params
alert(date);
alert(check);
if(check) {
$( "#departureGatewayCheck_AMS" ).prop( "checked", true );
}
$('.datetimepicker-input').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: date,
});
});
</script>
Related
Making a crud app with Node and Mongo.
While updating a user the API is not able to POST the data and returning an error in the browser Cannot POST /update-user
I am able to add a user, but while updating the user it is returning an error.
This is my Add user page:
<!-- include header -->
<%- include('include/_header') %>
<!-- /include header -->
<!--Main site-->
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<i class='fas fa-angle-double-left'></i>All Users
</div>
</div>
<div class="form-title text-center">
<h2 class='text-dark'>New User</h2>
<span class='text-light'>Use the form below to create a new account</span>
</div>
<!-- add user form -->
<%- include('include/_form') %>
</div>
</main>
<!--Main site-->
<!-- include footer -->
<%- include('include/_footer') %>
<!-- /include footer -->
This is the footer:
<script src="<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../../assets/js/index.js"></script>
</body>
</html>
This is the Index.js connected to the footerL:
$("#add_user").submit(function(event){
alert("Data inserted successfully");
})
$("#update_user").submit(function(event){
event.preventDefault();
var unindexed_array = $(this).serializeArray();
var data = {}
$.map(unindexed_array, function(n, i){
data[n['name']] = n['value']
})
})
This is the index.js connected to the footer:
$("#add_user").submit(function(event){
alert("Data inserted successfully");
})
$("#update_user").submit(function(event){
event.preventDefault();
var unindexed_array = $(this).serializeArray();
var data = {}
$.map(unindexed_array, function(n, i){
data[n['name']] = n['value']
})
})
This is the Update user form:
<!-- include header -->
<%- include('include/_header') %>
<!-- /include header -->
<!-- Main Site -->
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<i class="fas fa-angle-double-left"></i> All Users
</div>
</div>
<div class="form-title text-center">
<h2 class="text-dark">Update User</h2>
<span class="text-light">Use the below form to Update an account</span>
</div>
<!-- add user form -->
<!-- form handling -->
<form method="POST" id="update_user">
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value="<%= user._id %>">
<input type="text" name="name" value="<%= user.name %>" placeholder="Mark Stoenis">
</div>
<div class="form-group">
<label for="Email" class="text-light">Email</label>
<input type="text" name="email" value="<%= user.email%>" placeholder="example#gmail.com">
</div>
<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male" <%= user.gender == 'Male' ? 'checked' : '' %>>
<label for="radio-2" class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-3" name="gender" value="Female" <%= user.gender == 'Female' ? 'checked' : '' %> >
<label for="radio-3" class="radio-label">Female</label>
</div>
</div>
<div class="form-group">
<label for="gender" class="text-light">Status</label>
<div class="radio inline">
<input type="radio" id="radio-4" name="status" value="Active" <%= user.status == 'Active' ? 'checked' : '' %> >
<label for="radio-4" class="radio-label">Active</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-5" name="status" value="Inactive" <%= user.status == 'Inactive' ? 'checked' : '' %> >
<label for="radio-5" class="radio-label">Inactive</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn text-dark update">Save</button>
</div>
</div>
</form>
</div>
</main>
<!-- /Main Site -->
<!-- include footer -->
<%- include('include/_footer') %>
<!-- /include footer -->
I see the following HTML code when I import it from website throught selenium. The ids I want to access are hidden inside the body and I am not able to access them using Selenium Python.
</head>
<!--[if IE 9]>
<body style="display:none" class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body style="display:none">
<!--<![endif]-->
This is the code I see in the website through inspect option.
<form action="" method="post" class="form login col-sm-6 col-sm-offset-3" data-stage="DataStore1">
<fieldset class="row">
<div class="form-group">
<label class="sr-only separator" for="idToken1">
<span>Benutzername</span>
</label>
<input type="text" id="idToken1" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup" class="form-control input-lg" placeholder="Benutzername" autofocus="">
</div>
<div class="form-group">
<label for="idToken2" class="aria-label sr-only separator">
<span>Passwort</span>
</label>
<input type="password" id="idToken2" name="callback_1" class="form-control input-lg" placeholder="Passwort" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="remember-forgot clearfix">
<div class="checkbox pull-left">
<label for="remember"><input type="checkbox" name="loginRemember" id="remember"> Remember my username</label>
</div>
</div>
<div class="form-group">
<input id="loginButton_0" name="callback_2" type="submit" role="button" index="0" value="Log in" class="btn btn-lg btn-block btn-uppercase btn-primary">
</div>
ch license between the licensee and ForgeRock AS.
</fieldset>
</form>
I am using Chrome webdriver.
from selenium import webdriver
driver = webdriver.Chrome(r'C:\WebDriver\bin\chromedriver.exe')
driver.get('https://app.int.eu.acdc.fdc.swarm.audi/goldenalgo#dario/data-distribution')
a = driver.find_element_by_id("idToken1")
a.send_keys(username)
print(w.value_of_css_property("display"))
print(driver.page_source)
time.sleep(5)
driver.find_element_by_id('idToken2').send_keys(password)
driver.find_element_by_id('loginButton_0').click()
driver.close()
driver.find_element_by_id("idToken1") this doesn't work and returns the error "unable to find element with css selector error in selenium".
Thanks in advance
I am working on one app in which i have to add all the form input data in csv file.Instead of Django forms i used normal bootstrap forms and accessing form input data using request.GET[]. everything works fine but radio and date input not working and getting this error MultiValueDictKeyError at /abc/.
here is my code
views.py
from django.http import HttpResponse
#from django.templatetags.static import static
from django.shortcuts import render
#from django.contrib.staticfiles.templatetags.staticfiles import static
import csv
from csv import writer
def index(request):
return render(request, 'filedata/home.html')
def abc(request):
if request.method == "GET":
sid = request.GET['sid']
sname = request.GET['sname']
gender = request.GET['gender']
dob = request.GET['dob']
city = request.GET['city']
state = request.GET['state']
email = request.GET['email']
quali = request.GET['quali']
stream = request.GET['stream']
alist = [sid, sname, gender, dob, city, state, email, quali, stream ]
print(alist)
# Open file in append mode
with open('students.csv', 'a+', newline='') as write_obj:
# Create a writer object from csv module
csv_writer = writer(write_obj)
# Add contents of list as last row in the csv file
csv_writer.writerow(alist)
print("Added Successfully!!!")
print(sid)
flist = []
flist.append({'sid':sid})
flist.append({'sname':sname})
flist.append({'gender':gender})
flist.append({'dob':dob})
flist.append({'city':city})
flist.append({'state':state})
flist.append({'email':email})
flist.append({'quali':quali})
flist.append({'stream':stream})
return render(request, 'filedata/abcd.html', {"flist": flist})
home.html
<!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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked form</h2>
<form action="/abc" method="get" name="myForm" enctype="multipart/form-data">
<div class="form-group">
<label for="sid">Student ID</label>
<input type="text" class="form-control" id="sid" placeholder="Enter Student ID" name="sid">
</div>
<div class="form-group">
<label for="sname">Student Name</label>
<input type="text" class="form-control" id="sname" placeholder="Enter Student Name" name="sname">
</div>
<label for="gender">Gender</label>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="male" value="male" name="gender">Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="female" value="female" name="gender">Female
</label>
</div>
<div class="form-group">
<label for="dob">Date Of Birth</label>
<input class="form-control" type="date" value="2011-08-19" id="dob">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="Enter City" name="city">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="Enter State" name="state">
</div>
<div class="form-group">
<label for="email">Email ID</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="quali">Qualification</label>
<input type="text" class="form-control" id="quali" placeholder="Enter Qualification" name="quali">
</div>
<div class="form-group">
<label for="stream">Stream</label>
<input type="text" class="form-control" id="stream" placeholder="Enter stream" name="stream">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
You are missing name="dob" attribute on date so it is not sent in form, also radio should have alternating value="male" or value="female" with name="gender" attribute to be sent properly.
You can always inspect network tab in browser to see if data is sent accordingly
Hello I need to put searching option and value in the URL. I know it's very basic but I have never implement the search function before ever always used the templates one but this time I need to use it. below is my code please help me.
Right now I am getting this in the link
list/%7Boption%7D/%7Bvalue%7D
but I want this in the link list/Hello/thisishelloworld or this may be list/option?Hello/value?thisishelloworld but I think I can get the second option using Get instead of Post method
AND YA ITS IN LARAVEL 5.2
<center>
<div class="form-group">
<label>Select your option from below</label>
<select class="form-control" id="options" name="options" style="width:100%" type="checkbox">
<option>Hello</option>
<option>World</option>
<option>it's Me</option>
</select>
</div>
<div class="col-md-4" id="value">
<div class="panel panel-warning">
<div class="panel-heading">
Enter your Search below
</div>
<form role="form" action="/list/{option}/{value}" method="post">
{{ csrf_field() }}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="{{ value }}" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
</div>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function hide() {
$("#value").hide();
$("#h").hide();
$("#search").hide();
}
function show() {
$("#value").show();
$("#h").show();
$("#search").show();
}
function initHandlers() {
$("#options").change(function() {
show();
});
}
hide();
initHandlers();
</script>
Laravel 5. 2
Step 1:
First you have to create a route.
Routes.php :
Route::get('/list', function(){
// do process
})->name('search');
HTML :
something.blade.php :
{!! Form::open('search', ['route' => 'search', 'method' => 'GET']) !!}
<div class="form-group has-success">
<input class="form-control" placeholder="Search" type="text" name="search" id="value">
<input type="submit" class="btn btn-primary" name="submit" value="Search">
</div>
</form>
I have following html code and it gives me a page like attached screen shot. I wanted to fix the search glyphicon to be at the right end corner along with the search box.
Code here:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hello World</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome</li>
<li>Login</li>
<li>Signup</li>
<li>
<form class="navbar-form" role="search"> <li>
<input type="text" class="form-control" placeholder="Search"></li>
<li>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button></li>
</form>
<li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<form>
<fieldset class='textbox' style="padding:10px">
<input style="margin-top: 8px" type="text" placeholder="Username" /><br/>
<input style="margin-top: 8px" type="password" placeholder="Passsword" /><br/><br/>
<input class="btn btn-primary" name="commit" type="submit" value="Log In" />
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Can someone help to resolve this?
Thanks
Use form-group..
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
Demo: http://bootply.com/78702