If you are serious about increasing your WordPress website traffic, you need to develop SEO and always pay attention to the best …



An HTML form can easily be submitted by clicking on any HTML element with the help of JavaScript. The form element has a submit() method, and invoking this method with an external call will submit the form.

This article is going to focus on submitting a form upon pressing a link. To showcase this, a form will be created which is going to take in the sign-up details from the user, and upon the submission of the form, it is going to simply print out the name of the user onto the console.

Step 1: Setup the HTML Elements

Create a new HTML document, and in that document, create a form with a particular ID, and within that form, create the input field for username and password. After that, instead of the submit button, create a new link by using the <a> tag and use the onclick attribute and set it equal to linkPress() function:

<center>
      <form id=«form»>
        <p>Please Type Your Username</p>
        <input id=«name» type=«text» placeholder=«Name» />
        <br />
        <p>Please type your password</p>
        <input id=«password» type=«password» placeholder=«Password» />
        <br />
        <br />
        <a href=«» onclick=«linkPress()»>Link for Submission</a>
      </form>
</center>

At this point, this HTML document produces the following webpage:

Our webpage includes two input fields and a link that has an onclick() attribute set to it.

Step 2: Making the Form “submit” on Link Press

Every form element in the HTML contains the submit() method. To submit a form, it must be referenced in the JavaScript, and then the submit() method must be called using that reference. In the script file, create the function linkPress() and add the functionality using the following lines:

function linkPress() {
  form = document.getElementById(«form»);
  form.submit();
}

First line gets the reference of our form tag and stores it inside the variable “form”. The second line uses that reference and then calls the submit() of the form. Running this HTML document gives the following result:

Pressing the link submits the form, but since there is no backend file connected to receive the form, therefore it just resets the field.

Step 3: Prompt the “username” Upon Form Submission

You want to add a function ready() upon the complete loading of the webpage; therefore, add the property of “onload” on the <body> tag like:

 <body onload=«ready()»>

And then in the script file, add the following lines:

function ready() {
  form = document.getElementById(«form»);
  form.addEventListener(«submit», function (event) {
    event.preventDefault();
    name = document.getElementById(«name»).value;
    alert(«Welcome « + name);
  });
}

When the HTML document is completely loaded:

  • An Event listener is added onto the form element by using its reference.
  • This event listener listens to the submit event
  • Upon submission, it prevents the form’s default behavior (stop the redirection).
  • At the end, it greets the user using its username.

If the webpage is loaded now, it gives the following output:

As you can see, the form was submitted, and by preventing the default behavior, we were able to avoid the need for a backend to manage the data from the fields.

Conclusion

It is really easy to submit a form by clicking a link with the help of JavaScript. The form element of an HTML document has this method called submit(). To submit the form, you only have to make an explicit call to this method, which we have done in this article.



Source link







GRATUIT : Les 17 ressources WordPress indispensables pour perfectamente débuter https://easywordpress.fr/ressources Yoast SEO est …



JavaScript offers numerous methods to fulfill the requirements of programmers by executing the block of code. For scheduling a timeout, JavaScript provides methods including setInterval(), setTimeout, clearTimeout(), and clearInterval(). It provides a timeout functionality that allows users to perform any operation after a specific time interval. Moreover, the piece of code is repeated after a set interval of time. These methods are useful for sensitive websites such as banking websites and e-commerce sites.

This post demonstrates the working and usage of clearTimeout() and clearInterval() methods:

  • How to Utilize clearTimeout() Method in JavaScript
  • How to Utilize clearInterval() Method in JavaScript

JavaScript clearTimeout() and clearInterval() Methods

In JavaScript, the clearTimeout() and clearInterval() methods are used to clear the timer that was initialized using the setInterval() and setTimeout() methods, respectively. The clearTimeout() method cancels the timeout that was earlier set by the setTimeout(). The same procedure is applied using clearInterval() to antipara the time interval fixed by setInterval().

How to Utilize the clearTimeout() Method in JavaScript?

The clearInterval() method is utilized to stop the execution that started with the setTimeout() method. The method takes the same variable name that was returned by the setTimeout() method. The syntax of the clearTimeout() method is provided here:

Syntax

The timeoutID is the value of the timer set by the setTimeout() method. It is a mandatory field.

