I'm building a site which has a form but for some reason, even if a user doesn't enter info into the form (even if the form hasn't been presented yet - it starts out hidden) - if I refresh the page, iOS gives me a browser alert stating:
are you sure you want to submit this form again?
Any idea why this happens or how to suppress that?
This is my form code:
<div id="vehicle_form">
<form method="post" name="emailForm">
<input class="dField" id="dfEmail" type="email" name="email" value="Email"/><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name"/><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name"/><br/>
<input class="dField" id="dfZip" type="text" maxlength="5" name="zip" value="Zip Code"/><br/>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>
<div id="dErrors"></div>
</div>
I also have this javascript acting on the form fields:
$j('.dField').focus(function(){
clearInput($j(this)[0]); //The [0] seems to be necessary to retrieve the element at the DOM object level
}).blur(function(){
restoreInput($j(this)[0]);
});
as well as some other form related javascript.
Not sure if this is exactly what you're looking for, but try this:
<form method="post" name="emailForm">
<input type="text" name="email" value="Email" size="30" onfocus="value=''"><br>
<input type="text" name="firstname" value="First Name" size="30" onfocus="value=''"><br>
<input type="text" name="lastname" value="Last Name" size="30" onfocus="value=''"><br>
<input type="text" name="zipcode" value="Zip Code" size="30" onfocus="value=''"><br>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>
Related
JSFiddle: https://jsfiddle.net/apamvz1r/1/
I have the following code that I would like to eliminate the need for the visitor to click the radio button before searching... Is this possible? I would like to completely eliminate this field or hide it.
<input type="radio" name="RProducts" onclick="frmSearch.Products.value='BB'">
If you don't click on the radio input, it doesn't work properly, even if i pre-select it, it still needs to be directly clicked on. Is there a way around this?
<form action="http://search1.bestbenefits.com/provsearch.asp" method="post" name="frmSearch" id="frmSearch" target="_blank" onSubmit="return CheckParams()">
<input type="hidden" name="Products" value="">
<input type="hidden" name="Title" value="24-7_MedPlan-20140416">
<input type="radio" name="RProducts" onclick="frmSearch.Products.value='BB'">Search Providers
<br />Zip Code: <input type="text" size="9" name="Zip" maxlength="5"><br />
<input type="submit" value="Search for Providers">
</form>
This works for me:
<form action="http://search1.bestbenefits.com/provsearch.asp" method="post" name="frmSearch" id="frmSearch" target="_blank" onSubmit="return CheckParams()">
<input type="hidden" name="Products" value="">
<input type="hidden" name="Title" value="24-7_MedPlan-20140416">
<input checked="checked" type="radio" name="RProducts" onclick="frmSearch.Products.value='BB'">Search Providers
<br />Zip Code: <input type="text" size="9" name="Zip" maxlength="5"><br />
<input type="submit" value="Search for Providers">
</form>
My problem is this: I have a video that plays and presents a form near the end. When the form is submitted I trigger that video to hide() and show() another div that contains 2 more videos. that part is working fine, but after the form posts it refreshes the page and we're back to square one.
I tried the methods found in other posts but to no avail.
Here is the Form:
<form id="contactForm" action="salesforce.com address obscured" method="POST">
<input type=hidden name="oid" value="00D40000000Mvel">
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="FIRST NAME" /><br>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="LAST NAME" /><br>
<input id="email" maxlength="80" name="email" size="20" type="text" placeholder="EMAIL" /><br>
<input id="zip" maxlength="20" name="zip" size="20" type="text" placeholder="ZIP CODE" /><br>
<button type='submit' class="submit-button" >GET STARTED!</button>
</form>
and my jQuery minus the code i was using to try and prevent refresh on submit:
var mainVid = $("#video")
var secVid = $( "#secVid" );
$( "#videoForm button" ).on( "click", function( event ) {
mainVid.hide(400);
secVid.show(400);
});
Try
$('#contactForm').on('submit', function (event) {
event.preventDefault();
$.post("your url", $(this).serialize());
mainVid.hide(400);
secVid.show(400);
});
Then the form is submitted with an ajax request and the page is not reloaded.
See http://api.jquery.com/event.preventDefault/ and http://api.jquery.com/jQuery.post/
How can I navigate to a new page without triggering the jQuery mobile form handling, which creates a ajax request and then loads the page with it's speczial funcationallity (I don't know the name for it)
Add this attribute to the form:
data-ajax="false"
Example:
<form action="demo.php" method="post" id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
I'm working on a test HTML5 login form and have the form set up like so:
<form id="login" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<h1>Log In</h1>
<fieldset id="inputs">
<input id="username" type="text" placeholder="Username" autofocus required>
<input id="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" name="submit_data" value="Log in">
</fieldset>
</form>
When clicking Submit, the form is posted back to the same page. When I print the array of POSTed elements, I'm only seeing one for 'submit_data'. 'username' and 'password' are not coming through.
Where am I going wrong?
You haven't specified names for your inputs, e.g.
<form id="login" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<h1>Log In</h1>
<fieldset id="inputs">
<input id="username" type="text" name="username" placeholder="Username" autofocus required>
<input id="password" name="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" name="submit_data" value="Log in">
</fieldset>
</form>
That might fix this problem.
Can you just perform a check for isset($_POST['username']) and isset($_POST['password']) instead of the print_r (which I assume you are using)?
<input type="..." NAME="username" ..> You haven't set var name.
Also instead of placeholder, set value="Username" and value="Password". There may not be any value passed if just using placeholder. See this test: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_placeholder
As you submit without anything, no value is passed. Once you type something in, value is passed.
I'm new to React and reactstrap and I was wondering how to setup a form that posts to a post-route on submit using the Form-tag. I couldn't find an example in the documentation that did this. So I'm looking for an equivalent of this:
<form action='/signup/insert' method = 'POST'>
<div class="form-group">
<input id ='signup' type='text' name='uid' placeholder='Username'><br>
<input id ='signup' type='password' name='pwd' placeholder='Password'><br>
<input id ='signup' type='text' name='email' placeholder='E-mail address'><br>
<button id = 'switch' type='submit'>Sign Up</button>
</div>
</form>
And I want something like this:
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="noreply#noreply.com"
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password"
/>
</FormGroup>
<Button>Sign Up</Button>
</Form>
Do I have to add this in the button tag? How to do this? My route is by the way already set up, so I just need to post it from here.
Exactly the same way as in your example without Reactstrap. Form component passes any properties that you provide to the <form> tag that gets rendered on your page so this code <Form action='/signup/insert' method='POST'> will work (if your backend is set up to handle the request.