teleren/devto huggingface dataset:
PHP Javascript form formData 45: input text textarea select-multiple using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 14:49:53

<hr />

<center>Happy Coding</center>

<hr />

index.php

```javascript
<form method="post" action="process.php" >

	Firstname: <input type="text" name="firstname" />
	<br />

	Lastname: <input type="text" name="lastname" />
	<br />

	Description: <textarea name="description" rows="10" cols="50" ></textarea>
	<br />

	Programming Languages (multiple): (hold ctrl + click item)
	<select name="languages[]" multiple >
		<option value="c" >C</option>
		<option value="c++" selected >C++</option>
		<option value="java" >Java</option>
		<option value="javascript" selected >Javascript</option>
		<option value="php" >PHP</option>
	</select>
	<br />

	<hr />

	<input type="submit" value="Submit" />

</form>
```

display result form server

```javascript
<div id="output"></div>
```		

get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output") 

```javascript
<script>

	/* submit form */
	document.querySelector( "form" ).addEventListener( "submit", function (event) {

		event.preventDefault(); // return false


		var formHTML = event.target; // this

		console.log( formHTML ); // formHTML element


		// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
		var formData = new FormData( formHTML );

		console.log( formData );


		// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
		// https://www.w3schools.com/xml/xml_http.asp
		// https://www.w3schools.com/js/js_ajax_http.asp

		/* AJAX request */
		ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

	});

</script>
```

ajax function

```javascript
<script>

	function ajax( form, data, destination )
	{

		if (window.XMLHttpRequest)
		{
			var xhr = new XMLHttpRequest(); /* code for modern browsers */
		}
		else
		{
			var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
		}

		xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
		xhr.send( data );

		xhr.onreadystatechange = function () {
			if ( this.readyState == 4 && this.status == 200 )
			{
				document.querySelector( destination ).innerHTML = this.responseText;
			}
		};

	}

</script>
```

<hr />

process.php

```javascript
echo "<pre>";

var_dump($_POST);

echo "</pre>";
```

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-45" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-45.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>
PHP Javascript form formData 40: input text textarea select using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 14:43:31

<hr />

<center>Happy Coding</center>

<hr />

index.php

```javascript
<form method="post" action="process.php" >

	Firstname: <input type="text" name="firstname" />
	<br />

	Lastname: <input type="text" name="lastname" />
	<br />

	Description: <textarea name="description" rows="10" cols="50" ></textarea>
	<br />

	Programming Language (single):
	<select name="language" >
		<option value="c" >C</option>
		<option value="c++" >C++</option>
		<option value="java" >Java</option>
		<option value="javascript" selected >Javascript</option>
		<option value="php" >PHP</option>
	</select>
	<br />

	<hr />

	<input type="submit" value="Submit" />

</form>
```

display result form server

```javascript
<div id="output"></div>
```	

get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output") 

```javascript
<script>

	/* submit form */
	document.querySelector( "form" ).addEventListener( "submit", function (event) {

		event.preventDefault(); // return false


		var formHTML = event.target; // this

		console.log( formHTML ); // formHTML element


		// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
		var formData = new FormData( formHTML );

		console.log( formData );


		// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
		// https://www.w3schools.com/xml/xml_http.asp
		// https://www.w3schools.com/js/js_ajax_http.asp

		/* AJAX request */
		ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

	});

</script>
```

ajax function

```javascript
<script>

	function ajax( form, data, destination )
	{

		if (window.XMLHttpRequest)
		{
			var xhr = new XMLHttpRequest(); /* code for modern browsers */
		}
		else
		{
			var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
		}

		xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
		xhr.send( data );

		xhr.onreadystatechange = function () {
			if ( this.readyState == 4 && this.status == 200 )
			{
				document.querySelector( destination ).innerHTML = this.responseText;
			}
		};

	}

</script>
```

<hr />

process.php

```javascript
echo "<pre>";

var_dump($_POST);

echo "</pre>";
```

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-40" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-40.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>
PHP Javascript form formData 30: input text textarea radio using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 14:33:15

<hr />

<center>Happy Coding</center>

<hr />

index.php

```javascript
<form method="post" action="process.php" >

	Firstname: <input type="text" name="firstname" />
	<br />

	Lastname: <input type="text" name="lastname" />
	<br />

	Description: <textarea name="description" rows="10" cols="50" ></textarea>
	<br />

	Gender:
	<input type="radio" name="gender" value="male" checked /> Male
	<input type="radio" name="gender" value="female" /> Female
	<br />

	<hr />

	<input type="submit" value="Submit" />

</form>
```