Example

An example is explained with the usage of the clearTimeout() method in JavaScript.

Code

<html>
  <body>
    <h2> An example of using the clearTimeout() method in JavaScript</h2>
    <button onclick=«startCount()»>Press Button to Start counter</button>
    <input type=«text» id=«txt»>
    <button onclick=«stopCount()»>Press Button to Stop counter</button>
    <script>
      var timer = 0;
      var time;
      var counter = 0;
      function timedCount() {
          document.getElementById(«txt»).value = counter;
          counter = counter + 1;
          time = setTimeout(timedCount, 1000);}
      function startCount() {
          if (!timer) {
            timer = 1;
            timedCount();}}
      function stopCount() {
          clearTimeout(time);
          timer = 0;}
    </script>
  </body>
</html>

In the above code, the clearTimeout() method is utilized with the setTimeout() method to differentiate the working process between them. The description is provided in the listed format:

  • Firstly, a button “Press Button to Start counter” is attached with a startCount() method.
  • Another button is associated with the stopCount() method to stop the execution of the above method.
  • After pressing the button, the counter variable is initialized and incremented by one every 1000 milliseconds.
  • These values are stored in the time variable that is utilized to stop the counter by passing it to the clearTimeout() method.

The screenshot of the above code is as follows:

Output

It is observed that the counter starts after pressing the “Press Button to Start counter” button. The counter increments the value by adding one. The process is continued until the “Press Button to Stop counter” button is pressed.

How to Utilize the clearInterval() Method in JavaScript?

This method clears the schedule created by the setInterval() method. The execution of the created timer is finished by passing the same variable that was returned from the setInterval() method. The following syntax refers to the setInterval() method.

Syntax

clearInterval(intervalID)

In this syntax, the intervalID is the passing variable that utilizes the same value as the setInterval() method.

Example
The example code written below refers to the clearTimeout() method in JavaScript.

Code

<h2> An example of using the clearInterval() method in JavaScript</h2>
<p>Press Button to start an interval that prints a message. </p>
<button id=«btn» onclick=«Result()»>Press Button to Start Interval</button>
<button id=«antipara»>Press Button to antipara interval</button>
<div id=«output»></div>
<script>
function Result() {
document.getElementById(‘antipara’).addEventListener(‘click’, () => { cancelInterval() })
const intervalID = setInterval(() => {
document.getElementById(‘output’).textContent += «Is JavaScript a Scripting Language ? «;
},500);
function cancelInterval() {
clearInterval(intervalID);
document.getElementById(‘output’).textContent = » Cancelled Interval !»;
}
}
</script>

The code is described as:

  • Two buttons are associated with the methods.
  • The Result() method is employed with a button “Press Button to Start Interval”.
  • First, the interval is set by the setInterval() method.
  • After that, a message asking, “Is JavaScript a scripting language?” is displayed every 500 milliseconds.
  • In the end, the clearInterval() method is used by passing the same variable returned by the setInterval() method.

Output

In the output, the message “Is JavaScript a scripting language?” is displayed repeatedly by pressing the Start Interval button. After that, the clearInterval() method is utilized to stop the execution and display a message “Canceled Interval”.

Conclusion

JavaScript provides functionality to stop the execution of code by utilizing the clearTimeout() and clearInterval() methods. The clearTimeout() method is employed to clear the timer value set by the setTimeout() method. On the other hand, the clearInterval() method stops the interval by passing the same value set by the setInterval() method in JavaScript. Here, you have learned to understand the clearTimeout() and clearInterval() methods in JavaScript.



Source link







Descarga PDF con las mejores herramientas y estrategias para crear y crecer tu negocio en dirección ➜ https://sondys.com/guia-pdf/ …



In JavaScript, the Focus() method is used to set focus on any element of the HTML webpage, which means that it sets that element as the active element. The key point here is that it only focuses on the elements which “can” be focused on. In simple words, not all the elements can be focused on.

To better understand the focus() method, look at its syntax below:

In this syntax:

  • element: it is the reference of an HTML element inside JavaScript.
  • options: it is not a required parameter.

Example 1: Focusing on a Text Field Using the focus() Method

