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.
Related
<form action="" id="pb-signup-form">
<div class="col-md-7">
<div class="pb-signup-box">
<div class="pb-signup-box-main-box">
<label class="pb-login-usr-txt"> Sign up # Popibay </label>
<input name="pb-signup-name" class="validate[required] text-input pb-all-inputs" type="text" placeholder="Name" id="pb-signup-box-email">
<input name="pb-signup-othername" class="pb-all-inputs" type="text" placeholder="Othername" id="pb-login-box-pass">
<input name="pb-signup-surname" class="validate[required] text-input pb-all-inputs" type="text" placeholder="Surname" id="pb-signup-box-email">
<input name="pb-signup-username" class="validate[required] text-input pb-all-inputs" type="text" placeholder="Username" id="pb-signup-box-email">
<input name="pb-signup-email" class="validate[required,custom[email]] text-input pb-all-inputs" type="email" placeholder="Email" id="pb-login-box-pass">
<input name="pb-signup-password" class="validate[required] text-input pb-all-inputs" type="password" placeholder="Password" id="pb-login-box-pass">
<!-- <input name="pb-signup-cpassword" class="validate[required,equals[password]] password-input pb-all-inputs" type="password" placeholder="Confirm Password" id="pb-signup-box-email"> -->
<button class="pb-all-buttons" type="submit" id="pb-hm-hd-but-login">Log-in</button>
</div>
</div>
</div>
</form>
I am using the laravel4 framework and i have this form i am using to post this form to the server for database input. also i noticed some when i added a post method to the form it produced an error.
<form action="post" id="pb-signup-form">
Symfony \ Component \ HttpKernel \ Exception \ NotFoundHttpException
so how do i send a form to the database? Please with nice explanations.
Have you defined your route? When Laravel says "NotFoundHttpException", that's usually what it means.
Define your post route. Also, 'post' is an html/http form method, not action.
action='route | url'
<form action="url | route" method="post"> ...inputs... </form>
You will need to add an action to your form like:
<form action="post" id="pb-signup-form" action="{{link_to('/myroute')}}">
and then create a route in your routes.php file:
Route::post('/myroute', 'myController#myFunction');
You then have to create myController with a method myFunction, in your 'controllers folder'.
To access the data use:
$input = Input::all();
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 am trying to develop my first component for Joomla. I have installed Joomla 3, and things are going pretty good.
I want to add a form validation (client side) on the frontend, where I have a submission form.
My code is:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
The validation works, but does not show any message error - just a field. The HTML for the error field is:
<div id="system-message-container">
<div id="system-message" class="alert alert-error">
<h4 class="alert-heading"></h4>
<div></div>
</div>
</div>
So, how do I add text to the validation? Do I need to create a language file for my component?
You need to change form submit button as input
Try this-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<input type="submit" name="submit" value="Submit" />
</form>
Update:-
You can try this also-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form name="adminForm" id="myForm" method="post" onsubmit="return submitbutton();">
<input id="email" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton() {
var f = document.adminForm;
if (document.formvalidator.isValid(f)) {
document.adminForm.submit();
return true;
}
else {
var msg = new Array();
msg.push('Invalid input, please verify again!');
if($('email').hasClass('invalid')){
msg.push('<?php echo JText::_('Invalid Email')?>');
}
alert (msg.join('\n'));
return false;
}
}
</script>
This will validate form at the client side but not in server side.
For more info check this - http://docs.joomla.org/Form_validation
also make sure you have added this code in the index.php
<jdoc:include type="message" />
I've just had this very problem. The issue is that you don't have a label associated with the form field, Joomla validation code builds the error message from the label text.
If you don't want the label to appear then set it to hidden (if you're using bootstrap use the hidden class). You must add a for clause to the label. If you also give it an id which is the set to the input id + '-lbl', then it will optimise the speed of the label lookup.
<form class="form-validate" id="myForm" method="post">
<label class="hidden" for="inputid" id="inputid-lbl">Form label</label>
<input id="inputid" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</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 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>