display result form server

```javascript
<div id="output"></div>
```

get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output") 

```javascript
<script>

	/* submit form */
	document.querySelector( "form" ).addEventListener( "submit", function (event) {

		event.preventDefault(); // return false


		var formHTML = event.target; // this

		console.log( formHTML ); // formHTML element


		// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
		var formData = new FormData( formHTML );

		console.log( formData );


		// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
		// https://www.w3schools.com/xml/xml_http.asp
		// https://www.w3schools.com/js/js_ajax_http.asp

		/* AJAX request */
		ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

	});

</script>
```

ajax function

```javascript
<script>

	function ajax( form, data, destination )
	{

		if (window.XMLHttpRequest)
		{
			var xhr = new XMLHttpRequest(); /* code for modern browsers */
		}
		else
		{
			var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
		}

		xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
		xhr.send( data );

		xhr.onreadystatechange = function () {
			if ( this.readyState == 4 && this.status == 200 )
			{
				document.querySelector( destination ).innerHTML = this.responseText;
			}
		};

	}

</script>
```

process.php

```javascript
echo "<pre>";

var_dump($_POST);

echo "</pre>";
```

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-30" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-30.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>
PHP Javascript form formData 20: input text textarea  using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 14:30:39

<hr />

<center>Happy Coding</center>

<hr />

index.php

```javascript
<form method="post" action="process.php" >

	Firstname: <input type="text" name="firstname" />
	<br />

	Lastname: <input type="text" name="lastname" />
	<br />

	Description: <textarea name="description" rows="10" cols="50" ></textarea>
	<br />

	<hr />

	<input type="submit" value="Submit" />

</form>
```

display result form server

```javascript
<div id="output"></div>
```

get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output") 

```javascript
<script>

	/* submit form */
	document.querySelector( "form" ).addEventListener( "submit", function (event) {

		event.preventDefault(); // return false


		var formHTML = event.target; // this

		console.log( formHTML ); // formHTML element


		// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
		var formData = new FormData( formHTML );

		console.log( formData );


		// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
		// https://www.w3schools.com/xml/xml_http.asp
		// https://www.w3schools.com/js/js_ajax_http.asp

		/* AJAX request */
		ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

	});

</script>
```

ajax function

```javascript
<script>

	function ajax( form, data, destination )
	{

		if (window.XMLHttpRequest)
		{
			var xhr = new XMLHttpRequest(); /* code for modern browsers */
		}
		else
		{
			var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
		}

		xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
		xhr.send( data );

		xhr.onreadystatechange = function () {
			if ( this.readyState == 4 && this.status == 200 )
			{
				document.querySelector( destination ).innerHTML = this.responseText;
			}
		};

	}

</script>
```

process.php

```javascript
echo "<pre>";

var_dump($_POST);

echo "</pre>";
```

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-20" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-20.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>
PHP Javascript form formData 10: input text using ajax (XMLHttpRequest)
Tags: php, javascript, form, xmlhttprequest
Published: 2019-12-15 14:27:26

<hr />

<center>Happy Coding</center>

<hr />

index.php

```javascript
<form method="post" action="process.php" >

	Firstname: <input type="text" name="firstname" />
	<br />

	Lastname: <input type="text" name="lastname" />
	<br />

	<hr />

	<input type="submit" value="Submit" />

</form>
```

Display result form server

```javascript
<div id="output"></div>
```

Get formHTML element and add onsubmit event, and create formData, then call ajax function with arguments formHTML, formData and output display ("#output") 

```javascript
<script>

	/* submit form */
	document.querySelector( "form" ).addEventListener( "submit", function (event) {

		event.preventDefault(); // return false


		var formHTML = event.target; // this

		console.log( formHTML ); // formHTML element


		// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
		var formData = new FormData( formHTML );

		console.log( formData );


		// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
		// https://www.w3schools.com/xml/xml_http.asp
		// https://www.w3schools.com/js/js_ajax_http.asp

		/* AJAX request */
		ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

	});

</script>
```

ajax function

```javascript
<script>

	function ajax( form, data, destination )
	{

		if (window.XMLHttpRequest)
		{
			var xhr = new XMLHttpRequest(); /* code for modern browsers */
		}
		else
		{
			var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
		}

		xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
		xhr.send( data );

		xhr.onreadystatechange = function () {
			if ( this.readyState == 4 && this.status == 200 )
			{
				document.querySelector( destination ).innerHTML = this.responseText;
			}
		};

	}

</script>
```

<hr />

process.php