Start by creating a new HTML document, and in that document, create an input field and a button with the following lines:

 <center>
      <input type=«text» id=«TF1» placeholder=«I am a textField» />
      <button id=«btn1» onclick=«buttonClicked()»>
        Focus on the text field
      </button>
</center>

In the above lines:

  • Input tag has been given the id as “TF1
  • Button has the id as “btn1” and an onclick attribute set equal to “buttonClicked()”

Running this HTML document displays the following on the browser:

The text field and button are both displayed on the webpage. Now to add the functionality upon button press, add the following lines in the JavaScript file:

function buttonClicked() {
  tf = document.getElementById(«TF1»);
  tf.focus();
}

In the above JavaScript lines:

  • First create a function named as buttonClicked()
  • In that function, get the reference of the text field by using its Id and store that reference in the “tf” variable
  • After that, simply call the focus() method with the “tf” variable with the help of the dot operator

At this point, webpage produces the following outcome:

It is observable in the output, that pressing the putting puts the text field as active or “in focus”.

Example 2: Focusing on an Element With “options” Arguments

In this example, the main goal is to have an element at a scrollable position. After that, the button should not only focus on that element but also bring that element into view from the document.

Start by creating an HTML document, and just like in the first example, create a text field and a button with the following lines:

<center>
      <input
        type=«text»
        id=«TF1»
        class=«scrolled»
        placeholder=«I am a textField»
      />
      <button id=«btn1» onclick=«buttonClicked()»>
        Focus on the text field
      </button>
    </center>

In these lines the only difference is:

  • The input that now has a class “scrolled”, which will be used to place this input tag at a scrollable position in the document

After that, add the following lines to the CSS file or in the <style> tag:

body {
  height: 7000px;
}
.scrolled {
  position: absolute;
  top: 4000px;
}

In the lines mentioned above:

  • The <body> of the document has been a height of 7000px so that the document becomes scrollable
  • After that, we are setting the element with the scrolled class to an absolute position of 4000px from the top

Running this HTML document give the following webpage on the browser:

From the output, it is clear that the text field is now placed at a position of 4000px from the top.

After that, we are going to add the following lines of JavaScript:

function buttonClicked() {
  tf = document.getElementById(«TF1»);
  tf.focus({ preventScroll: false });
}

In these lines:

  • A function buttonClicked() is made
  • In that function, a reference to the text field is made by using its ID and stored inside the variable “tf”.
  • After that, apply the focus() method on the text field and in its argument pass {preventScroll:false}. This will bring the element in focus and scroll the document to bring that element in view.

Run the HTML document, and you will get the following result upon clicking the button:

It is observable from the output that upon clicking the button, the text field is brought into the view of the browser by scrolling the document. Moreover, the text field is now being focused on.

Conclusion

This article throws light on the purpose and the working of the focus() method in JavaScript. This method is used to bring an element of the HTML document into focus, or in much simpler words, it sets their active property as true. To apply this method, simply use it with the reference of the HTML element with a dot operator. This focus method can also take in an optional argument which has been demonstrated above.



Source link







► SUSCRIBETE A MI CANAL: https://goo.gl/MedwLY
► MÁS VIDEOS SOBRE ÉSTO: https://bit.ly/3iKzdEZ
► CONSIGUE PLANTILLA GRATIS!!: https://bit.ly/34vKrsX

Créa tu Web Profesional en 20 minutos con WordPress y Enfold en Gachupin

Hola soy Miguel Mart, entendido en Diseño Web con WordPress, y Diseñador representación desde hace mas de 20 abriles.
En este video quiero presentarte la fórmula o combinación que he desarrollado yo para tener una Web PROFESIONAL, totalmente en Gachupin y tira en tan solo 20 MINUTOS.

– LAS HERRAMIENTAS:

Lo primero es ir a:

Podrás encontrar los enlaces de las dos herramientas que necesitas:

1.- Hosting con WebEmpresa, el Partner tecnológico que necesitas…

ENLACE: https://bit.ly/3kwTePX

