I have a dropdown menu with a couple of values that link to functions. I also have a textbox and submit button. Basically what I want to do is if a certain value in the drop down box is selected it disables or hides the submit button and possibly the textbox is made blank and once another value is selected it turns both back on.
My HTML Code:
<body>
<p><label>Drawing tool: <select id="dtool">
<option value="line">Line</option>
<option value="rect">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="eraser">Eraser</option>
</select></label></p>
//Some canvas code
<form id="frmColor">
<input type='color' id='color' />
</form>
<input type='submit' value='Change Color' id="colorSubmit"/>
Javascript in a linked file called canvas.js:
...
tools.eraser = function () {
var tool = this;
this.started = false;
var varPenColor = "White";
context.strokeStyle = varPenColor;
document.frmColor.colorSubmit.disabled=true;
Basically when I select the eraser from the drop down it all works but the submit button will not disable.
Im new to JS and not sure if I need to add some sort of listener or get element id any ideas?
You have the submit button outside of the form. (as seen in the example code..)
<form id="frmColor">
<input type='color' id='color' />
</form>
<input type='submit' value='Change Color' id="colorSubmit"/>
should be
<form id="frmColor">
<input type='color' id='color' />
<input type='submit' value='Change Color' id="colorSubmit"/>
</form>
Related
I have a form in which i use multiple Checkbox. On Checkboxes i use JavaScript for validation If I checked all checkbox, it proceeds ahead otherwise it show an alert message.
My code is working Well
Problem
Because i have Two Button on my form and they have different functionality. I want to post value of Button on my action page
My Code goes here
<script>
function letter_submit(){
var pr = document.getElementsByName('pr'),
i = 0;
var allAreChecked = true;
for( ; i < pr.length; i++ )
{
if( pr[i].checked=='' ) {
allAreChecked = false;
}
}
if (!allAreChecked) {
alert("Please Check All Checkboxes");
exit;
} else {
alert("All OK");
document.getElementById("approve_letter").submit();
}
}
</script>
<form action="letter_approve_action.php" id="approve_letter" name = "approve_letter" method="POST" >
<input type="checkbox" name="pr" id="pr" value="" /> NL is appropriately addressed.
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Checked Press Release
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Applicable Methodology is rightly Marked
</br>
<input type="checkbox" name="pr" id="pr" value="" /> Respective Sector Study on Website is Updated Within Last 12 Months.
</br>
<button type="button" name="btn_submit" id="btn_submit" value="Approve" onclick="letter_submit();">Approve</button>
<button type="button" name="btn_submit" id="btn_submit" value="Re - Submit" />Re-Submit</button>
</form>
On action page i use
echo $submit = $_POST ['btn_submit'];
and i got an error
Notice: Undefined index: btn_submit in C:\xampp\htdocs\Work_Que_Backup\login\pacra-all\w_q\nl\letter_approve_action.php on line 26
You may use <button> tag.
For example:
<form method="post">
<input type="text" name="myText" value="some text here..."/>
<button type="submit" name="myButton" value="buttonValue">Submit</button>
</form>
The label tht is displayed is "Submit" but you can access your button value from the server with a different value.
It will be accessible with php on server side as:
echo $_POST['myButton']; //buttonValue
The problem in your code is that your button is of type "button", and you trigger the POST by javascript - so the value for btn_submit is never set.
Change the button type to "submit" and move the event handler onclick=... to the form tag onsubmit=.... In your javascript function, you can the cancel the submit by returning false.
I'm creating a custom alert by using jquery dialogue and currently on click submit (with id=submit) it checks to see if the value of id choose_client = "" and if so, prompt dialogue box and not process form.
What its doing instead is processing the form instead AND not even showing the dialogue. Any ideas why? Here is my code:
$('#submit').click(function(){
if($('#choose_client').val() == ''){
$("<div title='Invoice Error'>Please Choose A Client</div>").dialog();
event.preventDefault();
}
});
html:
<form method="post" action="new_invoice.php">
Client: <select id="choose_client" name="client">
<option name="client_none" value="">Choose A Client</option>
</select>
<input type="submit" id="submit" name="submit" value="Submit" class="step" disabled>
</form><br />
In order for event.preventDefault(); to work, you need to pass event as an argument:
$('#submit').click(function(event){
So this has been driving me nuts, im looking for a solution that will fill a input field from what ever selection is made from a drop down.
My current working solution (that does not include a drop down) is as follows :
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<input type="submit" class="button" value="Click to watch the stream" />
</form>
So that auto fills the text field with "apolloz" then when you press submit it takes you to the relevant page which uses the word apolloz.
Im looking for a solution that you can select the streamer from a drop down list, select it and that option fills the text field, and you can then submit.
Im sure this is javascript based as i have seen similar things which use numerical values.
Sorry if this is a bit vague, but any and all help is much appreciated.
try this
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' id="txt" name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<select id="mySelect" onchange="selectionchange();">
<option value="abc" >abc</option>
<option value="xyz" >xyz</option>
</select>
<input type="submit" class="button" value="Click to watch the stream" />
</form>
and add following javascript function
function selectionchange()
{
var e = document.getElementById("mySelect");
var str = e.options[e.selectedIndex].value;
document.getElementById('txt').value = str;
}
This is simple, if you use jquery you can do this
$(function(){
$("#your_select").change(function(){
$("#your_input").val($('#your_select option:selected').val())
});
});
u can also do this using just javascript
on the onchange function of your select u can call a function that will put the selected value in your input
like
<select id="element1" onchange="pickvalue()"/>
<option>asad </option>
<option>asad2 </option>
</select>
and your pickvalue function can look something like this
function pickvalue()
{
document.getElementById('yourinputid').value = document.getElementById('element1').value
}
Suppose you have a selectbox #selectid then,
$("#selectid").live("change", function() { <br>
$("#stream1").val($(this).find("option:selected").attr("value")); <br>
});
so i am using the play framework and I'm try to create multiple submit buttons that call the one form:
So what I have is a list of strings, and i would like to create two buttons that will go back to the server and complete an event, the first is send the second is cancel. What i would like to also do is set the source value equal to what is selected in the foo select object. How would I go about doing this? Do i need to create a javascript even that is fired from the form and then get the var inside that function and then fire off the submit? Im not 100% familiar with play framework and scala, so im not sure if i can get it somehow inside this code without using a new method.
#(myList: List[String], theForm: Form[Obj])
#import helper._
#main("myVar Controller") {
<select id="foo">
</select>
<table border="1">
<tr>
#for(myVar <- myList) {
<td>#myVar
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="10" /> //Send Code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Send" />
}
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="18" /> //Undo code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Undo" />
}
</td>
}
</tr>
</table>
}
First of all, the html isn't valid.
You should first make sure that there aren't elements that have the same id.
You have to use javascript to change a value in your form.
I'm not familiar with scalar or playframework, but if they allow you to use jQuery, I recommend the following solution.
$("#foo").bind("change", function(){$("#source").val($("#foo").val()));});
example:
http://jsfiddle.net/RubenJonker/a8a8p/5
If they don't allow you to use jQuery, then you should put some javascript in the onchange event of the select.
<select onchange="document.getElementById('source').value = this.value">
</select>
example:
http://jsfiddle.net/RubenJonker/a8a8p/4
Incase anyone else has this problem I used the following to solve my problem: Thanks Ruup as your code was the reason why I solved the problem
html:
<select id="foo" >
<option></option>
<option value="test">test</option>
</select>
<input type="text" value="" name="field" id="field" />
and javascript:
$(document).ready(function() {
obj = document.getElementById("foo");
obj.onchange = function()
{
var elements = document.getElementsByName('field');
for (i=0;i<elements.length;i++)
{
elements[i].value = $('#foo').val();
}
}; });
I am trying to disable a button on click, as well as change the text of the button. here is my code:
<input type="submit" value="Register" name="submit" id="submit" onClick="javascript:replaceButtonText('submit', 'Please wait...'); document.form1.submit.disabled=true;">
What is happening, is the button gets disabled, and the text changes, but the form does not do anything (submit). what am I doing wrong?
This works:
<html>
<body>
<form name="form1" method="post" action="myaction">
<input type="text" value="text1"/>
<input type="submit" value="Register" name="submit" id="submit"
onclick="javascript: replaceButtonText('submit1', 'Please wait...'); document.form1.submit.disabled=true; return true; ">
</form>
</body>
</html>
Form controls with a name are made available as named properties of the form they are in using their name. So:
document.form1.submit
refers to the button, not the submit method.
Writing:
< ... onclick="javascript:..." ...>
means that "javascript" is treated as a useless label, just don't do it. If you want the button to become disabled and change its label when the form is submitted, then use something like:
<form>
<input name=foo value=bar>
<input type="submit" onclick="
this.value='Please wait...';
this.disabled = true;
var theForm = this.form;
window.setTimeout(function(){theForm.submit();},1);
">
</form>
and let the form submit normally.
Of course the function in the onclick attribute should be a function call rather than a slab of code, but you get the idea.