This is a noob question. What I'd like to do is set up a birthday party reservation website that has people fill out a form: yes/ no will attend, name, email. After the form is filled out for 'will attend' I'd like to have a popup modal that has the option to 'add to your calendar: Google, iCal, etc.'
Is this possible in an html form (javascript/ ajax)? I know it can be done in WordPress.
Thank you for any help/ suggestions.
Here is a very basic idea of what you could do. I put the form in the console using the answer here: https://stackoverflow.com/a/47188324/12946266 you will need to use php to operate on this form most likely, but I can't use that here.
const form = document.querySelector('form');
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
var values = Object.values(form).reduce((obj, field) => {
if(field.type=='radio'){
obj[field.name] = field.checked;
}else{
obj[field.name] = field.value;
}
return obj
}, {})
console.log(values);
});
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname" value=""><br> Last name: <input type="text" name="lname" value=""><br> email: <input type="text" name="email" value=""><br>
<input type="radio" id="attending" name="attendance" value="attending">
<label for="attending">attending</label>
<br>
<input type="submit" value="Submit"><br>
</form>
Related
I have the following html and JS:
<body>
<form id="form_test">
<label>Your name: </label>
<input type="text" name="name">
<label>Your age: </label>
<input type="number" name="age" onchange="update()" value="0" min="0">
<button type="button" onclick="send(this.form)">Send</button>
</form>
<script>
function send(forma){
let data = Object.fromEntries((new FormData(forma)).entries());
console.log(data);
forma.reset();
}
function update(){
console.log('Input number has changed');
}
</script>
</body>
When I fill the form an send it with an age different of 1 I can go back and fill the form again, as you can see in the code, there is a console log for every time I change the age, however, If I send the form with an age of 1, and then I fill the form again, but changing the age with the input number buttons, it looks like the onchage event does not work, but if I change the value by typing everything works fine.
Do you know why this is happening? As I mentioned, this only happens after sending the form with the input number equals to 1 and by changing the value with the input number buttons.
Prefer to code this "natural" way:
const formTest = document.querySelector('#form_test') // same as CSS notation
formTest.onsubmit = evt =>
{
evt.preventDefault(); // disable form submit / page reload
let data = Object.fromEntries((new FormData(formTest)).entries());
console.clear();
console.log(data);
formTest.reset();
}
formTest.age.onchange = evt => // use form's elements names directly
{
console.clear();
console.log('Input number has changed :', formTest.age.valueAsNumber );
}
<form id="form_test">
<label>Your name: </label>
<input type="text" name="name">
<br> <br>
<label>Your age: </label>
<input type="number" name="age" value="0" min="0">
<br>
<br>
<button type="submit">Send</button>
</form>
I have a form with a simple text field for a person's full name.
After a user enters their name and moves/tabs to the next field, I want to be able to capture the full name, extract only the first name, and attach to a separate hidden form field.
If the user goes back and corrects their full name, the extraction should repeat to get the correct first name. The full name text field would still be passed along during form submittal.
I'm thinking plain JS would be the best approach (I'm not using JQuery).
<form>
<input type="text" name="fullname" value="">
<input type="hidden" name="firstname" value="">
</form>
you can try this
this is your html
<form>
<input type="text" name="fullname" value="" id="fullname">
<input type="hidden" name="firstname" value="" id="firstname">
</form>
this is your javascript
<script>
let fullName = document.getElementById("fullname");
let firstName = document.getElementById("firstname");
fullName.addEventListener("blur", function() {
let names = fullName.value.split(" ");
if (names.length > 0) {
firstName.value = names[0];
}
});
</script>
https://jsfiddle.net/3k8kur9u/
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>
I have a form that submits a url action. However I don't want it to open up a new window with the url when it is submitted. How should I avoid this?
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"> <br>
<input type="submit" value="Update!" onclick="alert(theInput.value)"/>
<script>
var theInput = document.getElementById("name");
I don't want this form to change windows to
https://agent.electricinp.com
When it is submitted. How would I avoid this so that the user stays on the original page where they submit the form form.
Get rid of target="_blank"
<form name="leds" id="ledSend" method="get" action="">
Recently I got this scenario and researched a lot to find the hack/solution.
Solution - If you can put a window names and refer same every time, then browser will make sure to open new tab if not opened already, otherwise it will just refresh the window.
Example snippet: Demo JSfiddle here
<form id="myForm" action="<URL>" method="POST" target="_blank" onsubmit="target_popup(this)">
First name: <input type="text" name="fname"/><br/>
Last name: <input type="text" name="lname"/><br/>
<button type="submit" id="btnTest"> Submit</button>
</form>
<script>
var target_popup = function(form) {
window.open('',//URL should be blank so that it will take form attributes.
'UniqueWindowName', //window name
'width=400,height=400,resizeable,scrollbars');
form.target = 'UniqueWindowName';
}
</script>
Please refer my blog for more details
I am stuck in the same problem which has been raised here:
Stop a HTML5 form posting, refreshing or opening a new window onSubmit
I currently use
event.preventDefault();
// to avoid refreshing of form
Sample code what i am trying is below :
my html page contains below snippet of code:
<form id="sampForm">
First name: <input type="text" name="fname" required><br>
Age: <input type="number" required><br>
<input type="submit" onclick="OnSub(event)">
</form>
my js code below :
OnSub= function (_event) {
try {
_event.preventDefault();
//do my process logic below or run any code here
} catch (e) {
}
};
But this causes the form validations to stop working .
Thanks in advance for any help in here
the form has an "onsubmit" event. Bind your function to that.
<form id="sampForm" onsubmit="OnSub(event)">
First name: <input type="text" name="fname" required><br>
Age: <input type="number" required><br>
<input type="submit">
</form>
I feel you are using a method on form submit to validate elements
So In the end of your method just add
return false;
This will stop form submission.