WebEmpresa, en este sentido te ofrece todo lo que necesitas para abrir tu plan;
• Un año de dominio gratis alojamiento .com o .es
• Web en WordPress Automóvil instalado en Gachupin (No tienes que preocuparte por todos los language pack de traducción y todas estas historias).
• Un revolucionario sistema que acelera por gusto tu web un 40% de promedio. (especialmente adaptado para estar de los primeros en Google)
• Soporte en castellano durante las 24 horas del día.
• Sistema de administración CPanel en Gachupin.
• Correos profesionales inlimitados de tu dominio. (fulanito@midominio.com, contacto@midominio.com o ventas@midominio.com… tu eliges)
• Y un montón de beneficios más.
Así que hazme caso si tienes una idea no esperes más para ponerla en marcha porque el mejor momento es ahora y desde luego no dejes que la dificultad técnica sobre hosting y dominios te impida ponerla en marcha… YO TE AYUDO!!

2.- ELTEMA PERFECTO PARA WORDPRESS:
ENFOLD: https://bit.ly/34vKrsX

La potencia que tiene la plataforma de administración de contenidos con la que llevo tanto tiempo trabajando (WordPress), es que te permite poner diferentes temas o “Themes”, tanto gratuitos como de de plazo tambien llamados “Premium”. Yo hasta hace 3 abriles que usaba infinidad de ellos, digamos que por cada cliente que le tenía que hacer un plan, invertia 50 o 60 dólares o euros en comprar uno de esos temas, pero casi siempre me topaba con inconvenientes, entre ellos, el idioma. Hay algunos temas mal diseñados que no he podido traducir cosas al castellano pues estan solo en manos de los programadores. Pero por fin encontré “la piedra angular”… un tema completamente en castellano por fuera y por adentro, todos los menus y esplicaciones internas están en castellano!!!
Enfold es un tema despejado , flexibles y “responsive” (Se adapta a todos los dispositivos) diseñado para WordPress, adecuado para negocios ,sitios web, tiendas online y los usuarios que quieran mostrar su trabajo en estupendos portfolios. Preparado para SEO y con mas de 25 plantillas para cargar con un solo “clic” y como te comentaba ayer 100% en Gachupin!!
Palabras secreto: Enfold, Enfold castellano, Enfold castellano, Enfold theme, theme Enfold, mejor tema para WordPress, tema para woocommerce, tema integrado con mailchimp, tema para imagen personal.

————

✅ SUSCRIBETE A MI CANAL: https://goo.gl/MedwLY

✅ EL EQUIPO QUE UTILIZO: https://bit.ly/3mInAkD
✅ MI HOSTING: https://bit.ly/3kwTePX
✅ Zona Premium – Temas, Plugins, Tutoriales WordPress: https://bit.ly/34vKrsX
✅ MI WEB: https://miguelmart.com

————

Música:
Track: LFZ – Echos (Meikal Remix)
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/nMldNLiYzGU
Free Download / Stream: http://ncs.io/echoesremix

————

Translated titles:
Erstellen Sie Ihre professionelle Website in 20 Minuten mit WordPress und Enfold auf Spanisch

Créez votre site Web professionnel en 20 minutes avec WordPress et Enfold en espagnol

Crie seu site profissional em 20 minutos com WordPress e Enfold em espanhol

स्पेनिश में WordPress और Enfold के साथ 20 मिनट में

Create your Professional Website in 20 minutes with WordPress and Enfold in Spanish

أنشئ موقع الويب الاحترافي الخاص بك في 20 دقيقة باستخدام

在20分鐘內使用Wordpress和西班牙語折疊創建您的專業網站

Crea il tuo sito web professionale in 20 minuti con WordPress ed Enfold in spagnolo

スペイン語のWordpressとEnfoldを使用して、20分でプロのWebサイトを作成

Создайте свой профессиональный веб-сайт за 20 минут с п



The window scrollTo method is used to scroll the browser window to a specific coordinate. This method is named the scrollTo() while the window is the Window Object. A browser window that is open is represented by the window object. To better understand this method, quickly go over the syntax given below:

Syntax of the scrollTo() Method

window.scrollTo(X-coordinate, Y-coordinate);

In this syntax:

  • window is the browser’s window Object.
  • X-coordinate is the horizontal displacement to the browser’s window at.
  • Y-coordinate is the derecho displacement to pan the browser’s window at.

Demonstration of the Window scrollTo() Method

To demonstrate the working of the scrollTo method, start by creating an HTML file with the following lines:

