Trying to make multiple variables in prompt box show at one time - javascript

So basically I have a function in JavaScript. Its a function where when a button is clicked it brings up a promptBox which asks you to to type an input. Ive declared multiple variables but you have to do one variable at a time. How do I get it to where all variables pop up in my promptBox() at the same time
JavaScript Code:
function promptBox()
{
var name = prompt ("Your Name");
var dateOfBirth= prompt ("Date of Birth");
var password= prompt("Password");
}
Html Code:
<button class = "submit" onclick="promptBox();">Sign Up</button>
What can I do in either html,JavaScript or CSS to fix my problem

The prompt dialog can only accept one string each time it is called.
Have you considered creating a <form> with all of the fields needed and letting the user enter them on the page instead of from prompt dialogs?
label {
display: block;
}
<form>
<label>Name:
<input name="name">
</label>
<label>Age:
<input name="age">
</label>
<label>Address:
<input name="address">
</label>
<label>City:
<input name="city">
</label>
<label>State:
<input name="state">
</label>
<label>Zip:
<input name="zip">
</label>
</form>

How could a prompt box possibly do this? It's meant for a single value. You're going to have to use some custom library - jQuery UI dialog maybe.
If you are stuck with vanilla JS, you're going to have to do some overlay DIV or something.
You should probably get more specific about what it is your want

<!-- Simple pop-up dialog box, containing a form -->
<dialog open id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
<p><label for="favFish">Favorite fish:</label>
<select id="favFish">
<option></option>
<option>Shark</option>
<option>Tuna</option>
<option>Seamonkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
For diversity's sake, here's something from MDN you could probably use if you dont want to bother using sweetalert :)
You'll still need to do the legwork either way.

Related

Move data from on input field to another and submit form

