I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>
Related
Im trying to learn form validation and I cannot figure out what is going on here. I am following a W3Schools tutorial and the validate form function is giving an error but it is not doing that on their example.
I tried copy and pasting the example into my project and just changing the property name and it still gives an error.
function validateForm() {
var x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm()">
<label for="cakeName">Cake name:</label>
<select required name="cakes" id="cakes">
<option value="placeholder">--- Select cake ---</option>
<option value="cakeOne">Coconut Bundt Cake</option>
<option value="cakeTwo">Cream Cheese Pound Cake</option>
<option value="cakeThree">German Chocolate Cake</option>
<option value="cakeFour">Classic Yellow Cake</option>
</select>
<br>
<label for="yourName">Your name:</label>
<input name="name" type="text">
<br>
<label for="message">Message</label>
<input name="message" type="text" placeholder="type your text you want written on the cake">
<br>
<label for="includes">Includes:</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Candle</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Firework</label>
<input type="checkbox" id="candle" name="candle" value="Candle">
<label for="candle">Toys</label>
<br>
<label for="deliveryDate">Deliver Date:</label>
<input type="date" id="date" name="date">
<br>
<label for='deliverTo'>Deliver to:</label>
<textarea name='deliverTo' id="deliverTo" cols="30" rows="10"></textarea>
<br>
<label for="callBefore">Call before deliver?</label>
<input type='radio' id="yes" name="callBefore" value="Yes">
<label for="yes">Yes</label>
<input type='radio' id="no" name="callBefore" value="No">
<label for="no">No</label>
<br>
<button type="submit" id="submit" class="submit" name="submit" value="bar">Order Now</button>
</form>
Issues with your code:
The field name was wrong.
You need to prevent your from default behavior which is reload or redirect to process it's data before submiting.
function validateForm(event) {
event.preventDefault(); // You didn't stop the subminssion default behavior
let x = document.forms["contact"]["yourName"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
<form name="contact" onsubmit="validateForm(event)">
<label for="yourName">Your name:</label>
<!-- You used a wrong name -->
<input name="yourName" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
How we handle forms these days
const form = document.querySelector('#contact-form');
form.addEventListener('submit', (ev)=>{
// Stop the form submission from reloading or redirecting
ev.preventDefault();
let yourName = document.querySelector('#your-name').value;
if(yourName === ""){
alert("Please Enter Your Name");
return;
}
// Post the form with Fetch API or Axios ...
});
<form id="contact-form">
<label for="yourName">Your name:</label>
<input name="yourName" id="your-name" type="text">
<button type="submit" id="submit" name="submit" value="bar">Order Now</button>
</form>
I don't know if this will solve your problem (what was the error?) but the following line:
<input name="name" type="text">
Should be:
<input name="yourName" type="text">
I want to remake my payment form. I'm using GET method, and want to return link below form instead of redirect, after clicking submit. Someone have any idea?
<script type="text/javascript">
function formatMoney(e) {
document.getElementById('z24_kwota').value = (!isNaN(e.target.value) ? e.target.value : 0) * 100
}
</script>
<form method="get" id="myform" action="https://sklep.przelewy24.pl/zakup.php">
<input type="hidden" name="z24_id_sprzedawcy" value="000000">
<input type="hidden" name="z24_crc" value="000000">
<input type="hidden" name="z24_return_url" value="https://google.com">
<input type="hidden" name="z24_language" value="pl">
Tytuł wpłaty
<input type="text" name="z24_nazwa" id="pole" maxlength="30" value="" placeholder="Wprowadź tytuł wpłaty" required>
<br>
<input type="hidden" name="z24_kwota" id="z24_kwota">
Kwota wpłaty
<input type="text" id="pole" placeholder="Wprowadź kwotę wpłaty (PLN)" pattern="^([1-9])((\.\d{1,2})?)$|^((?!0)(\d){1,5})((\.\d{1,2})?)$|^(1(\d{5})(.\d{1,2})?)$|^(200000(.[0]{1,2})?)$" onkeyup="formatMoney(event)" required>
<br>
<BR>
<input type="submit" class="przycisk" value="zapłać teraz">
</form>
I checked all Internet, and can't find any solution
I have three fields that will be filled by the user.
one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/>Delete<div>`);
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
In your function, you have to append your label as well in its parent. Like below -
function myFunction() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
}
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -
function myFunction() {
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
}
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>
This way it will put those dynamically generated elements on specific place in your form page.
Try this - https://jsitor.com/IO08f-WBx
I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}
I'm trying to build a search box were students can search for course reserves based on their course code or faculty members names. What is missing is the part where you can change the form action url based on the checkbox you mark. I took the javascript code from the previous search box where it was used on a dropdown selection. I knew it wouldn't work on input but that's where my javascript understanding ends. Btw, I have a javascript running which allows only one checkbox to be selected. My code goes like:
<form name="frm" method="get" action="http://path1" />
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="checkbox" value="http://path1" checked="checked"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="checkbox" value="http://path2"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
<script language="javascript">
var objForm = document.search;
if (objForm.type.checked)
{
objForm.removeChild(objForm.searchType);
objForm.submit();
}
</script>
Thanks in advance
Since you have only two option I have made it radio but still if you want checkbox then change it:
<form name="frm" id="myForm" method="get" action="http://path1" >
<input name="SEARCH" value="" type="text" autocomplete="off" />
<input type="submit" value="" />
<ul>
<li>
<input type="radio" name="frmact" value="http://path1" checked="checked" onclick="formaction(this)"/>
<label for="course">Course Code</label>
</li>
<li>
<input type="radio" name="frmact" value="http://path2" onclick="formaction(this)"/>
<label for="faculty">Faculty Member</label>
</li>
</ul>
</form>
</body>
<script>
function formaction(checkbox){
document.getElementById("myForm").action = checkbox.value;;
}
</script>