Develop Reference

required field not working in Javascript

Hello,
I am trying to implement "required" on my input fields in a form and onclick- submit, it goes to a function that calls a 3rd party function and passes the form to it.
I understand that "required" doesn't work with "onclick" but is there a way to go around it?
EDIT: I do not have any php or backend which is why Im calling a client to pass the form data.
Code:
<form id="signupform">
<label for="name"> Name </label>
<input type= "text" id="name" name="name" required>
<label for="emailaddr"> Email </label>
<input type= "email" id="emailaddr" name="emailaddr" required>
<button type="submit" onclick="callclient()">Submit</button>
</form>

You can also capture the submit event with jQuery and execute your function that way.
Here is a jsFiddle.
$(document).ready(function(){
$('#signupform').on('submit', function(e){
// Stop the form submission
e.preventDefault();
callClient();
})
})
function callClient(){
alert('client called.');
}

Here is a snippet, using the onsubmit.
I'm returning false so the default submit is not called, this is likely why you think it's not working in your version.
function callclient() {
console.log('Client Called');
return false;
}
<form id="signupform" onsubmit="return callclient();">
<label for="name"> Name </label>
<input type= "text" id="name" name="name" required>
<label for="emailaddr"> Email </label>
<input type= "email" id="emailaddr" name="emailaddr" required>
<button type="submit">Submit</button>
</form>

Jquery not getting form data from forms with that same class name

I'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.

my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>

How to get data user input data from my webpage

I have made a form in my site, which will allow me to get suggestions about Rubik's cube algorithms, but how to know what input the user has? For better understanding, I've given the code below:
<form method="POST">
<label>Your name: </label><br>
<input type="text" name="name" placeholder="Your Name" required><br><br>
<label>Your E-mail: </label><br>
<input type="email" name="email" placeholder="email#domain.com" required><br><br>
<label>Select puzzle: </label><br>
<input type="radio" name="2x2" value="2x2">2x2<br>
<input type="radio" name="3x3" value="3x3">3x3<br><br>
<label>Select set/subset: </label><br>
<input list="set"><br><br>
<datalist id="set">
<option>Ortega OLL</option>
<option>Ortega PBLL</option>
<option>CLL</option>
<option>EG-1</option>
<option>EG-2</option>
<option>F2L</option>
<option>OLL</option>
<option>PLL</option>
<option>COLL</option>
<option>WV</option>
</datalist>
<label>Your Alg: </label><br>
<input type="text" name="alg"><br><br>
<input type="submit" name="submit" class="w3-black w3-button w3-hover-white w3-hover-text-blue w3-text-white">
</form>

Please add action attribute to your form tag and on submit here is the example
<form action="getvalue.php" method="post">
</form>
Note: Every form element must have unique name .
after adding action attribute then create getvalue.php file and add following code in to it
<?php
print_r($_POST);
?>
Above code will give all the form field values
do let me know if it was helpfull...

I'm not sure exactly what you want to do, but here is an example of a form that submits to itself. This will allow you to remain on the same page after the form has been submitted. You can change what the user sees to indicate that the form was done successfully/etc. I have tested this code and it works.
<main>
<?php
// When the form is submitted
if (isset($_POST["submitButton"])){
//Do something with the data from the form - you don't have to print it out.
//This is all done on the server.
//Connect to DATABASE, send an EMAIL, VALIDATE the form, etc.
print("<pre>");
print_r($_POST); // for all GET variables
print("</pre>")
?>
<!-- This HTML will be visible to the user after the form has been submitted. -->
<h1>The form has been submitted successfully!</h1>
<?php
}else{ //If the form has not been submitted
?>
<form method = "post" >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id = "submitButton" name = "submitButton" value="Submit">
</form>
<?php
} //End else
?>
</main>

Google spreadsheet website form jQuery script block the sending of

