I created a form using Elementor Pro Form widget. Now I want to write some code and I need to get the value of the input fields from the Elementor Pro Form. How can I do that?
Here is what I did:
Created a form with the Elementor Pro Form widget. Fields: Email, Website URL. I added ID to both of them.
Email input field id: email
Website URL input field ID: websiteurl
Submit button ID: analysee
Imported HTML widget to my page and tried to DOM the value of the Website URL input field. I added an Event Listener to the button (that works). When the button is clicked it should alert the value of the Website URL input field.
When I do that I get the following error:
Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement.<anonymous>
Here is my code:
<script>
let analyse_dugme = document.getElementById("analysee");
let website_url = document.getElementById("websiteurl");
analyse_dugme.addEventListener("click", function(){
alert(website_url.value);
});
</script>
How can I solve this?
Thank you for your time.
You can use the val() property to retrieve the input's value, by doing something like this:
jQuery(document).ready(function($) {
$('#theForm').submit(function() { // #theForm to select the whole form
let analyse_dugme = $("#email").val(); // get the email value
let website_url = $("#websiteurl").val(); // get the website url value
});
});
Or you can do something like this and get an associative array with just the values:
$('#theForm').submit(function() {
var $inputs = $('#theForm :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
Related
let's explain, am using a wordpress theme for my website but am facing a difficulty to extract from my form the various input value.
Anytime i click on the EventListener button the input value is null meanwhile i have a text inside the input box
i tried these lines of code
code result
if(window.location=="https://liqwidity.com/submit-listing/profile/"){
var input = document.querySelectorAll('.hp-field--text');
var inputValue = input[0].value
document.querySelector('.button-primary').onclick = function(){
console.log(inputValue)
}
So, i am very new, i am taking a course in web design.
My assignment is to build a form that takes user input 10 fields and sort the input then display it back in the web page with the current date and time.
I'll sort the time/date later for now..
First i created a form with all the said input fields using a table.
input type="text" required="required" name="Propellers" maxlength="20" value=""
and so on...
Then i wrote a function using variables and then put the variables in an array named accessories:
<script>
function gopro() {
parts.sort();
parts.reverse();
var input = document.getElementById("Propellers").value;
var input = document.getElementById("Batteries").value;
var input = document.getElementById("Gimbal").value;
var input = document.getElementById("Micro_HDMI").value;
var input = document.getElementById("Camera_Housing").value;
var input = document.getElementById("Carry_Bag").value;
var input = document.getElementById("Stabilization").value;
var input = document.getElementById("Karma_Drone").value;
var input = document.getElementById("Karma_Grip").value;
var input = document.getElementById("Hero_6_Camera").value;
var accessories = [Propellers, Batteries, Gimbal, Micro_HDMI, Camera_Housing, Carry_Bag, Karma_Drone, Karma_Grip, Hero_6_Camera];
document.getElementById("parts").innerHTML = accessories;
}
</script>
Then I call the function when button is clicked onclick="gopro()
to display (return) the input values on the page:
id="parts"
But when i click the submit button the form just resets. Wondering why the form just resets instead of producing output on the web page?
thx
form gets submitted to its action attribute, if no action is provided, form is submitted to current page url
use e.preventDefault() in your function at start and then make calculations
Also in your code, you have assigned the input variable all the values one by one so how the accessories variable will have values you want???
I get data of the form using this:
form = $(this).parents('form');
And then using jQuery form I send it via:
form.ajaxSubmit()
But prior to that, I want to append a value to my form. How should I do this?
It is worth mentioning that I cannot access the form html markup to add a hidden input field
and that's why I need to do it in jquery.
By value I mean a key&value pair, as if belongs to an input.
You can pass it in the url string like
form.ajaxSubmit({
url: 'controllers/orders.php?mykey=' + encodeURIComponent('myvalue')
})
Or use a dynamic hidden field like
var input = form.find('input[name="mykey"]');
if (!input.length) {
input = $('<input />', {
name: 'mykey',
type: 'hidden'
}).appendTo(form);
}
input.val(myvalue)
I have a form with a « newInput » button, which add dynamically in javascript a new input when I click to it.
When I have an error in my form, I re-load the view with the form. It’s normal, but .. Because I use dynamic javascript for adding new input, all the input added are removed when I reload..
There is something I can do ?
This is an exemple of my view.tpl :
<input
type="text"
placeholder="ex: cerise"
onfocus="javascript:autoComplet('jigd1', '{site_url('recettes/getIngredient')}')"
value="{set_value('igd[]')}" id="jigd1" name="igd[]"
/>
{form_error('igd[]')}
I add a partiel code of my js file
var cpt=1;
function addField(uriIngredient, uriLabel) {
try
{
cpt=cpt+1;
var inputIgd = document.createElement('input'),
button = document.createElement('input'),
div = document.createElement('div'),
inputIgd.setAttribute('type','text');
inputIgd.setAttribute('name','igd[]');
inputIgd.setAttribute('id','jigd'+cpt);
button.setAttribute('type','button');
button.setAttribute('onclick','javascript:supField("igd'+cpt+'")');
button.setAttribute('value','Supprimer');
div.setAttribute('id','igd'+cpt);
div.appendChild(inputIgd);
div.appendChild(button);
document.getElementById("listIgd").appendChild(div);
...
After some research, I tried to look at what someone said me, that's say localStorage, and it is very nice. But I used an exemple for only one input because i wrote it in my html, but I don't know how to do for recreate all inputs .. And particularly because I use javascript to add new inputs, I don't know if I can recreate all inputs .
check the form before submitting, that way you won't have to reload the page, for example using jquery ...
$("#myformid").on("submit", function(){
var goodtogo = true;
// some code here to check the form, if there's an error --> goodtogo = false;
if (!goodtogo) return false; // and some other code to display the errors
});
That way, if there's an error , the form won't submit and won't reload.
If you have to check something in a database (for example) like checking if a username already exists, you'll have to use ajax.
I am new to js and jquery. Currently, I have a form at form.php which contains a checkbox. When the user clicks submit, the form variables are sent to a form.js file where each value is checked to be null or not.
The form.js file works perfectly, however, for the checkbox nothing seems to happen. I have a feeling this is due to the way I have declared the variable.
The following is the code for the js file:
var email = $('#email').val();
var website = $('#website').val();
var CHECKBOX = $('CHECKBOX').val();
...
...
if (CHECKBOX.checked == FALSE){
var error = true;
$('#notchecked_error').fadeIn(500);
}else{
$('#notchecked_error').fadeOut(500);
}
Try using:
if ( $('#CHECKBOX').prop("checked") )
or:
if ( $('#CHECKBOX').is(":checked") )
Also, be sure your selector for the checkbox is correct.
I see two problems in your code. The first one is that the selector in your CHECKBOX assignation is faulty. It should be
var CHECKBOX = $('#CHECKBOX').val();
or
var CHECKBOX = $('input[type=checkbox]').val();
the second problem is that you are reading CHECKBOX.checked from the val() function, you need to read it from the checkbox itself.
if(CHECKBOX.checked)
$('input[type=checkbox]:checked') // If you have multiple checkboxes you can use this and loop through them to get additional info
$('#checkboxID:checked').length // To get one specific checkbox
`$('CHECKBOX').val();`
Will try to find an element with a tagname of CHECKBOX and return it's value. Presumably you want to reference the checkbox with an ID of CHECKBOX:
var CHECKBOX = $('#CHECKBOX');
To see if it's checked:
if (!CHECKBOX[0].checked) {
// CHECKBOX is not checked
}
You really should learn basic javascript before using jQuery. Usually validation is initiated from a form submit, which can give you are reference to the form. You can then reference all of the form elements as properties of the form, you don't need to create all of those jQuery objects. e.g. if you form is something like:
<form ... onsubmit="validate(this)"... >
<input type="checkbox" name="checkbox">
</form>
Then in your validate function:
function validate(form) {
if (!form.checkbox.checked) {
// the checkbox isn't checked
}
}
You can attach the listener dynamically if you wish.