I have a submit button that on click, jquery checks if anything has been selected. If not then it does show() on an error message. Here's the html:
<p id="error_message" style="display:inline">dfd</p><input type="submit" class="button" name="Submit" value="Submit" />
At the beginning the message is hidden, but then revealed if the user clicks submit without selecting an option. The problem is, the displaying on my text shifts my submit button. This is what the submit looks like without the message:
And here's what it looks like after the message is displayed:
As you can see, the submit button moves to the right. I have to display inline if I want both the error message and submit to appear on the same line but how do I prevent any movement? Thanks
if you set the button to float:right; it stays on the right end of its container, until content from left div forces it to drop to next row.
so html:
<div class='container'>
<p id='error_message' style='display:inline;float:left;' >dfd </p>
<input type='submit' style='float:right;' name='submit'>
</div>
set the position of the button to absolute , OR set the width of the error-message to something fixed
Related
When I put text into the input field and scroll down to the button so the input field is off the visible screen, clicking the submit button does not submit the form.
Instead, the last filled field (if there are more, shows up the latest filled) is displayed at the very top of the screen and you have to scroll down again and click the button again for the form to work.
I made a really basic example to make it easy to test the problem. Only one input field and one submit button far enough to make you scroll the input field away from the visible screen:
<div style="width: 200px; border: 1px solid red;">
<a name=start></a>
<br>
<p>Hello world!</p>
<form method="post" action="#start">
<input style="margin-top: 100px; margin-bottom: 900px;" type="text" name="name" value="">
<input type="submit" value="Send button">
</form>
</div>
Interestingly, if you fill in something into the input field, then click somewhere else and then press the button, it works on the first click! It works as well if you don't need to scroll from the last filled field to submit button...
The problem seems to cause the active field to move away from the visible screen, BUT the form is bothered only the first time. Then when I click back into the field (not changing anything OR even deleting something), leave the cursor there, scroll down and click the button second time, the form submits... Whereas when I change the content after first click by adding new letters or words, the problem still exists and the failed cycle repeats.
This issue only occurs on some mobile phones, having tested it on 6 different, two of them had problems (all of them updated). PC works well.
I'm clueless... any ideas how to repair it? Thanks a lot!
COUNTER COUNTER EDIT:
Sorry for obvious question, my edits keep getting deleted but was just saying been working non stop and had a complete blank when trying to remember this, thanks to the Stack community though!
I have my HTML here:
<input type="submit" name="buddy1" value="Yes" placeholder="Toggle Yes">
I want the input value to be Yes but the text displayed to be "Toggle Yes". I know there's a trick with span classes and buttons but I want the button to also be the submit. Is there a quick way of doing this WITHOUT Javascript?
You can use the <button></button> instead:
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
Your should use a button element, where you can change the text of the button. Buttons elements are just input elements which have more options. From the w3 site on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities:
For example.
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
I have a "Loading..." element as a div right now. Right now, it runs whenever I come to the page it is on, but I'd like for it to only come up when I click on a button and go away when that function is done loading.
The "Loading..." div code:
<div id="MSG" class="ui-widget-overlay ui-front" title="">
<div class="center spinner-preview" id="spinner-preview">Loading....</div>
</div>
And I'd like for it to only activate when the following button is clicked and that is currently loading.
<div id="Verify"><input type="submit" class="btn btn-lg btn-primary" value="Verify Login & Save" /></div>
I can't seem to get it to work though. Any help would be appreciated, thanks.
Set your loading div display hidden.
on click of you button show your div and then perform your task.
hide div again.
I want to create a menu button for my responsive design.
I want to display the menu when the user has clicked on the button, and hide it when he has clicked back.
My Html code is the following:
<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />
<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>
The associated CSS code I use is:
.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}
The above code isn't working at all. When the checkbox is checked, nothing happens.
Did I make something wrong?
JSFiddle: http://jsfiddle.net/P8DJZ/ (Expand the row to see full screen/smartphone mode)
Here is the solution:
Put your switch button everywhere you want to:
<label for="show_hide">Click here to hide/show the div</label>
Put this code just before the div you want to show/hide:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
For example, if you want to hide this div, just do something like that:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
Your hidden content will be there.
</div>
Then in your CSS file, add the following code:
.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}
The first line will hide the checkbox so the user will only be able to use your switch button and not directly the checkbox. The second line will hide your div.
The third and last line is a condition that will change your div display to block when and only when the hidden_checkbox is checked.
Basically, when the user will click on the switch button, the hidden checkbox will be checked and the hidden_div will appear. If he clicks once more on the button, the hidden_div should disapear.
I hope this could help someone.
I have a user registration form with a submit button and a cancel button,
Problem 1) I can't have those two buttons inside the single form, if I have the cancel button inside the form with submit button, when I click the cancel button, it execute the action of the form instead of going to home and cancelling the registration page.
Can't we have these two buttons inside a single form..?
Problem 2) Because of Problem 1, I added the cancel button outside the form and linking to the home page, it works as I expect, but, I need to have those two button in the same row on the screen.
<div id="main-content">
<div id="login-container">
<form id="user-registration-form" method="POST">
// Some other fields, like username, etc.
<fieldset class="edit" id="submit-button-fieldset">
<input type="submit" id="submit-regiser"/>
</fieldset>
</form>
<fieldset id="Cancel-field">
<button id='cancel-registration' onclick=window.location.href='link-to-home'>Cancel</button>
</fieldset>
</div>
</div>
I need to have those #submit-regiser and #cancel-registration in the same row in the screen. And this is for mobile browser, so should obey XHTML rules
Thanks in advanced.
That's the intended behavior. Cancel buttons are supposed to clear the form, not to take one back to what page ever.
Still you can do it this way using the <button> element:
<form id="user-registration-form" method="POST">
<fieldset class="edit" id="submit-button-fieldset">
<button type="submit" id="submit-regiser">submit</button>
<button id="cancel-regiser" onClick="window.location.href='http://example.com'; return false;">Back</button>
</fieldset>
</form>