I am using a form and was wondering if anyone knows some JavaScript that can edit what fields the clear button actually clears?
i.e i only want a select number of fields to be cleared once the user hits the clear button on the form.
input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;'
I just have the following which clears everything
<input id='FrmReset' type='reset' value='Clear' name='resetButton' onclick='formReset(document.getElementById("Form")); return false;' />
Let's say you have 4 fields like this:
<input type="text" value="don't clear this" id="i1" />
<input type="text" value="don't clear this" id="i2" />
<br/>
<input type="text" value="clear this" id="i3" />
<input type="text" value="clear this" id="i4" />
And you need to clear only bottom 2. Add a normal button with onclick event:
<button onclick="clearNeeded()">Clear only bottom fields</button>
function clearNeeded() {
document.getElementById('i3').value='';
document.getElementById('i4').value='';
}
As you can see - the function selectively picks only specific fields and resets their values.
Demo: http://jsfiddle.net/rdnT3/
Related
I am trying these days to do a search form that sends to two different pages with two different buttons with a single text box. So far I am doing this:
<form action="http://www.youtube.com/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="YouTube" />
</form>
<form action="https://torrentz.eu/search" method="get">
<input name="q" type="text" maxlength="128" />
<input type="submit" value="TorrentZ" />
</form>
of course the result is this:
I can work with that, but I want to make it "cuter" like this:
So far I have tried using a script but I did not get it so I scraped it, then I tried making an if/elseif but yet again, I was not sure what I was doing, I am not a good planner for what I see, a toggle button or a dropbox is not as fast, as I just need to press tab once or twice and enter to just search where I want.
As an extra note, I am just making my personal "new tab" for chrome, as the basic and the ones I find in extensions are pretty heavy for my mini laptop.
In HTML5 you can use formaction attribute.
<!DOCTYPE html>
<html>
<body>
<form>
<input name="search_query" type="text" maxlength="128" />
<input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
<input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
</form>
</body>
</html>
Since you tried and failed a script, let's look at ways we can achieve this.
Using form
Be extremely wary of what you do here. It is easy to send a get request using form but it always "flushes" out the query strings already present in the action URL, and submits the request by adding name-value pairs in its child nodes. Make sure to create your query as a child node.
<input type="text" id="box" name="searchbox" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="button" value="Youtube" onclick="search_youtube()"/>
<input type="button" value="Torrentz" onclick="search_torrentz()"/>
<script>
function search_youtube(){
var add="https://www.youtube.com/results";
var box = document.getElementById("box");
box.name="search_query"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
function search_torrentz(){
var add="https://www.torrentz.com/search";
var box = document.getElementById("box");
box.name="q"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
</script>
Using HTML5 formaction attribute
<form action="https://www.youtube.com/results" method="GET">
<input type="text" id="box" name="search_query" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="submit" value="Torrentz" formaction="https://www.torrentz.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" name="submit" value="Youtube" />
</form>
I have one form on a page with no submit button:
<form id='voteForm' action='xyz' method='post'>
<fieldset>
<input type="hidden" id="task_id" value="{$feature_details['task_id']}" />
<input type="hidden" id="vote_id" value="{$vote['vote_id']}" />
<input type="hidden" id="vote_type" value="{$vote['vote_type']}" />
<input type="hidden" id="vote_rating" value="{$vote['vote_rating']}" />
<input id="btn-update-vote" class="btn btn-sm btn-primary" type='button' disabled="disabled" value="{L('SubmitVote')}">
</fieldset>
</form>
I cannot get jQuery to trap a click event on the 'SubmitVote' button
neither of these appear to work:
$('#btn_update_vote').click(function() {
console.log('Click: #btn_update_vote');
})
$('form#voteForm').on('click', '#btn_update_vote', function() {
console.log('Click: #btn_add_comment');
})
I do not understand what can cause this!
Any help appreciated!
BTW: I CAN set the disabled attribute on the button using jQuery and on 'documentReady' I log the button to the console:
[Log] [ (tracker, line 446)
<input id="btn-update-vote" class="btn btn-sm btn-primary" type="button" disabled="disabled" value="Cast Your Vote">
]
Your button attr disabled="disabled" make it unclickable, even inline onclick listen.
<input id="btn-update-vote"
$('#btn_update_vote').click( //...
You declared your id with dashes (-), not underscores (_), so you need
$('#btn-update-vote').click(
Also #Richer is correct
I have a form with two buttons -
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm()" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
Here one button is for approve and another button for disapprove. I have a Javascript function "submitForm()" which is called "onclick" of these button. The function is like this
function submitForm(){
//if('approvedButton' is clicked){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
//}
$("#reviewApprvDisapprvForm").submit();
}
In this function I have set the action with javascript. Here, I am trying to find for which button click the "submitForm()" method is called. There are two buttons - "approveButton" and "disapproveButton". How can I do this, can anyone help me?
Thanks in advance
I would do it like this:
Remove the onclick="" from the HTML, set the image inside the input element, add the action to the form directly:
<form:form id="reviewApprvDisapprvForm" action="/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" type="submit"><img src="/images/buttons/samplesApprovedButton.png"/></input>
<br />
<input id="disapproveButton" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
$(document).ready(function() {
$('#disapproveButton').click(function(){
//your disapprove logic here
});
});
This can help
<form:form id="reviewApprvDisapprvForm" modelAttribute="updateProofingForm" method="post">
<input id="approveButton" onclick="submitForm('approve')" type="image" src="/images/buttons/samplesApprovedButton.png" />
<br />
<input id="disapproveButton" onclick="submitForm('notApprove')" type="image" src="/images/buttons/samplesNotApprovedButton.png" />
</form>
and then
function submitForm(buttonVal){
if(buttonVal=='approve'){
$("#reviewApprvDisapprvForm").attr("action","/secure/userMgmt/roleBasedProofing/updateProofingConfirmMVC.do");
}
$("#reviewApprvDisapprvForm").submit();
}
Thanks
I set a required field for all the fields in form and having two submit button.
and want the required data on only for one submitonly. In another submit i dont want required with form fields how to prevent the requied field in another submit button.
<form action="data.php">
name<input type="text" name="name" required>
std<input type="text" name="name" required>
class<input type="text" name="name" required>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="clear">
<input type="save" name="save" value="save">
</form>
in this given code the required field shoud alert only when i click on submit .and do not alert on click of save is it posible any way
You may consider catching submit events and doing different checks according to what button is pressed. Also please note that the required attribute will always make your input truly required. Here I used a custom attribute, that has no special property, but I would then use it to identify in my custom code what fields are required.
Here is how it would look like in Javascript using jQuery:
<form id="your_form" action="data.php">
name<input type="text" name="name" is_required>
std<input type="text" name="name">
class<input type="text" name="name" is_required>
<br />
<input type="submit" name="submit2" value="submit">
</form>
<input type="submit" name="submit" value="submit with check">
var ok;
$('[name=submit]').on('click', function(e) {
ok = true;
$('[is_required]').each(function() {
if (!$(this).val()) ok = false;
});
if (!ok) {
alert("Please fill in all the required fields");
} else
$("#your_form").submit();
});
You may see this code in action here: http://jsfiddle.net/z9dkjdtz/
Use the formnovalidate attribute in a button to specify that normal HTML5 form validation (such as checking that all required fields have value) be suppressed:
<input type="submit" name="save" value="save" formnovalidate>
Note: type="save" is invalid and gets ignored, so the the element would create a text input box (since type="text" is the default).
I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"