I have a form having login button and registeration button.
Registeration Button:
This button should deal two text boxes name and email:
<div id="regisbutton" class="regisbutton1">
<input type="submit" value="Register" class="regisbutton" name="registerSubmit"/>
</div>
Login Button:
This button should also consider only two textboxes username and password:
<div id="loginbutton" class="loginbuttonclass">
<input type="submit" value="Login" class="loginbutton" name="loginSubmit" />
</div>
Problem is I put validation JavaScript which runs automatically and before form action it checks if text boxes are empty or not. But I want to run this JavaScript for registeration textboxes only not for login textboxes.
I have used submit type for both buttons.
You are using two different actions, so you need to different forms!
Without the <form> tag, the input button is quite useless anyway! Also don't rely on javascript only, validate the form with php as well in case js is turned off by the client!
So just wrap each submit button in a different form with a different action/validation and you're done!
If you want validation to only run if you click register, you shouldnt link the validation function to the form submit event but to the register button onclick event.
Related
What is the difference between HTML <input type='button' /> and <input type='submit' />?
<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit"> buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
The first submit button of the form is also the one being clicked for implicit submission, f.e. by pressing enter in a text input.
A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).
It should be also mentioned that a named input of type="submit" will be also submitted together with the other form's named fields while a named input type="button" won't.
With other words, in the example below, the named input name=button1 WON'T get submitted while the named input name=submit1 WILL get submitted.
Sample HTML form (index.html):
<form action="checkout.php" method="POST">
<!-- this won't get submitted despite being named -->
<input type="button" name="button1" value="a button">
<!-- this one does; so the input's TYPE is important! -->
<input type="submit" name="submit1" value="a submit button">
</form>
The PHP script (checkout.php) that process the above form's action:
<?php var_dump($_POST); ?>
Test the above on your local machine by creating the two files in a folder named /tmp/test/ then running the built-in PHP web server from shell:
php -S localhost:3000 -t /tmp/test/
Open your browser at http://localhost:3000 and see for yourself.
One would wonder why would we need to submit a named button? It depends on the back-end script. For instance the WooCommerce WordPress plugin won't process a Checkout page posted unless the Place Order named button is submitted too. If you alter its type from submit to button then this button won't get submitted and thus the Checkout form would never get processed.
This is probably a small detail but you know, the devil is in the details.
IE 8 actually uses the first button it encounters submit or button. Instead of easily indicating which is desired by making it a input type=submit the order on the page is actually significant.
I'm building a website in which the user can create articles with multiple images.
I would like to let the users while editing the form to can delete some image that they want. So I want to have in my form the main submit button that execute the function that store all details of article but also to I have another submit button that execute the function that delete the image.
How can I do that?
Thank you so much for your attention and participation.
If I got you right, you want 1 FORM, 2 SUBMIT buttons, and based on which one you press, do a different action? It is possible to do this, but not very practical.
To do it, create 2 submit buttons with each a value. I.e.:
<input type="submit" name="mysubmit" value="delete image" />
<input type="submit" name="mysubmit" value="send the form" />
when doing this, your post/get data will contain one item names mysubmit with the value, so you know which button was pressed, and you can do an action based on this.
However, when you submit a form by pressing a submit button, you do send the whole thing to your server, and have a page refresh. I usually prefer to use Ajax for the simple operation. For example, I would remove the delete submit button and replace it a simple button. When pressed, send an Ajax call to tell the server to delete the image, and use DOM to delete the image in the browser DOM tree (usually jQuery). Note that you can also use Ajax to post the form, nicer interface, and no page refresh.
Good Morning.
I am working on button click counter using javascript function. The tricky thing is button type is submit, so page is reloaded whenever I click this button .
Here is the code which include the button.
<div class="skip">
<form method="post" >
<input type="hidden" id="skip_tinv" name="skip_tinv" value=""></input>
<button class="skip" type="submit" value="8" name="submit" onclick="skipCounter();">Skip >></button>
<?php include('includes/aftersubmit.php'); ?>
</form>
I have ten of this form in one page(which means ten of skip button in one page), and I want this "skip" button is disabled when it clicked more than three times. Do you have any idea of this?
The idea using php is also welcomed. Thank you for your help.
You can use jQuery - Prevent Default or Javascript - Prevent Default This will stop the submit button from reloading the page and you can keep track of how many times the buttons were clicked. Once that counter gets above 3 then use jQuery/javascript to hide the skip button
I've built a simple time picker within a form and decided to use a button which toggles between "am" and "pm" onClick. My problem is that if I use
<input type="button" value="AM" name="someName[]" onClick="clockswap(this)">
The $_POST data doesn't contain the button's value. I can get the value to come through as expected if I change the input type to "submit"
<input type="submit" value="AM" name="someName[]" onClick="clockswap(this)">
However, when type="submit" this button will trigger the form to submit and I obviously don't want the form to submit when the user chooses between "AM" and "PM"
Is there something I've overlooked to allow me to have a button who's value get's posted with the rest of the form data but does not also trigger the submission of the form?
I normally don't see a button used like this, but usually something like a radio button.
The best way I would know how to handle this, while maintaining the button, would be to add a <input type="hidden"/> field, and since you already have a clockswap JavaScript function, update the value of the hidden field with the value that you want to be posted as part of your form as part of that function.
I have a script that allows the posting of news. I want to be able to create a 'save as draft' button next to the 'publish' button. How can I allow the 'save as draft' button to pass a value to the back end?
I just need a simple 1 or 0 depending on which button was pressed, I'm using php by the way.
<input type="submit" name="saveasdraft" value="Save as Draft">
<input type="submit" name="save" value="Save">
And then you can detect which button was pressed at the backend by their name. The one that was pressed will be present in the submitted form fields. The others won't be.
You can use multiple form elements.