```javascript
echo "<pre>";

var_dump($_POST);

echo "</pre>";
```

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/Javascript-form-formData-10" >Editor</a></li>
  <li><a href="https://Javascript-form-formData-10.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>
React Interview Questions
Tags: react, javascript, interview, redux
Published: 2019-12-15 14:12:04

![React.js Interview Questions and Answers](https://thepracticaldev.s3.amazonaws.com/i/6bmwl3rd7xi6ohw5xj3f.png)

###Q:- What is React.js?
#####React js is an open-source JavaScript library created by Facebook for building complex and interactive UI in web and mobile applications.

###Q:- What are the features of React.js?
Major features of React are listed below:

1. Virtual DOM: It uses the Virtual DOM instead of the real DOM.
2. Server-Side Rendering: It uses Server-side rendering (SSR).
3. Uni-Directional: It follows Uni-directional data flow or data binding.
4. Components: It uses reusable UI components.

###Q:- How to Install React.js using Create React App?
#####Step-1: First, install react app creator.

For Windows:
> npm install -g create-react-app

For Linux and Mac:
> sudo npm install -g create-react-app

#####Step-2: Now, create a your project using react app.
> create-react-app myFirstReactProject

#####Step-3: Now, go to the project folder & start the your app/project.
> cd myFirstReactProject
> npm start

###Q:- What are props in React?
props are immutable passed into react components.

###Q:- What is state in React?
State of a component is an object that holds some information that may change over the lifetime of the component.

####Changing the state Object:
use this.setState() method to change the state.
Whenever you will change the state, the component will be re-render.

####Important Tips:
Never use this.setState() method inside the render.
If you will use this.setState() inside componentWillUnmount(), component will not be re-render.


###Q:-  What are Components?
#####Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

There are mainly two types of Components:
1. Functional Component (Stateless Component) - Only props, no state
2. Class Component (Stateful Component) - Both props and state.

###Q:- What is Reconciliation?
Reconciliation is the process through which React updates the DOM.

Read the Complete Article [React.js Interview Questions & Answers](https://www.fullstacktutorials.com/interviews/react-js-interview-questions-answers-31.html)
Turing: thesis, machine, completeness
Tags: cs, algorithms, mindmap
Published: 2019-12-15 18:58:12

---
title: Turing: thesis, machine, completeness
published: true
date: 2019-12-15 14:01:47 UTC
tags: cs, algorithms, mindmap
canonical_url: https://vorakl.com/articles/turing/
cover_image: https://vorakl.com/files/turing/turing-thesis.png
---

Alan Turing is one of the pioneers of the computability theory and logic formalization. He came up with the hypothesis of which algorithms can be implemented and computed by machines ([Turing's thesis](https://en.wikipedia.org/wiki/Church%E2%80%93Turing_thesis)), created an abstract model of such machine ([Turing machine](https://stackoverflow.com/a/127831/5673383)), and described absolutely vital abilities of any system for being able to realize any logic that can be computed([Turing completeness](https://www.youtube.com/watch?v=RPQD7-AOjMI)).

  

Turing's thesis is only one of the existing formal systems in the computability theory. There are also λ-calculus, Markov algorithms, but they all were implemented on the Turing Machine that is used at this time as a general computational model to classify which real-world systems (mostly programming languages) are able to compute mathematical functions or implement algorithms.

  

All existing computability theories are defined on discrete values, and the domain is the set of [Natural numbers](https://dev.to/vorakl/number-classification-im6).

  

I prepared several mindmaps to summarize basic ideas and statements:

- **Turing's thesis** :
[![Turing's thesis](https://vorakl.com/files/turing/turing-thesis.png)](https://vorakl.com/files/turing/turing-thesis.png)

  

- **Turing machine** :
[![Turing machine](https://vorakl.com/files/turing/turing-machine.png)](https://vorakl.com/files/turing/turing-machine.png)

  

- **Turing completeness** :
[![Turing completeness](https://vorakl.com/files/turing/turing-completeness.png)](https://vorakl.com/files/turing/turing-completeness.png)
AWS: AppSync with Lambda Resolver for MongoDB using DotNet core
Tags: aws, mongodb, dotnetcore
Published: 2019-12-15 13:02:45


In this article, we will learn how to create an AppSync API with the Lambda function. I will show you how a lambda function is written using the Dotnet core that performs business logic based on invoking graphical field operation. AppSync enables us to use AWS Lambda to resolve any graphing field.

<b>Technology</b>
Framework- Visual studio 2019
DotNet core and backend database MongoDB

<b>Prerequisites</b>
You should have the basic knowledge of .Net Core with C#, Visual Studio, and NoSQL database understanding will be additional.

This article divided into three parts.
Part 1- Lambda Function development using DotNet core.
Part 2- Deployment on AWS
Part 3 – AppSync API
For more click here https://www.codefari.com/2019/12/aws-appsync-with-lambda-resolver-for.html
3 best-read resources in Svelte Status #19
Tags: svelte, javascript, typescript, frontend
Published: 2019-12-15 12:38:54

---
title: 3 best-read resources in Svelte Status #19
published: yes
description: Weekly curated blogs and tools for Svelte developers. 
tags: svelte, javascript, typescript, frontend
---

<img src="https://miro.medium.com/max/1163/1*LXuIRbr5od_Mbg_S7MTtRA.png" />

<h3><strong><a href="https://www.learnwithjason.dev/let-s-learn-svelte/">1. Let’s learn Svelte! (with Rich Harris)</a></strong></h3>

<p><strong>80 minutes —</strong> Svelte compiles code to framework-less vanilla JavaScript. In this episode, Svelte‘s creator Rich Harris teaches us what that means and how we can get started with Svelte today! <i>By Jason Lengstorf & Rich Harris.</i></p>

<h3><strong><a href="https://medium.com/javascript-in-plain-english/why-svelte-wont-kill-react-3cfdd940586a">2. Why Svelte won’t kill React</a></strong></h3>
<p><strong>14 minutes —</strong> It’s not a pro-Svelte perspective. But it does let us think about the pros and cons of Svelte. Author Kit Isaev puts question marks behind the necessity of increasing performance, and the developer experience of Svelte. <i>By Kit Isaev.</i></p>

<h3><strong><a href="https://vanillajstoolkit.com/">3. The Vanilla JavaScript Toolkit</a></strong></h3>
<p><strong>4 minutes —</strong>A growing collection of vanilla JavaScript code snippets, helper functions, polyfills, plugins, and learning resources. <i>By Chris Ferdinandini.</i></p>

<h2><strong>About Svelte Status</strong></h2>
<p><a href="https://getrevue.co/profile/svelte">Svelte Status</a> is a mailing consisting of the latest blogs and tools curated for Svelte pros. I’m <a href="https://github.com/marlosin">Marlos</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Svelte devs? Reach out to me via marlos at sveltestatus.com. </p>
Getting Referrals at big tech companies
Tags: career, opensource, github
Published: 2019-12-15 12:15:03

Hey Everyone! We made a spreadsheet for tech referrals at big companies to get you an interview.. It would be great if anyone is willing to add their name and offer referrals for your current or previous companies!

github link : https://github.com/rubayet170746/Tech-Referrals

web version : https://bit.ly/2rNPljY
Tricky JavaScript Interview Problem
Tags: javascript, typescript, career, webdev
Published: 2019-12-15 12:11:43

Do you know the answer to this tricky javascript interview problem about objects and their properties?
Even if you correctly guess the answer, do <b>watch till the end</b> because I also talk about a new and <b>cool ES6 feature</b> related to the same problem. 
If you like this video, hit the like button and share it with your friends and colleagues.
Post your suggestions and feedbacks in the comments section..
Subscribe to the <a href = "https://www.youtube.com/channel/UCUscUIOLdf2ueDdh2b9M1wg">channel</a> and hit the bell icon to be notified about more content about computer science and software engineering.
 
{% youtube JCPUDGgiIYk%}
React folder structure
Tags: react, boilerplate, javascript
Published: 2019-12-15 11:03:14

---
title: React folder structure
published: true
description: The folder structure used by me
tags: react, boilerplate, js
---

Hello people, I wanted to share my current folder structure for my React projects, after some time this is it:

```bash
.
├── package.json
├── jsconfig.json
├── public/
└── src/
    ├── assets/
    ├── components/
    └── pages/
```

`components`: Any component that don't belong to the pages should live here.

`pages`: Components living in this folder should map to a url. This is useful because if you want to move to Next.JS, there's not much needed to be done. This folder can have sub folders, if you are using `reach-router`, it fits perfectly.

`assets`: This folder is **optional**, it may include things as images, or any other static file that you'd like to put there, depending on the size of the app, the static content can also live next to each component, so it's not that needed.

And the `jsconfig.json` can have this content:

```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "pages": ["./src/pages/*"],
      "cards": ["./src/cards/*"],
      "components": ["./src/components/*"]
    }
  },
  "exclude": ["node_modules", "build", "coverage", "dist", "lib"]
}

```

So my question is, what do you think? Would you change it to something different?


Cheers