I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
Related
I have a form with two submit buttons, name="submit_button" and name="search_me_logo", and when the form arrives at the action location, it does two different things depending on which button was pressed.
When the enter key is pressed, I want it to do the same thing as the name="submit_button" but right now it seems to be sending the name="search_me_logo" by default.
Here's the HTML code you need:
<form action="/search_me.php" method="GET">
<div id="search_me_outer_div">
<button id="search_me_div" name="search_me_logo" type="submit">
<img id="search_me_image" src="/images/header/search_icons/search_me.png" height="33" alt='"search me"'/>
</button>
</div><!--
--><div id="search_box_outer_div">
<div id="search_box_div">
<input id="search_box" onfocus="hidePlaceholderAndShineBox();" onblur="showPlaceholderAndBlurBox();" name="search" type="text" spellcheck="false" size="32" placeholder='Get to know Sam... "search me"'>
<button id="search_div" name="submit_button" type="submit">
<img id="search_img" src="images/header/search_icons/fancy_search.png" height="21" alt="Go"/>
</button>
</div>
</div>
</form>
PHP:
if (isset($_GET['submit_button'])) {
echo 'submit was pressed<br>';
} else if (isset($_GET['search_me_logo'])) {
echo 'logo was pressed<br>';
} else if (isset($_GET['search'])) {
echo 'enter was pressed<br>';
} else {
//show error page
}
Right now when I press enter, it echos "logo was pressed". There is probably a way with JavaScript, but if it's possible simply with HTML/PHP, that would be wonderful.
By default, hitting the enter key will cause the first submit button. You can simply add the default submit action in a hidden div right at the beginning of the form. For example:
<form action="/search_me.php" method="GET">
<div style="height:0px; width:0px; overflow:hidden;"><button id="search_div" name="submit_button" type="submit"></button></div>
and keep the rest as is.
Edit: some browsers won't let the enter key to trigger the first button if it's not displayed (e.g. display:none;).
However it will work with:
width: 0;
height: 0;
overflow: hidden;
In the CSS of the element that contains the hidden submit button.
Thanks for all the suggestions. #NoGray's answer could work or I just did two forms, as #Irdrah suggested.
Each forms' buttons and inputs had different names, and one of the inputs had a type="hidden" and id="hidden_input". Then when the submit for the form with the hidden input was clicked, I used jquery's submit() to set
document.getElementById('hidden_input').value = document.getElementById('shown_input').value;`
and returned true. I haven't tried #NoGray's but I'm sure it would work.
I have a website that is set up to be used on mobile devices. The user can draw on a canvas element and then click the "submitButton" button to save the canvas to a server. When the user clicks the button, the "submitButton" button disappears and a "submittingButton" button appears in it's place. All this is working correctly. In fact, the entire project is working correctly after I changed the "submittingButton" button to a type=button instead of type=submit.
My question is, however, when I change the style.display of the "submittingButton" button, if I set the style.display to block, the form is not submitted (which is what I want) but the button is displayed on a new line. However, if I set the style.display to inline or inline-block, the form is submitted, the page refreshed, and the drawing is cleared. Why does the form submit when the style.display is set to inline or inline-block but not submit when the style.display is set to block?
Here are the relevant parts of my code:
function sendImage(){
if(window.hasBeenDrawn){
document.getElementById("signError").style.display="none";
document.getElementById("submitButton").disabled=true;
document.getElementById("clearButton").disabled=true;
window.wasSent=true;
document.getElementById("submitButton").style.display="none";
document.getElementById("submittingButton").style.display="";
//document.getElementById("submittingButton").style.display="block";
saveImage();
}
And the HTML:
<form method="post" action="" class="sigPad">
<div id="receipt" style="text-align:center">
<div class="sig sigWrapper">
<canvas style="width:85%; height:95%; margin-top:25px" height="300" class="pad" id="myCanvas" />
<input type="hidden" name="output" class="output" />
</div>
<br />
</div>
<div id="clearSubButtons">
<button id="clearButton" onclick="redoSig(); return false;" > </button>
<button id="submitButton" type="submit" onclick="sendImage()"> </button>
<button id="submittingButton" style="display:none;"> </button>
</div>
</form>
PS. I have the code working as expected, by changing the "submittingButton" to type=button. I don't want the form to submit, the saveImage() function uses an ajax post to submit the image to the server.
I have no idea why changing the display value of the button causes it to submit the form, however I can offer the following.
By default, a button element in a form is a submit button, so if you have a button that you don't what to act as a submit button, give it a type of button (or use an input element with a type of button), so:
<button id="clearButton" onclick="redoSig(); return false;" > </button>
would be better as:
<button id="clearButton" type="button" onclick="redoSig();">Clear</button>
or
<input id="clearButton" type="button" onclick="redoSig();" value="Clear">
so there is no chance of the form submitting when it's clicked. Similarly for the submittingButton button, change it to a button then it can't submit the form.
Finally, all you seem to be doing is changing the label of the button. You can probably do that using something like:
<form onsubmit="return modifiedSubmit(this);" ...>
...
<input name="submitButton" type="submit" value="Submit signature">
</form>
and the function:
function modifiedSubmit(form) {
if (form.submitButton) {
form.submitButton.value = "Submitting...";
form.submitButton.disabled = true;
window.setTimeout(function(){form.submit();}, 10);
return false;
}
}
Untested of course, but hopefully you get the idea. The timeout is to ensure the button label changes before the form submits, otherwise browsers may decide that since they are in the process of navigating to another page, they won't do any DOM updates and so won't change the label.
I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();
I am writing a javascript file using jquery in order to inject the input box on the html page. However, when I inject the input on the page and within a few second the input box disappear. I am wondering why is that happen.
function injectArea(data) {
$('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}
P.S. I m using twitter bootstrap. not sure if that causes the problem.
when i call the function i do this:
$(document).ready(function(){
$(#button).click(injectArea);
});
This is my html:
<form class="form">
<button id ="button" class="btn btn-large btn-primary">Update Profile</button>
</form>
This fiddle shows that there is nothing wrong with prepend or the way you are using it. The issue must come from elsewhere. My guess is that you may have an AJAX callback that fires a few seconds after you call it which is overriding the change you are making to #test.
Fiddle:
http://jsfiddle.net/jy43A/
Update:
You said:
For some reason my page refresh itself.
#button is a <button> tag. Clicking on it will submit the form and refresh the page (if it targets the current page). use preventDefault(); to stop the submit default action:
function injectArea(data) {
data.preventDefault();
$('#test').prepend('<input type="text" class="input-block-level" placeholder=" " value="hi">');
}
You can see that the text box appears, then the page refreshes. This will look different in your case, but it will probably be along the same lines as this:
The effect WITHOUT preventDefault():
http://jsfiddle.net/jy43A/3/
And this works:
The effect WITH preventDefault():
http://jsfiddle.net/jy43A/2/
More info:
preventDefault info:
http://api.jquery.com/event.preventDefault/
Are you sure you're using the right method?
prepend:
<div id="a"></div>
$("#a").prepend("<span>");
<div id="a">
<span></span>
</div>
insertBefore:
<div id="a"></div>
$("#a").insertBefore("<span>");
<span></span>
<div id="a"></div>
I'm submitting some of my forms with javascript/jquery.
$("#myform").submit();
this works fine in Firefox, but in Safari or Chrome, none of my form values are posted.
When I check the $_POST variable, in Firefox it's filled up correctly, but on safari/chrome the $_POST values are empty.
I submit like this when the dialog's OK buttong gets clicked (works fine in FF)
$("form#form_add_file_to_theme").submit();
this is my form (the surrounding div becomes a .jQuery UI dialog)
<div id="modal_create_themefile" style="display:none;">
<form action="" id="form_add_file_to_theme" name="form_add_file_to_theme" method="post">
<div class="field">
<label for="var_template_name">File name</label>
<input type="text" class="text" id="var_template_name" name="var_template_name" />
</div>
<div class="field">
<label for="var_template_type">File type</label>
<select id="var_template_type" name="var_template_type">
<option value="css">CSS</option>
<option value="include">Partial</option>
<option value="js">Javascript</option>
</select>
</div>
</form>
</div>
printing $_POST in php gives:
Array ( [var_template_name] => [var_template_type] => css )
so the select box gets submitted, not the text fields...
UPDATE: when I pass the value="test" options hard coded in my text fields, they get submitted. However, changing the values (what a normal user would do) after the page has loaded, has no effect in webkit. Chrome & Safari just take the "initial" or "default" values to submit.
As there is an item named "var_template_name" in the POST data that reaches the server, it means that the textbox is included in the post, but the value is empty.
So, somehow the value is cleared before it's posted.
Do you have any Javascript that verifies the contents in the form? Check that you haven't accidentally made an assignment, something like this:
if (document.getElementById('var_template_name').value = '')
instead of a comparison:
if (document.getElementById('var_template_name').value == '')
jQuery UI dialog is somehow creating or moving the form into the dialog, while webkit doesn't know this. Webkit just takes the original form code and submits that.
I could fix it by doing this:
dialog.data("dialog").uiDialog.find("form").submit();
that way, any browser is forced to look for the correct form in the dialog, not just in the page.
I've encountered the same problem. I have a theory that the form submit gets terminated once the page changes, thus it becomes incomplete. That's just a theory mind you, unprovable unless I analyze the webkit internals.
My solution - use ajax instead of form submit.
$.post("/submit_url",$("#form_id").serialize());
I'm not absolutely sure that strategy always works, but it might.
I have also encountered a similar problem. I have struggled a few hours and found how to get it work right. Here is my dialog html after the fix. I had the opening form tag outside of "interest-edit-dialog" div at first. The dialog didn't post input variables then. I was inspired by Jorre and I checked the source with Chrome tool when the dialog is up, and found the opening tag was gone. So I moved the opening form tag inside of "interest-edit-dialog" div. That is basically it. The input variables were posted all right. It means that you can't put your form tag outside the dialog html you register with jquery.ui.
<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; position: absolute; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div id="interest-edit-dialog" title="whatever" class="ui-dialog-content ui-widget-content">
<form id="interestDialogForm" name="interestDialogForm" action="einterest" method="post" enctype="multipart/form-data">
<p class="validateTips"></p>
<fieldset>
<?php echo $interest_list; ?>
<p><input type="text" id="myinterest1" class="myinterest1" name="myinterest1" value="FOO" /></p>
<p><input type="text" id="myinterest2" class="myinterest2" name="myinterest2" value="BAR" /></p>
<p><input type="text" id="myinterest3" class="myinterest3" name="myinterest3" value="" /></p>
<p><input type="text" id="myinterest4" class="myinterest4" name="myinterest4" value="" /></p>
<p><input type="text" id="myinterest5" class="myinterest5" name="myinterest5" value="" /></p>
<input type="hidden" name="serial" id="serial" value="" />
</fieldset>
</form>
</div>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
</div>
</div>
The javascript code to submit above form is
$("#interestDialogForm").submit();