<center>
      <b class=«scrolled»>I am Placed at 4000px Vertically</b>
      <button onclick=«clicked()»>Click me to scroll down</button>
</center>

In this above HTML code snippet,

  • A bold tag was created with some text inside it with the class being scrolled. This class will be used to place this tag at 4000px with the help of CSS.
  • A button was created which calls the clicked() function in the JavaScript file.

After that is done, we want to add the following lines to the CSS of our webpage:

body {
  height: 7000px;
}
.scrolled {
  position: absolute;
  top: 4000px;
}

In the above CSS snippet:

  • The height of the body tag is set to 7000px so the webpage becomes scrollable even without having more elements on it.
  • The bold tag with the class scrolled has been placed at 4000px.

Executing the webpage now provides us the following output on the browser’s window:

As you can see from the output, to visit the bold tag, one must manually scroll the browser’s window.

To add functionality to the button so that it scrolls us directly on the bold tag with text, write the following lines in the script file:

function clicked() {
  window.scrollTo(0, 4000);
}

In these lines, the function clicked() is created, which is called upon pressing the button, and in this function, we are simply passing the Y-coordinate as 4000px to the window scrollTo() method. This provides the following outcome on the HTML webpage:

As it is clearly shown in the output, pressing the button pans the browser’s window to 4000px vertically.

Wrap up

The window scrollTo() method is used to call the browser’s window object and then pan the browser’s window to a specific position by passing in the x and y coordinates in its arguments. This article demonstrated the working of the window scrollTo() method with the help of an example.



Source link







Commencer maintenant avec o2switch (sans réduction) : https://wpmarmite.com/o2switch

Télécharger la fiche récap (avec réduction et des conseils bonus) : https://wpmarmite.com/recap

Vous avez décidé de vous lancer en créant un site WordPress ? Félicitations ! 🎉

Vous avez opté pour la solution la plus populaire du marché. Avec WordPress, vous allez pouvoir créer le site dont vous avez besoin, qu’il s’agisse d’un site personnel, d’un portfolio, d’un CV, d’un site pour votre entreprise, pour votre association, d’une boutique en ligne ou un blog.

Si vous ne savez pas par où commencer, pas de panique, vous êtes au bon endroit. 😉

Dans cette vidéo, nous allons voir comment procéder en 5 étapes et uniquement à l’aide d’outils gratuits (à l’exception de l’hébergement et du nom de domaine, pour lesquels on ne peut pas faire autrement).

Voici les différentes parties de la vidéo :
0:00 – 3:30 : Introduction
3:31 – 9:02 : Étape 1 : Domaine & hébergement
9:03 – 16:10 : Étape 2 : Installer WordPress
16:11 – 29:09 : Étape 3 : Contenu du site internet
29:10 – 44:11 : Étape 4 : Personnaliser le design
44:12 – 54:55 : Étape 5 : Ajouter des fonctionnalités
54:56 – 57:00 : Conclusion

Nous allons commencer par choisir un nom de domaine et un hébergement. Le nom de domaine correspond à l’adresse de votre site, il convient donc de proporcionadamente réfléchir avant de le sélectionner, car il est censé rester le même durant toute la durée de vie du site (encore faut-il qu’il soit habitable, mais je vous montre comment le vérifier 😉).
Quant à l’hébergement, il correspond à l’espace où sont stockés les fichiers du site afin que ce dernier soit habitable 24h sur 24 et 7 jour sur 7. WPMarmite est hébergé chez o2switch. Je vous le recommande car c’est un hébergeur français, performant et très réactif.

Ensuite, nous allons installer et paramétrer WordPress. Pas de panique, cette étape est très rapide et intuitive. Nous allons passer par l’interface proposée par o2switch afin de réaliser une installation automatique, en quelques clics, puis je vous montrerai les réglages de cojín à effectuer dès la création de votre site.

La troisième étape correspond à l’ajout de votre contenu. Nous allons créer nos premières publications, y ajouter notre contenu et le mettre en forme grâce à l’éditeur proposé par WordPress.

Ensuite, je vais vous montrer comment personnaliser le design du site en manipulant votre thème WordPress. Il en existe des milliers, mais j’ai choisi de travailler avec Astra dans cette vidéo, un thème WordPress gratuit, flexible et facile à prendre en main.

