I have this contact form function writtien in jQuery but I am implementing my site with vanllia JS
here is the HTML for the form:
<form id="contact-form" method="post">
<label for="required_question" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
<label for="required_question2" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
<label for="name" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">name</label>
<label for="email" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
<label for="subject" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
<label for="text" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">message</label>
<label for="submit" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">submit</label>
<input tabindex="-1" name="required_question" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
<input tabindex="-1" name="required_question2" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
<input type="text" name="name" placeholder="Name..." required></input>
<input type="email" name="email" placeholder="Email..." required></input>
<input type="text" name="subject" placeholder="Subject..." required></input>
<textarea name="text" placeholder="Enter your message here" required></textarea>
<input type="submit" class="submit" value="Submit."></input>
</form>
here is the jquery snippet:
$('#ajaxform').on('submit', function() {
$('#submit').val('Sending...');
var data = {};
$(this).find('[name]').each(function(index, value) {
data[$(this).attr('name')] = $(this).val();
});
$.post('/dss-assets/PHP/mailto.php', {term: data}).done(function(data) {
$('body').append(data);
});
return false;
});
and here is what I have so far in JS:
document.getElementById('contact-form').onsubmit = function(){
document.querySelector('input[type="submit"]').value = 'Sending...';
document.querySelector('input[type="submit"]').blur();
var $data = {};
var $contact_data = this.querySelectorAll('input[name], textarea[name]');
for(i = 0; i < $contact_data.length; i++){
$data[this.getAttribute('name')] = this.value;
}
Array.prototype.forEach.call($contact_data, function(index, value){
console.log($data)
});
return false;
}
it seems logs the form data but returns the values as 'null: undefined'; please help!
I believe your problem is with the word this
this.getAttribute
and this.value
are going to reference the form, not the DOM of the individual inputs.
[EDIT] One thing I would suggest is using the forEach
method that is part of the NodeList returned by querySelectorAll
like so:
var $data = {};
var $contact_data = this.querySelectorAll('input[name], textarea[name]');
$contact_data.forEach(function($input) {
$data[$input.getAttribute('name')] = $input.value;
});
Doing it this way gets rid of the need for the iterator and is cleaner. If you don't otherwise need the $contact_data
variable than it is also not needed and you can go with:
var $data = {};
his.querySelectorAll('input[name], textarea[name]').forEach(function($input) {
$data[$input.getAttribute('name')] = $input.value;
});
I hope this helps.
You reference to the form element instead of inputs. You should change:
$data[this.getAttribute('name')] = this.value;
to
$data[$contact_data[i].getAttribute('name')] = $contact_data[i].value;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.