continue button and add button - javascript

I need you help, I have a form in PHP, javascript, HTML and MYSQL. I use a bootstrap for template.
I have a two button (continue button and add button)
<form class="form-horizontal form-label-left" action="PHP/GuardarMetodoque.php" method="POST" novalidate>
<div class="form-group">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary" onclick="return continuar();">Continuar</button>
<button type="submit" class="btn btn-primary" onclick="return continuar();">Continuar</button>
<input type="hidden" name="metodoque" value="metodoque" />
<button type="submit" class="btn btn-primary" onclick="return continuar();">AƱadir Riesgo</button>
<input type="hidden" name="Anadirriesgo1" value="Anadirriesgo1" />
<input type="hidden" name="ID_proceso" value="<?php echo $_id; ?>">
<input type="button" class="btn btn-primary" value="Regresar" onclick="history.back(-1)" />
</div>
</div>
</form>
the continue button serves to pass another page and the add me button works to add data from the answered form.
as you see called the file "PHP/GuardarMetodoque.php" and it works but when you click continue, you save the form again, and what I want is for you to just send me the other form without saving anything

If you set button type to submit for continue button it will submit the form to mentioned action url, Try:
<button class="btn btn-primary" id="continue">Continue</button>
Add jquery to handle button click event:
$('#continue').click(function(){
//do your logic here
});

Related

button restriction alerts popover titles

I have the following scenario with the form bellow:
<form action="action.php">
<input type="text" id="input1" name="input2">
<input type="text" id="input2" name="input2">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover
title" data-content="You don't have permission to press button">Button</button>
</form>
I need some Javascript code that says:
if input1=input2 submit form else popover title saying "You don't have permission ". I tried some stuff based on some search on the internet but it didn't really work

Unable to fetch values from an input element in Bootstrap's popover

I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code

PHP Form with multiple submit buttons

I have a form with Two buttons. It's a submit form which is basically there to increase/Decrease an Integer value in a MySQL database depending on which button they click.
This is a weird scenario, the page requires an ID extension;
appinfo.php?id=12
Whenever I click one of the buttons it changes the extension to:
appinfo.php?VoteYes=Yes
Ideally I'd like it so if someone clicks on Yes it will increase a value within an SQL query and if they click no, it will decrease it.
Here is what I have so far:
<form action="<?php echo $_SERVER['PHP_SELF'] . "?id=" . $_GET['id']; ?>"/>
<input id="submit" name="VoteYes" type="submit" value="Yes" class="btn btn-success"></input>
<input id="submit" name="VoteNo" type="submit" value="No" class="btn btn-warning"></input>
</form>
In your <form> add the attribute method="post". The default is GET which is changing your URL.
So, it should be:
<form method="post" action="<?php echo $_SERVER['PHP_SELF'] . "?id=" . $_GET['id']; ?>"/>
<input id="submit" name="VoteYes" type="submit" value="Yes" class="btn btn-success"></input>
<input id="submit" name="VoteNo" type="submit" value="No" class="btn btn-warning"></input>
</form>
Then in your PHP code, check for $_POST instead of $_GET when checking for the submitted values.
Hope it helps!
If you really want the query string You can do this with hidden input that will include the id,
I also modified the names to make it less complicated
<form>
<input id="submit" name="Vote" type="submit" value="Yes" class="btn btn-success" />
<input id="submit" name="Vote" type="submit" value="No" class="btn btn-warning" />
<input name="id" type="hidden" value="<?php echo $_GET['id']?>" /></form>

angular bootstrap modal opening on the enter click

In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>

HTML form method post does not work with multiple submit

HTML form method post does not work with multiple submit
I have the following
<form id="myForm" method="post" action="">
<select name="select_data">
<option value="1000">Account Demo 1</option>
<option value="1035">Account Demo 2</option>
</select>
<input type="submit" onclick="sendForm('<?php echo $domainURL;?>page_1')" form="myForm" class="btn btn-primary btn-sm" value="Page 1">
<input type="submit" onclick="sendForm('<?php echo $domainURL;?>page_2')" form="myForm" class="btn btn-primary btn-sm" value="Page 2">
<script>
function sendForm(action)
{
document.getElementById('myForm').action = action;
document.getElementById('myForm').submit();
}
</script>
I did some testing, I change method to "get" and its work, but when I change method to "post" , it not able send anything.
I tried with
print_r($_GET);
print_r($_POST);
Get was able to retrieve the send value on a select option tag.
Same code, but post doesn't send through
I tried to do post
if action="" , its work fine
but if action="http://www.myowndomain.com/subpage/page/thepage.php" it does not work for post.
Instead of Javascript, use the formaction attribute:
<input type="submit" formaction="<?php echo $domainURL;?>page_1" class="btn btn-primary btn-sm" value="Page 1">
<input type="submit" formaction="<?php echo $domainURL;?>page_2" class="btn btn-primary btn-sm" value="Page 2">
THere's also no need for form="myForm" when the submit button is inside the <form> element.
Change <input type="submit"> to type="button" I hope it will work.

Categories