I am trying to get one input field that is higher up the page, move it's content to a form field at the bottom of the page and submit the form.
Please see what I have done here (doesn't work):
$('#move_down').click(function() {
$('#input_1').val($('#input_2').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
Moving the data is just the first part, I am also trying to get it to take the user down to the main form and submit it - is this possible with jQuery?
Updated the question to fix my silly error of omitting the ID selectors. Just need to figure out how to submit the form now.
You are right; just correct your query selector:
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
http://jsfiddle.net/82x28ryr/4/
Missing the # prefix for id selector
Works fine doing
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
As for "moving down" you have only provided html in demo for 2 inputs. You need to update question with all relevant html in order to implement additional features

How to reset HTML5 form validation errors when click back button

Im having an issue clearing the HTML5 oninvalid red border around inputs. If a user clicks the submit button without correctly filling out the form, the HTML5 setCustomValidity errors will show and the default red outline will appear around any required input fields that were left blank...this all works great. Problem is, if a user clicks the back button, then comes back to this form or another section of the form within this form, the form will still display all invalid form elements with the red outline.
What i would like to happen, is if this forms "go back" button is clicked, that will reset/clear the form so that all form elements are reset and none will display the red outline unless the form was once again submitted and has empty/incorrect form information.
Here is a snippet of my code:
<form class="login-form" aria-label="Login" action="" method="post">
<div class="login-A">
<h4>Are you a client?</h4>
<div>
<button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button>
Yes
</button>
<button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button>
No
</button>
</div>
</div>
<div class="login-B">
<h4>Existing client information</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button>
Go back
</button>
<p>Enter your online ID and Password</p>
<div>
<div>
<label for="olb-user-id">User ID</label>
<input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')">
</div>
<div>
<label for="olb-password">Password</label>
<input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')">
</div>
</div>
<button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit>
Continue
</button>
</div><!-- login-B -->
<div class="login-C">
<h4 class="text">New client</h4>
<button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button>
Go back
</button>
<label for="login-state">Select your state to view your account options.</label>
<div class="login-state-container">
<select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')">
<option value="" selected="selected">State</option>
<option value="AL">AL</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="IN">IN</option>
<option value="WV">WV</option>
<option value="DC">Washington, DC</option>
</select>
</div>
</div>
</form>
Ive searched for days trying to figure out how to solve this issue. I have tried:
function clearValidity(){
document.getElementById('olb-user-id').setCustomValidity('');
document.getElementById('olb-password').setCustomValidity('');
document.getElementById('login-state').setCustomValidity('');
}
document.getElementById( 'olb-back-btn-2' ).onclick = function() {clearValidity()};
document.getElementById( 'olb-back-btn-3' ).onclick = function() {clearValidity()};
also tried:
$('.login-form').trigger("reset");
Along with many other trials from posts i have read but nothing seems to work. Please help! Thank you!
The back button is a save of how the last page ended. The only way to do this, is to change the form to post the data using Javascript.
Use javascript collect the data and HttpXML to post it
First collect the data with JavaScript
Then clear all the fields using javascript
Post the data using javascript a HttpXML request
Upon return (xml repsonse) Redirect if required or show an error for them to re complete the form (the form will now be blank and ready to start again)
If using this method be sure to disable the submit button until the response has been returned from the XML post to stop the user submitting multiple times

HTML Submit buttons on forms reload but not lose data

Lets say I have this: http://jsfiddle.net/oh0omatq/2/
<form>
<input placeholder="my value">Country
<button name="subject" type="submit" value="england">England</button>
<button name="subject" type="submit" value="wales">Wales</button>
<br />Your country is: Wales
<input type="submit">
</form>
Can I use this submit buttons for england and wales to set a value within the form, and reload the form, but also not loose the information already entered in the form, such as in the input box.
This above is just a preview, but I want to be able to reload and filter the input elements in the form depending on the button the user clicked, but also not loose any previously entered data in the fields.
I would recommend using javascript for this. I've edited your fiddle to use an onclick function.
<form>
<input placeholder="my value">
Country
<button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
<button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
Your country is: <span id="value">Wales</span>
<input type="submit">
</form>
Changing the buttons to a type="button" so they don't submit the form allows the javascript to edit the value. Ofcourse you can make an input out of the span, allowing the chosen value to be sent with the form. Ofcourse, a select box would work as well then.
Would that do what you want?
You can see the edited fiddle here.
Keep in mind, this is a quick sketch. It is not recommended to use javascript inline.

HTML single-page Landing page with input fields that transition

My landing page has two steps (one for selecting an option from a dropdown menu and pressing 'send', and one for entering your email and pressing 'send'). These steps appear to be controlled either by javascript or html5, something I am not used to. I need to add a third "step" to the system.
Here is the site link: you will see that after selecting an answer and entering something in the email field you are back to the first selection.
the section of code in index.html appears like this:
'<!-- Step 1 -->
<div class="steps step-1">
<p>STEP 1: Answer this question</p>
<form action="#" method="post">
<div class="select-holder">
<label>Who is giving this away the awesome thing that you're about to download?</label>
<div class="select-wrap">
<select name="" >
<option selected="selected" value="Select Your Answer">Select Your Answer</option>
<option value="LeadBrite, Duh!">LeadBrite, Duh!</option>
<option value="Lady Gaga">Lady Gaga</option>
<option value="Santa Claus">Santa Claus</option>
</select>
</div>
</div>
<input type="submit" value="Submit Answer" class="submit-button" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 1 -->
<!-- Step 2 -->
<div class="steps step-2">
<p>STEP 2: Your details</p>
<form action="#" method="post">
<input type="text" class="field" value="Enter your email address" title="Enter your email address" />
<input type="submit" value="Send" class="send" />
</form>
<div class="contest-ends">
<p><span>Contest Ends</span></p>
<p>Month 00, 00:00 AAA</p>
</div>
</div>
<!-- END Step 2 -->'
As I said, I want to add a step three but I do not know how to move forward. The source files include an HTML5 file and others that I believe I'd have to connect step-3 to in order for it to function properly.
I appreciate any help. Thanks.
Hoping to simplify this by creating a sample to work with. If you check out http://jsfiddle.net/fgAUQ/, you can see the form listening for the submit during the email question.
$(document).on('submit', 'form', function (e) {
// Check email address
// if email address ok
$('.step-2').hide();
$('.step-3').fadeIn(800);
e.preventDefault();
// else
// alert
// e.preventDefault();
// end if
});
You'll still need to follow this through with storing / processing the email and handling the form upload.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

Categories

Resources