i was making a website with PHP,jQuery,AJAX,mySQL which has lot of interaction with user. Now what i was asking that using forms are really necessary ?
what i have done for most of my user inputs are kinda like this -->
simple e.g
<div class="contact-form">
<input type="text" class="textInputs" id="name" placeholder="Enter your name..." />
<button class="submitButton" id="contactSend">Subscribe</button>
</div>
A SIMPLE comment system
<div class="comment-box" d-id="1">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
<div class="comment-box" d-id="2">
<input type="text" class="textInputs" id="comment" placeholder="Enter comment..." />
<button class="submitButton" id="comment">Comment</button>
</div>
JQUERY kinda this->
$('#comment').click(function(){
var id = $(this).closest('.comment-box').attr('data-id');
//ajax stuff
}):
Therefore what i wanna ask is whether this kinda structure is good or gonna cause some serious problem ?
Are using <form>'s compulsory ?
If you are submitting form by clicking submit button and posting variable to other pages or the same page then tag is necessary
If you are using form tag to find input values to post using ajax is necessary
If you are using ajax and pulling input values using dom id to post via ajax form is not required, in this case you may also need to do javascript validation using dom ids
Ideally using tag is better and follows standard HTML structure.
It depends upon your requirement and how you going to use the form in your project.
If you have min. no of fields ( 2-3 fields ) in your form. You can directly manipulate the form fields using id or name with JQuery or JavaScript. Otherwise you should have form tag to manipulate the data with more fields in the form.
I would recommend to have form tag in your page to maintain the standard format and use form tag and Ajax submission with Jquery.
Note: Anyway if you are going to get form data using Jquery, better to use the following syntax to get the from values:
// To check the radio button
var isAnsChecked = $("input:radio[name=<FIELDNAME>]").is(":checked");
var radio-value = $("input:radio[name=<FIELDNAME>]:checked").val();
// get Text box values
var text-value = $("input:text[name=<FIELDNAME>]").val();
Related
So im trying to create a search for a name but when i click the sumbit button it goes to websitelink.com?=name=Nighel but i want it to go like this websitelink.com/Nighel/
Yes i'm already using htacces thats why the ?= doesnt work for me
I cant seem to figure out how to sort this out.
This is for searching based on name in my logs
What i use for grabbing the name
$name = isset($_GET['playername']) ? $_GET['playername'] : "";
<div class="ironman-nav">
<form>
<span class="ironman-nav__option">Search for username</span>
<input class="ironman-nav__option" type="text" name="playername" placeholder="Username..." autocomplete="off">
<input class="ironman-nav__option" type="submit" value="Submit">
</form>
</div>
You can solve this with javascript changing dynamically the form action attribute with the input value when a key is pressed over it or before submit the form.
The client side is not aware of your server rewrite rule
For the client test in website.com/test/ is just part of the URL, so if you want the browser to submit the form to website.com/test/ then set the action attribute of the form as website.com/test/
if you want the test part to be variable then you have to build the URL of the form dynamically. something like this
<div class="ironman-nav">
<form action="https://website.com/<?=$name?>">
<span>Search for username</span>
<input type="text" name="playername">
<input type="submit" value="Submit">
</form>
</div>
I'll break down my response into two parts, the first explaining the behavior of the original code, and the second will contain possible implementation routes.
HTML forms, by default, will take collate all the input tags (<input>, <textarea>, <select>, etc) as a dictionary, where the key is the node's name (the attribute) and the value is the node's value (also the attribute).
So in your case,
$name = isset($_GET['playername']) ? $_GET['playername'] : "";
<div class="ironman-nav">
<form>
<span class="ironman-nav__option">Search for username</span>
<input class="ironman-nav__option" type="text" name="playername" placeholder="Username..." autocomplete="off">
<input class="ironman-nav__option" type="submit" value="Submit">
</form>
</div>
Will do the following, on submit:
Create a dictionary containing the following key-value pairs: playername=VALUE_FROM_PLAYERNAME_INPUT
Make a GET request to the current page with the above parameters: GET /thispage?playername=VALUE_FROM_PLAYERNAME_INPUT
Since you wanted the request to go to /thispage/VALUE_FROM_PLAYERNAME_INPUT instead, you will need to modify the submission event handler for that form. Unfortuneatly it appears that Accountant م's won't worry for you since you don't have the target username at the time the search page is loaded (so the action attribute of the form tag cannot be pre-populated with the target user).
var searchForm = document.querySelector('.ironman-nav form');
searchForm.addEventListener('submit', function(evt) {
searchForm.action = '' + searchForm.querySelector('input[name="playername"]').value;
});
The reason I put an empty string in the search form action is in case you needed to prefix the action URL with anything. For example, if your search page and results page was called search.html, then searchForm.action = 'search.html' + searchForm.querySelector('input[name="playername"]').value;. You have to do this because it is a relative URL (action URL does not begin with a protocol or slash), and as such the browser will search for that resource starting from the parent of the current page.
I have a PHP page that loads several parts of a form using AJAX. For instance, first check if the user is already registered, if so the script loads (with AJAX) the rest of the form. The form will not be submited using AJAX what can be a problem when the user submits the form (without AJAX) - imagine there are some errors - the form will loose all values.
I'm wondering if CSS hiding part of the form and after the successful login use JS to display the rest of the form, would be better.
Here some code:
<form action="some_action.php">
Email: <input type="text" name="email" id="email"> <br />
Password: <input type="password" name="password" id="password"> <br />
<button id="vrf_login">Verificar</button>
<div id="rest_form">
</div>
</form>
AJAX:
- CHECK login: if email and password matches then
- LOAD the form for div with id "rest_form"
(it is in another file, for instance:
<input type="text" name="place" id="place">
<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit">
)
The problem is if I submit the form (without AJAX) and there are errors I will loose the form loaded with AJAX
EDIT (again)
Thank you all for your constructive suggestions:
The solution I adopted is close to the first Alkis's suggestion:
almost all the form is hidden (CSS)
after some logic choices the (part of the) form is turned visible (jQuery) - to "remember" what parts should be visible in case of submission failed (server side validation) some session variables hold the information (AJAX) - and then, after the submission (failed) use jQuery to restore the prior form structure (get the session variables with JS this way: var xpto = "<?php echo $_SESSION['prior_xpto']; ?>" ; )
the fields of the form will remember theirs values (with PHP)
You have 3 options.
Stop loading the whole form by ajax. Hide it with css and show it if the the conditions are met. If the page is shown after some validation error, just show it (change the css inline or give it a different class)
Have a condition and every time the page loads check if it is a first load or if the page is shown after some validation error occured. If the latter is true then load again the form with ajax. This condition can be a hidden field that takes its value from the server and you check it on the client every time you serve the page.
The second solution can be done on the server too. Have the condition be checked on the server. If it's a first load, then don't populate the form and let it be populated from ajax as you do now. If it's after a validation error then pre-populate the form. It's just an if/else clause.
Please provide some codes for your question, but i guess your problem is sending result using a button with "submit" type !
if you have a form like this:
<form>
<inputs ...>
<input type="submit" value="Send data" onclick="SendDataUsingAjax()" >
</form>
after clicking on submit all values on input will reset regardless of what your ajax function is doing. to fix this problem you only need to change type="submit" to type="button".
I dont know if this is even possible without javascript but i want an form input and when i send the form it should add some text on the value.
<form method="post" action="https://somesite.com">
<input name="snapname" style="width: 177px; margin-top: 340px;" type="text" placeholder="Your username">
<input type="Submit" name="send">
</form>
So right now the form sends the value that is typed from the user in the browser.
Is there an way for me to add text when i send the form that the user cant see? Do i need to do it in javascript? Or is it possible in HTML? HTML5?
For example lets say the user writes adam
The value of snapname is now adam
When they click submit it will submit it as adam
But what i want is to add text to the value.
So i want mytext+adam to be the value of snapname where mytext is a static value.
I do not want to use javascript if i dont need to. Is it a good idea to use some kind of redirect php script? And let the script add the text and then send the users to the correct webadress with right value?
Use javascript or simply:
$my_var = "My Text" . $_POST['snapname'];
And then use this variable in php.
If you are submitting to an external site your best bet will be to use javascript. You can remove the name from the visible input (so its data is not submitted), add a hidden field with the correct name, then populate the hidden fields value with javascript:
<form method="post" action="https://somesite.com">
<input onkeyup="appendvalue(this.value);" type="text" placeholder="Your username">
<input name="snapname" type="hidden" id="snapname">
<input type="Submit" name="send">
</form>
<script>
function appendvalue(userval){
var append = "somestring";
var hidden = document.getElementById("snapname");
hidden.value = userval+append;
}
</script>
PHP is going to be your best bet here, as Faiz said above create a simple variable and extend the $_POST['snapname'] to include what you need.
For my php file, I need to grab the unique form name.
The php file is executed when a user clicks the submit button. However, there are multiple submit button each with the same id, but they all have unique names. I need the name when they click on the submit button.
you dont want elements in html with the same id - bad practice in general. Your page will likely load normally but an html validator will notice it as an error.
html validator: http://validator.w3.org/
without seeing your code, its difficult to give you a definitive answer. if you have miltuple forms you can use hidden inputs. e.g.
<input type="hidden" name="form_name" />
Otherwise you can use javascript to put data in the form when the button is clicked. example javascript using jquery
html:
<form id="formid" >
<button type="button" id="someid" onclick="submitForm('btn1')" />
<button type="button" id="someid" onclick="submitForm('btn2')" />
<input type="hidden" id="btnsubmitid" value="" />
</form>
js:
function submitForm(btnID){
$("#btnsubmitid").val(btnID);
$("#formid").submit();
}
1 way is to put a hidden input inside of your form.
<input type="hidden" name="formName" value="[name of form]" />
then in your php, you can get it using
$form-name = $_POST['formName'];
pretty sure there are other ways, but this came to mind first.
I have a HTML form inside of a PHP file and I am trying to validate this form using Jquery. To my dismay,I am not able to have the form validated before the page is summited, ie refreshed. Furthermore, I have use seveal different plugins and I do not get any notifications of any kind. Here is the form as is:
<div id="contactRight">
<form method="post" action="form.php">
<input type="text" class="required" id="first" value="First*" ></input><br/>
<input type="Last Name" value="Last*" id="lastname"></input><br/>
<input type="text" value="Email*" id="email"></input><br/>
<textarea id="subject" id="subject">Subject*</textarea>
<input class="submit" type="submit" value="submit"></input>
</form>
Using the bassistance validation plugin it says that you can give your inputs a class with a value of "required" causing the validation plugin to kick in. I am overfly frustrated with my attempts of making this form work. More so, using HTML 5 is catastrophic, I do not receice any notifications of any input fields not being filled in. Is there a different approach I should be taking?
If you want to use HTML5's native form validation, do the following:
for input fields requiring a value, add required attribute in the input tag
for checking email, the input tag should have a type attribute as 'email'.
for other sorts of pattern matching, use pattern attribute with regex.
Reference:
https://blog.mozilla.org/webdev/2011/03/14/html5-form-validation-on-sumo/
http://www.developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/
BTW, If you want to disable this native form validation, add novalidate attribute in form tag.
I have discovered the problem, I can add a placeholder tag which will allow me to keep the values empty. I had values, so the validator was working as expected. Silly Me. My next question though, is the placeholder tag applicable in all other browsers?