angular ng-if automaticly sends a form when true - javascript

I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>

Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>

This should help
show login
this will prevent it from submitting automatically

Related

Making a button that’s send you to another page

Hi i am trying to make a button that’s works like a link. I hope it makes sense, can you help?
<button type="submit" value="Login" id="next" class="login-form-submit next" href="lessonB.html">Next</button>
I am thinking you have a form you are submitting with this button. It's not the right solution in your case to add a element inside the button. Here an example of how I would do it:
<form action="https://redirect_link_here.com/foo.html" method="GET">
<input name="name">
<input name="lastname">
<button type="submit">Button name</button>
</form>
When you press the button the user input gets sent to the link you specified in action in the URL. So if the user inputs is "Andreas" and "Köhler" for instance you would be redirected to this URL on submit: https://redirect_link_here.com/foo.html?name=Andreas&lastname=Koehler. Then you can read the data out of the URL in the code of foo.html and your submit button is not messed up.

How does type is submit work in javascript?

Type="Submit" and type="Button" in element input. How are they different? When I use type="button" then it submits successfully but type="Submit" does not? why is that?
<form class="crush-form">
<div>
<input class="name" type="text" name="name" required />
<label for="">Name</label>
</div>
<div>
<input class="address" type="text" name="address" required />
<label for="">Address</label>
</div>
<div class="lol">
<input
type="submit"
onclick="SubmitClickHandle()"
name="huhu"
value="ggg"
/>
<button onclick="closeDialog()">Close Dialog</button>
</div>
</form>
You have a JavaScript function SubmitClickHandle() that performs the form submission. If you use type="submit", then the form also submits using the default method, which reloads the page and cancels the SubmitClickHandle() code.
You should use type="button" when you've provided your own JavaScript to submit the form, and you don't need the default submission.
If you want to use type="submit", the onclick code should end with return false to prevent the default action:
<button type="submit" onclick="SubmitClickHandle(); return false">
Submit buttons trigger the submission of a form (and when they do, their name and value are included in the submitted form data).
Button buttons don't.
When I use type="button" then it submits successfully but type="Submit" does not? why is that?
Presumably, because your idea of "submits successfully" doesn't involve performing a normal form submission but instead means "Executes the SubmitClickHandle() function without leaving the page".

Display dialog on client-side before form is submitted

I have a form that works on its own using required attributes in each input to make sure the user inputs a value. IE:
<form id="myForm">
<div class="formcontainer">
<div class="formText">
First Name <span class="required">*</span>
</div>
<div class="formBox" id="test">
<input name="firstname" id="firstname" type="text" required />
</div>
<div class="formText">
Last Name <span class="required">*</span>
</div>
<div class="formBox"><input name="lastName" type="text" required /></div>
</div>
<div class="buttons">
<div class="formButton" id="submit">
<asp:Button onclick="btnRequestSampleSubmit" Text="Submit" runat="server" />
</div>
<div class="formButton" id="reset">
<input type="reset" value="Reset" tabindex="8"/>
</div>
</div>
</form>
To save space, I have about 6 other fields in the form, but wanted to give you an idea. When I submit the form, the page refreshes. All fine and dandy except I wanted to add in a .dialog box on the submit button so that it lets the user know that the form went through. So I added this:
$('.buttons #submit').on('click', function (e) {
$('#dialog').dialog({
position: { my: "center", at: "center", of: window },
});
$('#fade').show();
return false;
});
(#fade) is just an opacity box that fills the screen so when the user clicks on it, the box closes and the page will refresh. When I add in the bottom script, the validations work, but if the user hits enter or clicks on the submit button before everything is filled out, the form is submitted without having the rest of the input fields filled in. If I take out the submit JS here with the dialog, everything works fine, including validations, but I want to add the .dialog so the user knows the form is submitted properly. I can't figure out how to combine all this and make it work. Any suggestions?
Also this is done in c# so the btnRequestSampleSubmit is tying how the form is submitted to an email using the input fields.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George
You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks
<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.
If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>
<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.

Categories

Resources