I have a webpage with a div area. In this area, there can be two different forms.
It looks like this:
Form 1:
<div id="data" ...>
<form action="/action1" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Name</label>
<input type="text" name="name" id="label2" value="" />
<label for="label3">Description</label>
<input type="text" name="desc" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
</form>
</div>
Form 2:
<div id="data" ...>
<form action="/action2" method="post">
<label for="label1">ID</label>
<input type="text" name="id" id="label1" value="" />
<label for="label2">Firstname</label>
<input type="text" name="first" id="label2" value="" />
<label for="label3">Lastname</label>
<input type="text" name="last" id="label3" value="" />
<label for="label4">Address</label>
<input type="text" name="address" id="label4" value="" />
<label for="label5">eMail</label>
<input type="text" name="mail" id="label5" value="" />
</form>
</div>
So there are two different forms. The values will be set with jQuery (Ajax call to the backend).
What is the best way to handle these two forms? Should I create two files with only the form and the load the form when they are needed? (Form 1 is needed if some clicks on button 1, form 2 is needed if someoe clicks on button 2 - the events are handled on client-side).
Or should I place both form into the single HTML file and enable or disable the form?
There's nothing stopping you have both forms in the HTML and conditionally hiding/showing the one that you want active. You're best bet is to give each form (or its containing div) a unique ID, and using this to show/hide using jQuery.
I think you should keep both the forms in the same page. And show/hide the required form as per the requirement.
Because if you keep the forms in separate HTML files, and user clicks on any button, then you'll have to make a XMLHttpRequest to get the HTML of form, whereas you can easily avoid this extra HTML request by including the HTML of the form in the same page.
I don't know if your website audience is so large or not. But saving a single HttpRequest should be very helpful.
See the article Minimize HTTP Requests by Yahoo developers. They clearly suggest to minimize HTTP requests.
Related
I have some comment forms that I want to not be used unless the user is logged in with Google+. I initially have the "submit" button on my forms hidden by the CSS display:none property. I call javascript when the user logs in to change it back to display:inline.
Is this a valid way to prevent anonymous users from posting, or am I still vulnerable by leaving the rest of the comment form open for writing and whatnot...is there some clever way to submit the form without the submit button?
<form action="" method="post" name="form1" id="make">
<fieldset>
<legend id="makelegend">Log in to Post a Reference</legend>
<input type="hidden" name="loginname" id="loginname" />
<input type="hidden" name="logintype" id="logintype" />
<input type="hidden" name="loginspecial" id="loginspecial" />
<input type="hidden" name="reply" id="reply" value="0" />
<input type="hidden" name="identity" id="identity" value="<?php echo htmlspecialchars($_GET['pageno']); ?>" />
<p><label for="posneg">Positive or Negative?
<select name="posneg">
<option value="p">Positive</option>
<option value="n">Negative</option>
</select></label></p>
<textarea name="comment" rows="5" cols="70"></textarea>
<input type="submit" id="submitter" value="POST" style="display:none;" />
</fieldset>
</form>
It is ABSOLUTELY NOT safe! You're just not displaying the data to the user, but anyone who looks at the code can still find it - or just send the request manually. I can't stress this enough: ALWAYS use server-side validation! It's fine to validate things in the browser as well, but it's not a substitute for proper security measures.
Basically I have two forms. I want to have a user upon registration fill out the first lot of information. Press next (submit), then fill out the second lot of information. Once they press register, submit both sets of POST information.
What I have is this - two sections with two different forms (there's a reason why these are split into two forms - part of the look of the site):
<section class="first">
<header>
<h1>Signup 1/2</h1>
</header>
<form id="firstForm">
<label>First Name</label>
<input type="text" class="input-text" value="" name="firstName" required />
<label>Surname</label>
<input type="text" class="input-text" value="" name="Surname" required />
<label>Username</label>
<input type="text" class="input-text" value="" name="Username" required />
<input type="submit" name="firstSubmit" value="next"/>
</form>
</section>
<section class="second">
<header>
<h1>Signup 2/2</h1>
</header>
<form name="secondForm" class="clearfix">
<label>Your Email</label>
<input type="email" class="input-text" value="" name="email" required />
<label>Password</label>
<input type="text" class="input-text" value="" name="password" required />
<input type="submit" name="secondSubmit" value="Register" />
</form>
</section>
So the second section is hidden until the user clicks the next button (submit). I have javascript stopping it from submitting, and hiding the first section, and making the second one appear:
<script type="text/javascript">
$("#firstForm").bind("submit", nextForm);
function nextForm() {
$('.first').css("display", "none");
$('.second').css("display", "block");
return false;
}
This works.
My issue is then getting the secondForm to submit, but POST both the first and second's information, as if with the one submit button, I was submitting both. Is this possible? And if so, how?
To use a GET method I'd go:
$("#secondForm").bind("submit", submitForm);
function submitForm() {
document.getElementById("firstForm").submit();
document.getElementById("secondForm").submit();
}
But I don't want to do that, as GET = a bad idea for sensitive info.
I would use one form, but wrap the two sets of inputs in divs. Just hide the first div and show the second on the first button click (which you wouldn't keep as a submit button), then submit the entire form on the second button click.
how can I use html form for detect inserted language in input to translate to other language ?
Using Hebrew(iwrit)-English languages.
<form action="http://translate.google.com/translate_t" target="_blank">
<input type="text" name="text">
<input type="hidden" value="hp" name="prev">
<input type="hidden" value="iw" name="hl">
<input type="hidden" value="y" name="js">
<input type="hidden" value="" name="file">
<input type="hidden" value="iw" name="sl">
<input type="hidden" value="en" name="tl">
<input type="hidden" value="#" name="history_state0">
<input type="submit" value="Translate">
</form>
Assuming you need it to update live and not on a form submit, you will need to make some sort of request when the textbox to translate changes (http://api.jquery.com/change/), then make the appropriate changes to the form indicating the language.
As for the functionality itself, Google has an API for Translate (https://developers.google.com/translate/v2/libraries). There you will find a JavaScript interface, and that should handle all the heavy lifting for you.
I hope that helps.
Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.
I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?