I'm trying to make a joke generator. The user can choose between Programming, Miscellaneous and Dark jokes (or two / all of them but cannot choose none). Right now, for my Javascript and HTML, I have this:
$("#first-input").val("Programming");
$("#middle-input").val("Miscellaneous");
$("#bottom-input").val("Dark");
let checkboxes = $(".content-top input[type=checkbox]");
let submitButton = $("button[type=submit]");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
The HTML I have right now are three checkboxes with the same name attribute, but with different values set (values were set in Javascript above). How do I use jQuery to make it so that once the submit button is clicked, there is an array, and the items in the array are the ones the user checked?
So for example:
If the user selects the "Programming", "Miscellaneous" and "Dark" check boxes, the array would have the 3 items (the three items would be "Programming", "Miscellaneous" and "Dark"). Then if the user proceeds to uncheck the "Dark" checkbox (so now only the "Programming" and "Miscellaneous" checkboxes are checked), the array would also remove the "Dark" item and would now only have 2 items.
I've been trying a lot of things and searching on Google, and tried using "input:checked", is(), etc. but I couldn't figure out how to get it to work.
Question:
How do I get an array, and the items in the array are the values of the checkboxes the user checked (e.g. "Programming", "Dark", etc.) with no repeats, and if the user, for example, initially selected all three checkboxes, and then proceeds to uncheck the "Dark" checkbox, the array should also remove "Dark" as one of it's items.
I've been stuck on this for hours and would really appreciate any help, thanks!
First, change your checkboxes to declare their values in the HTML:
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
Add the following onclick attribute to your submit button:
<button type="submit" onclick="submit(event)">Generate Joke</button>
Then add the following script tag after your inclusion of jQuery:
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I added the event.preventDefault() thing so that the form doesn't actually send anything to the server. It seems like you'll need that if you want to do things in JS first.
The whole thing should look like this:
<form id="form" action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit" onclick="submit(event)">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I don't think you need those few lines of JS at the top of your question.
Add the value attribute to your inputs then get all checkboxes iterate through them then push the values to the array, the elements in the array will be removed each time you click submit which means you will always get the new values checked by the user pushed to the result array
results = []
let submitButton = $("button[type=submit]");
submitButton.click(function(e) {
var $checkboxes = $('input[name=category]:checked');
e.preventDefault()
results.splice(0,results.length)
$checkboxes.each(function(){
results.push($(this).val())
});
console.log(results)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top" id="checkb">
<input type="checkbox" name="category" id="first-input" value="Programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="Miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="Dark Jokes">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I don't do jQuery for years, but if you want to sent an array you have to ending element's names with [] and set a value for each.
here it is in javascript
const DomParser = new DOMParser()
, myForm = document.getElementById('my-form')
;
function newCategory(val)
{
let elm = `<input type="hidden" name="category[]" value="${val}">`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
myForm.oninput=()=>
{
while (el=myForm.querySelector('input[name="category[]"]')) el.remove();
myForm.querySelectorAll('input[data-category]:checked').forEach(el=>
{
myForm.appendChild( newCategory( el.dataset.category ) )
})
}
label, button {
display: block;
float: left;
clear: both;
}
button { margin-top: 1em;}
<form id="my-form" action="/joke" method="POST">
<label>
<input type="checkbox" data-category="Programming">
Programming
</label>
<label>
<input type="checkbox" data-category="Miscellaneous">
Miscellaneous
</label>
<label>
<input type="checkbox" data-category="Dark Jokes">
Dark Jokes
</label>
<button type="submit">Generate Joke</button>
</form>
Using Hta i want data from web page to hta text Box. Below is the code which i am trying to create but i have no clue how to call data from web page to hta text box.
<html>
<head>
<title>My HTML Application</title>
<script language="vbscript">
urls=("https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=")
Sub RunLoop()
window.navigate urls
End Sub
</script>
</head>
<body>
<input type="button" value="Click" onclick="RunLoop">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
</body>
</html>
The data which i require from webpage.
The output which i require in hta.
Using window.ActiveXObject("Microsoft.XMLHTTP"), we get the whole webpage and assign it to an invisible/hidden div (for simplicity). Note that this may result to unwanted styling because of the webpage's own global styling. A better way to do it is to open the webpage on a separate IE.
HTAs default engine is IE7 so we needed to insert meta http-equiv="x-ua-compatible" content="ie=9" in order to support the getElementsByClassName functionality because the data that we want to get from 99acres.com was referenced by class.
Copy the code below to notepad and save it as xxx.hta:
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=9">
<title>My HTML Application</title>
<script language="javascript">
var url= "https://www.99acres.com/shri-laxmi-celebration-residency-sector-2b-vasundhara-ghaziabad-npxid-r63907?src=NPSRP&sid=UiB8IFFTIHwgUyB8IzEjICB8IG5vaWRhIzUjIHwgQ1AxMiB8IFkgIzE4I3wgIHwgMTIgfCMzIyAgfCA3ICM1I3wgIHwgMjMgfCM0MyMgIHw=";
var xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
function httpGet(theUrl){
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function RunLoop() {
var data = httpGet(url);
document.getElementById("tempdiv").innerHTML = data;
document.getElementsByName("Possession")[0].value = document.getElementsByClassName("factVal1")[0].innerHTML;
document.getElementsByName("Configurations")[0].value = document.getElementsByClassName("factVal1")[1].innerHTML;
document.getElementsByName("New Booking Base Price")[0].value = document.getElementsByClassName("factValsecond")[0].innerHTML;
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="javascript:RunLoop();">
Possession:
<input type="text" name="Possession" Value="">
Configurations:
<input type="text" name="Configurations" Value="">
New Booking Base Price:
<input type="text" name="New Booking Base Price" Value="">
<div id="tempdiv" style="display:none;visibility:hidden;height:0px">
</div>
</body>
</html>
I have created a HTML code to build an user form that will contain information that people write inside the texts. This page also has a button that should take all the entered information and convert it into a json file.
I have never done this before, so I have no idea how I can do that. As far as I read, I understand that I need a local server to send the html code to it so it can return the json, but the process to do this is absolutely unclear for me.
My code in html is this:
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post">
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>
Then, when I click on the button "Get my data" it does nothing.
Can you give me the process to capture the json from this?
Many thanks!
As you did not mention any specific JSON structure I think below code will work for you. You will have to customize based on your needs.
I will recommend you to find and check different javascript libraries and see what suits you best for your client side application.(jQuery is easiest to learn)
Also check if it is a REST server. Based on that decide on your client side javascript framework. (Angular is good choice for REST based applications)
function onSubmitForm( myForm ){
var formjson = JSON.stringify( $(myForm).serializeArray() ); // <-----------
console.log( formjson );
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post" class="myform" onsubmit='return onSubmitForm(this)'>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>
I"m trying to list the days shown in the current view as options inside a select tag (for example if the current view has Sun Aug 13th through Sat Aug 19th, then each of those days would appear as part of the select dropdown).
On the client-side I can get the min and max days of the current view via scheduler.getState().min_date and scheduler.getState().max_datebut I'm not sure how to get this same information inside my EJS tempalte below and iterate over the days:
<!doctype html>
<head>
<title>MealMate</title>
<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 19;
scheduler.config.start_on_monday = false;
scheduler.init('scheduler_here',"","week");
scheduler.templates.xml_date = function(value) { return new Date(value); };
scheduler.load("/calendar/data", "json");
var dp = new dataProcessor("/calendar/data");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div class="ui form" id="addForm">
<div class="inline field">
<label for="date">Date:</label>
<select class="ui dropdown" name="date" id="date">
<option selected disabled hidden>Choose one</option>
//ITERATION OF DAYS IN CURRENT VIEW HERE//
</select>
</div>
<div class="inline fields">
<input type="button" name="save" value="Save" id="save" style='width:100px;' onclick="save_form()">
<input type="button" name="close" value="Close" id="close" style='width:100px;' onclick="close_form()">
<input type="button" name="delete" value="Delete" id="delete" style='width:100px;' onclick="delete_event()">
</div>
</div>
<div id="scheduler_here" class="dhx_cal_container">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
<div class="dhx_cal_tab ui blue button" id="addButton" name="add"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
<script src="/calendarLogic.js"></script>
</body>
if I try to do something like this <%= scheduler.getState().min_date %> I get scheduler is undefined.
I'm not sure if you can do it at the template level. I think the simplest solution would be to have an empty element in the template and populate it with options using client-side JS.
Try capturing onViewChange or onBeforeViewChange events of scheduler - they fire when the user changes scheduler view or date. Inside the handler, you can get the displayed date range and generate options for your dropdown.
You can use scheduler.date helper in order to iterate over days, here is a demo (see HTML tab):
http://snippet.dhtmlx.com/afbdc33fb
related API:
https://docs.dhtmlx.com/scheduler/api__scheduler_onviewchange_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforeviewchange_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_date_other.html
Hi guys I am having trouble getting value from the calendar picker.
I want to chose a date from the calendar (with id Date_of_Birth) and assign the date say 12/11/2013 to the textbox txtDate.
How do I do this? My code is as follows
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: < script type="text/javascript" src="http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" name="Date_of_Birth" id="Date_of_Birth"></script><br>
<input type="text" id="txtDate" name="txtDate"
<input type="submit" value="Submit">
</form>
</body>
</html>
The first problem is you did not include "http://www.snaphost.com/jquery/Calendar.aspx?dateFormat=dd/mm/yy" correctly. This script creates a calendar and does not work the way you want it to. From the code I could see this library uses jQueryUI.
Instead of using the aspx url, include the jQueryUI library separately:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form name="myForm" action="displayDate.html" method="post">
Date of Birth: <input type="text" id="txtDate" name="txtDate"/>
<input type="submit" value="Submit"/>
</form>
To bind a datepicker to the txtDate use:
$(function() {
$( "#txtDate" ).datepicker();
});
See the working example: http://jsfiddle.net/2zdgz/