I have my form in html. I copied action, entry keys and hidden inputs from orginal Google Form.
<form id="Gform" role="form" action="https://docs.google.com/forms/d/MY-FORM-KEY/formResponse" method="POST" target="_self" onsubmit="">
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{4,40}$" name="entry.1028663680" value="" id="entry.1028663680" dir="auto" title="What is Your city" class="form-control" placeholder="City" required>
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{5,40}$" name="entry.1220908348" value="" id="entry.1220908348" dir="auto" title="Your complete name" class="form-control" placeholder="Your name" required>
<input type="tel" name="entry.623688995" value="" id="entry.623688995" dir="auto" title="" class="form-control" placeholder="phone" required>
<input type="email" name="entry.1564973803" value="" id="entry.1564973803" dir="auto" title="" class="form-control" placeholder="email" required>
<input type="hidden" name="entry.383122401" value="WEBSITE" id="entry.383122401" dir="auto" title="" class="form-control" placeholder="E-mail" required>
<input type="hidden" name="draftResponse" value="[,,"-9139933475238999509"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fbzx" value="-9139933475238999509">
<button type="submit" name="submit" id="sendData" class="btn btn-default">Submit</button>
</form>
I have te jQuery script, which display confirm:
<script type="text/javascript">
function sendContactForm(){
$("#Gform").fadeOut();
$("#form-container").append('<p class="confirmer">Thanks!<br>Your email was sent.</p>');
};
$('#Gform').submit(function () {
sendContactForm();
return false;
});
</script>
When i delete this script, form is sending, and save to google, but after click submit, I am redirecting to google "Thank You" page. I want to no redirect and display confirm just like in script. How to fix this problem ?

try to use AJAX to acomplish your task, when you will use asynchronous function, there won't be reloading page and you will send data behind the scene. In data object enter all input values, in done() and fail() functions define what to do when you recieve response. Good Luck:)
$('#formID').submit(function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/1PrgHQALlz0WrvwjhGpLrtIgD5aQ1x-8HrOubkxTLNKs/formResponse",
type: "POST",
data: {
'entry.111': $('#entry_111').val(),
'entry.222': $('#entry_222').val(),
// all data from form
}
}).done(function(data){
yourAction(data);
}).fail(function(data){
failAction(data);
});
});

Comment the return false in the code above:
$('#Gform').submit(function () {
sendContactForm();
//return false;
});
Or just delete this line.
What this is script is doing is: subscribing to the submit event and canceling it.
Do you want to do something else?

Submitting form with Ajax

So I'm completely lost on how to submit a form with Ajax. I'm fairly new to Javascript and hopefully I'm not in over my head.
When I click submit on my form, nothing happens on my page, not in my SQL database where the info should be stored (double checked process form too).
Here's the code if anyone's willing to help:
Javascript:
$(document).ready(function() {
$('#form').submit(function() {
$.ajax({
url: "../process.php",
type: "post",
data: $(this).serialize()
});
});
});
HTML:
<form name="contact" method="post" action="" id="form">
<span id="input">
<input type="text" name="first" maxlength="50" size="30" title="First Name" class="textbox">
<input type="text" name="last" maxlength="80" size="30" title="Last Name" class="textbox">
<input type="text" name="email" maxlength="80" size="30" title="Email" class="textbox">
<textarea name="request" maxlength="1000" cols="25" rows="6" title="Request"></textarea>
</span>
<input type="submit" value="Submit" class="submit">
</form>

$('#form').submit(function(e) {
e.preventDefault(); //prevents the page from refreshing
var $this = $(this); // cache $(this) for later use
$.ajax({
url: "../process.php",
type: "post",
data: $this.serialize()
});
});
Also could be to do with the dataType property. Or various other things.

I use input type button instead submit button. I validate form field when user click button using click event.When validation pass then call ajax.
something like this,
<input type="button" value="Submit" class="submit">
jQuery(function(){
jQuery('.submit').click(function(){
if(validatemyform()){
//call ajax here
}
});
});