I would like to make this form dynamic with prototype. I mean, the radio should be disabled, but when you chose one, with js, it should turn them enabled, same way if you chose the other one, the 1st should turn disabled.
This is my HTML, but I have no idea where to start with JS to make this work, thank you
<form id="uploadForm" method="post" action="/parser/parseCurriculumVitae.do" enctype="multipart/form-data">
<fieldset>
<div id="uploadCv">
<input type="radio" id="uploadCvSelector" name="uploadFormSelector"/>
<input disabled type="file" id="uploadCv" name="uploadCv" />
</div>
<div id="pastedCv">
<input type="radio" id="pastedCvSelector" name="uploadFormSelector" />
<textarea disabled id="pastedCv" name="pastedCv" rows="8" cols="40" onclick="this.value=''">Paste your Cv Here</textarea>
</div>
<input type="submit" value="Send'em!"/>
</fieldset>
</form>
i think your request to use prototype prejudices the answer. you can do this just fine without a library.
<input type="radio" id="pastedCvSelector" name="uploadFormSelector" onclick="document.getElementById('pastedCv').disabled=false;document.getElementById('uploadCv').disabled=true;">
<textarea disabled id="pastedCv" name="pastedCv" rows="8" cols="40" onclick="this.value=''">Paste your Cv Here</textarea>
UPDATED (again)
Related
I'm generating a long report that has multiple FORMs in it. I want to be able to include links from within the form itself that can pre-populate select form fields. But also support multiple FORMS.
(html brackets removed)
FORM id="form1" METHOD="POST" ACTION="..." INPUT NAME="date1" SIZE="10" INPUT type="submit" value="Post" /FORM
.. data and links like
2010-01-01
2010-03-04
.. etc
FORM id="form2" METHOD="POST" ACTION="..." INPUT NAME="date1" SIZE="10" INPUT type="submit" value="Post" /FORM
.. data and links like
2010-01-01
2010-03-04
.. etc
I want to add some Javascript/html so that the date links can be clickable, and if clicked, they will populate the upper FORM field named "date1" with the clicked date.
The idea is you click on one or more of the dates and can submit each of the multiple forms. I'm fairly new to Javascript and need to know exactly where to add which code to make this work?
I am aware there are some other posts about links to fill in forms but nothing about using multiple form IDs and wondering if there is a more efficient way and approach?
I found someone on fiverr who could bang this out, paid them and might as well share..
Here is the sample code and solution:
<html>
<head>
<title>Simple JS Request</title>
<script type="text/javascript">
function jsRequest(formID, dataValue, inputField) {
document.forms[formID][inputField].value = dataValue;
}
</script>
</head>
<body>
<form id="form1" action="xx" method="POST">
<input size="10" name="date1" value=""/>
<input size="10" name="date2" value=""/>
<input type="submit" value="go"/>
</form>
<br>
<a onclick="jsRequest('form1', '2010-01-01', 'date1')" style="cursor: pointer;">2010-01-01</a>
<br>
<a onclick="jsRequest('form1', '2010-02-01', 'date2')" style="cursor: pointer;">2010-02-01</a>
<br>
<br>
<br>
<br>
<br>
<br>
<form id="form2" action="xx" method="POST">
<input size="10" name="date1" value=""/>
<input size="10" name="date2" value=""/>
<input type="submit" value="go"/>
</form>
<br>
<a onclick="jsRequest('form2', '2010-01-01', 'date1')" style="cursor: pointer;">2010-01-01</a>
<br>
<a onclick="jsRequest('form2', '2010-02-01', 'date2')" style="cursor: pointer;">2010-02-01</a>
</body>
</html>
im making a website for this company and they have to go through this to make deliveries, for some reason my submit button won't work, sorry im new.
the code i pasted is in 2 different section, the script is on the top while the div class is on the body section.
Tried searching the web but cant seem to find a solution.
</script>
<div class="4u12u$(large)">
<input type="checkbox" id="hygiene" name="hygiene"><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety"><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan"><label for="pan">Pan/Wheel Chuck</label>
</div>
I want to do something like "Check all of this before proceeding" thingy.
You are missing the basics, ive chosen to GET the form here as it applies to the url
<form action="#" method="get">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked="checked">
<input type="submit" value="submit">
</form>
You can learn about html (and other languages) over at https://www.w3schools.com/ they have some good resources to start from.
try this way
<div class="4u12u$(large)">
<form action="your url" method="post">
<input type="checkbox" id="hygiene" name="hygiene" required><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety" required><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan" required><label for="pan">Pan/Wheel Chuck</label>
</form>
</div>
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.
I have a textarea within a form element and I want it to auto-resize with this jquery plugin, but it won't work when I have it in a form that has an id. This is the form,
<form method="post" action="index.php" id="Form">
<fieldset>
<div class="input-group">
<textarea cols="150" rows="1" style="resize: none;" placeholder="Comment..." class="form-control" type="text" id="commentBox1" name="comment"></textarea>
</div>
<input type="hidden" id="hidden" value="'.$statusID.'" name="sID">
</fieldset>
<input class="Link LButton" type="submit" value="Add comment" name="sComment" />
</form>
The textarea will resize if the form doesn't have an ID, but if it does then it won't.
Using the jQuery Autoresize plugin from: https://github.com/jackmoore/autosize and using
$('textarea').autosize();
Works for me. MacOS Chrome.
Which autoresize library are you using? Also your code didn't include a call to initialize the plugin with the textarea field. Please include your relevant JavaScript code also ?
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.