Enfin, dans la dernière partie de cette vidéo, nous allons voir comment ajouter des fonctionnalités à WordPress en installant les bonnes extensions (je vous en recommande 7 qui conviendront à tout type de site).

Pour bénéficier d’un code de réduction de 15 % à o2switch ainsi que de ressources complémentaires, téléchargez la fiche récap de cette vidéo :
⏩ https://wpmarmite.com/recap

N’oubliez pas de vous abonner pour ne rien manquer des prochaines vidéos 😉 :
⏩ https://www.youtube.com/subscription_center?add_user=WPMarmite

Bon courage, j’espère que cette vidéo vous aidera dans vos projets ! 🙂

##

Pour aller plus loin avec WordPress, jetez un œil à la formation de WPChef :
⏩ https://wpchef.fr/formation/wordpress/
Ou encore à celles du Chaudron, les formations de WPMarmite :
⏩ https://wpmarmite.com/chaudron/formations-wordpress/

##

Comment créer un blog WordPress professionnel :
⏩ https://www.youtube.com/watch?v=MDfxaXj8LLw
Comment créer une boutique en ligne avec WordPress & WooCommerce :
⏩ https://www.youtube.com/watch?v=s2-RuQt4ws8
Les erreurs à éviter sur votre site WordPress :
⏩ https://www.youtube.com/watch?v=_Aqq7f86ClU
Les 10 meilleurs plugins WordPress :
⏩ https://www.youtube.com/watch?v=6OcIkREJipY
Comment installer Google Analytics sur WordPress :
⏩ https://www.youtube.com/watch?v=Fv5Are_nXdk

##

Si vous aimez nos vidéos et que vous voulez soutenir WPMarmite, hébergez votre prochain site chez o2switch :
⏩ https://wpmarmite.com/o2switch

##

Une version « texte » de cette vidéo est habitable sur le blog de WPMarmite :
⏩ https://wpmarmite.com/guides-wordpress/creer-site



In JavaScript, the onclick event of the button is used to associate any JavaScript function with it. Whenever the user presses the button, the attached function will be triggered. JavaScript provides built-in features such as addevent listener and onclick events to execute multiple functions with a single click. This event supports all the famous web browsers. In this article, you will learn how to call multiple JavaScript functions with an onclick event.

How to Call Multiple JavaScript Functions With an onclick Event?

The onclick event executes multiple methods in sequential order with a single click and supports multiple browsers. The onclick event makes the script clear and understandable by separating the functions with a semicolon for the users. The following example refers to the practical implementation of the onclick event.

Example

An example is provided of calling multiple functions by using the onclick event in JavaScript. For this purpose, the code is written as below:

Code

<html>
<head>
<h2>An example of using multiple methods by onclick event </h2>
<script>
// An example of using multiple methods by onclick event
document.write(«<br>»);
function method1() {
document.write («First Method is called»);
document.write(«<br>»);
document.write («Welcome to JavaScript World»);
document.write(«<br>»);
document.write(«<br>»);
}
function method2() {
document.write («Second Method is called»);
document.write(«<br>»);
document.write (» Welcome to Linuxhint»);
}
</script>
</head>
<body>
<p>Press magic button to call the multiple functions</p>
<form>
<input type=«button» onclick = «method1(); method2()» value = «Press the Magic Button» >
</form>
</body>
</html>

 
The description of the code is as follows:

    • Two functions named method1() and method2() are defined that are to be called after the onclick event.
    • After that, a button is created using the <form> tag.
    • On the onclick event of the button, the methods method1() and method2() will be triggered.

Output

A button named “Press the Magic Button” is utilized to execute the multiple methods by its onclick event. After pressing the button, method1 and method2 are called to display the information present in it.


After pressing the button, two methods are called and display messages “Welcome to JavaScript World” and “Welcome to Linuxhint”.

Conclusion

In JavaScript, an onclick event is employed to call multiple functions with a single click. These functions are placed in the onclick event of the button type. This post demonstrates the usage of the onclick event to call multiple functions in JavaScript. For a better understanding, we have demonstrated an example that shows how multiple functions are called with a single click.



Source link