I am opening up a new page when the user clicks submit. It would be a common occurrence for the user to come back to the original page to select something else from the drop down and need to "submit" again. Now the problem is that my js function disables the submit button, and the user would have to reload the page. The js is a standard thing, so unfortunately, I cant change that, but I was wondering if there was a way to reenable it in HTML or in a separate script, here is my relevant code:
<form name="verification_form" action="CreateVerification" target="_blank" onSubmit="return submitForm(this, 0, this.length-2, SUBMIT)" method="post">
<table width="75%" border="0" cellspacing="0" align="center">
<tr>
<tr>
<td>Stuff<input type="HIDDEN"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="33%">
<div align="center">
<select name="stuff" id="stuff" class="R">
<option value=" "> </option>
<option value="<% =stuff %>"> <% =stuff %> </option>
</select>
<td><div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT">
</div></td>
</tr>
</table>
Any help would be appreciated, and let me know if there are any questions.
You can remove the disabled option using jquery like this:
$("input[type=submit]").removeAttr("disabled");
The issue would be when exactly in your code do you want to enable the submit button. You will probably want to wire it to the onchange event on your dropdown list.
$('#dropdownlist').change(function(){
//Validate your form here maybe:
if(validated) $("input[type=submit]").removeAttr("disabled");
});
Check if your submit button is disabled. Enable it in that case.
With jQuery this will be the approach:
if($("#submit-button").is(":disabled")) {
$("#submit-button").removeAttr("disabled");
}
Hope it helped
You could put a button somewhere (in the original page or in the popup) that says "select another item" and runs some javascript to re-enable the button with :
var submitButton = ... (find the submit button)
submitButton.enabled=true
Related
I have a webpage with three buttons, two of the buttons action the form submitting data to the server, it then sends back the appropriate page.
The third button is meant to just open a new webpage in a new tab, the current page does not need to be reloaded so this button is just a button element with some onclick() code, its is not part of an input element
The trouble is that when I click on the third button it actions the form action the form even though its not an input type, why does it do this ?
<main>
<form action="/license.process" name="process" id="process" method="post">
<label>
Please enter your license information as provided in your license email
</label>
<table>
<tr>
<td><label title="Email">Email</label></td><td><input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="licenseinputfield"></td>
</tr>
<tr>
<td>
<label title="License Key 1">
License Key 1
</label>
</td>
<td>
<input type="text" name="licenseKey1" value="50302c02147f23ed809a8f2579338121a2b1594f967bb18" class="licenseinputfield">
</td>
</tr>
<tr>
<td>
<label title="License Key 2">
License Key 2
</label>
</td>
<td>
<input type="text" name="licenseKey2" value="0ff02146cd1777d7e0890e659b10218761869212d7b0d60" class="licenseinputfield">
</td>
</tr>
</table>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="save" value="Save">
<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');">
Get License
</button>
</form>
</main>
I can make it work properly by moving this third button outside of the form. But then I get formatting problem because button is shown on next line, regardless I want to understand why having the butto within the form triggers the form.
The default type of a <button> is submit.
If you want it to be type=button then you have to say so explicitly.
You need to add the type="button" attribute to prevent the form from being submitted.
I'm not entirely sure why but came across this last week.
In this piece of code there is a search bar, when I am searching something it will narrow down my search. I am using onkeyup event which call javascript function to search the required data, but after entering some text in search bar when i press enter it is redirecting to the home page instead of display the results.
CODE
<apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
<apex:param name="Name" value="" />
</apex:actionFunction>
<table cellpadding="2" cellspacing="2">
<tr>
<!-- style="font-weight:bold;">Defect Name<br/> -->
<td>
<input type="text" id="Name" onkeyup="doSearch();" /> </td>
</tr>
</table>
Any help would be appreciated.
I think the form is submitted on Enter button press.
If you have <apex:form tag then try putting onsubmit="return false;" there.
<apex:form onsubmit="return false;"
I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it
You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>
There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.
I have this form which I can't make submit.
<div class="enviar">
<form onClick="submitForm();" id="MessageSend" name="MessageSend" method="post" action="Send_Text_Msg.php">
<table width="100%">
<tr width="100%">
<td colspan="2"width="600px">
<textarea disabled="disabled" rows="4" name="MessageTextArea" id="MessageTextArea" style="resize: none;"></textarea>
</td>
<td>
<div class="button raised blue" style="cursor: pointer;">
<div class="center" fit>Enviar</div>
<paper-ripple fit ></paper-ripple>
</div>
</td>
<td><input type="submit" onclick="submitForm();"hidden id="IDConversa" name="IDConversa" value=""/></td>
</tr>
</table>
</form>
</div>
Since I'm using a < div > as a button I use this Javascript code to submit it
function submitForm()
{
alert("hue");
if(document.getElementById('MessageTextArea').value == "")
return false;
else
document.getElementById('MessageSend').submit();
}
And the weird part is that even the alert() isn't showing up. I was using a normal button before this material design one and It wasn't working either
EDIT:
I gave up on using form. I'll use AJAX instead. Thanks for the help
I tried it in jsfiddle. It seems you have script in bad order!!! If i modified your script as below it start work.
tutorial w3c
Put your validatation script into head or on body. In jsfiddle left side no wrap .. option
Add onsubmit no onclick into the form
<form id="MessageSend" name="MessageSend" method="post" onsubmit="return submitForm()" action="Send_Text_Msg.php">
and it working fine
DEMO JSFIDDLE
You can't write it like this:
</td>
<input hidden id="IDConversa" name="IDConversa" value=""/>
</tr>
Any html data in table should be in td's. Or put that hidden field outside table.
You should also avoid doing onclick on divs. Make an a tag, and put it there.
I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>