Opening multiple tabs by submitting multiple forms at the same time - javascript

I've created a page that helps with printing packing slips. It will divide up the packing slips by country. So for example we will end up with two different forms, one for US, one for CA.
<form id="US" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_US" name="country" value="US" type="hidden" class="accountLocalID">
<input name="orders[0]" value="552269" type="hidden" class="orderFormItem">
<input name="orders[1]" value="552273" type="hidden" class="orderFormItem">
<input name="orders[2]" value="552276" type="hidden" class="orderFormItem">
<input name="orders[3]" value="537048" type="hidden" class="orderFormItem">
<input name="orders[4]" value="541181" type="hidden" class="orderFormItem">
</form>
<form id="CA" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_CA" name="country" value="CA" type="hidden" class="accountLocalID">
<input name="orders[0]" value="553351" type="hidden" class="orderFormItem">
</form>
and this is my script to submit the forms.
<script type="text/javascript">
function printPackingSlips() {
$(".packingSlipForm").each(function () {
this.submit();
});
}
</script>
I'd like it to open two different tabs with the data from each form submit. But instead it opens one tab and only shows data from whatever form was submitted last.
Any ideas on how to make each form open it's own tab?

Related

saving attendance register records logic with mysql and php

I'm designing an attendance register system which will display all 'gymnasts' from the value set in a 'select class' dropdown with their own checkbox (Displaying this using AJAX and JSON). Which is all 'hunky dory'.
Pseudo Form:
<form>
<classes dropdown populated from classes table onchange="ajaxFunction()">
<save button>
</form>
Pseudo AJAX response: form elements of gymnasts with checkboxes next to them.
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
GymnastName [Checkbox]
The user would then check the boxes of all the gymnasts that are present, and leave the boxes for the gymnasts that are absent.
Upon hitting the save button; I'm not sure how to go about saving each gymnast's presence as a single record in the class-attendance table:
class-attendance(id, classid, gymnastid, present[y/n],datetime)
I understand that this may not be the best way to approach the problem, however is there some way to create an array for the data contained in the form so that it can be inserted into the class-attendance table with each gymnast's presence being saved as a record?
Thanks for your help in advance!
what i understand according to that i have made script using HTML,Jquery and PHP. See the code is work for you or not.
HTML and Jquery Code
<form action="process.php" method="post">
<div>
GymnastName <input type="checkbox" class="atd" ><br>
<!-- put gymnastid in value what you getting from JSON -->
<input type="hidden" name="Gymnast_id[]" value='1' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='2' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='3' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n'class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"> <br>
<input type="hidden" name="Gymnast_id[]" value='4' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n'class="atdval">
</div><br>
<div>
GymnastName <input type="checkbox" class="atd"><br>
<input type="hidden" name="Gymnast_id[]" value='5' class="atdid">
<input type="hidden" name="Gymnast_attend[]" value='n' class="atdval">
</div><br>
<input type="submit" name="Save">
</form>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.atd').change(function() {
if($(this).is(":checked")) {
$(this).closest('div').find('.atdval').val('y');
}
else{
$(this).closest('div').find('.atdval').val('n');
}
});
});
<script>
PHP CODE (process.php)
<?php
$Gymnast_id=$_POST['Gymnast_id'];
$Gymnast_attend=$_POST['Gymnast_attend'];
foreach ($Gymnast_id as $key => $id) {
echo "Id: ".$id."<br>";
echo "Attend: ".$Gymnast_attend[$key]."<br><hr>";
// here you get id of Gymnast and present status, default it is "n"
// you can add your sql query here
//class-attendance(id, classid, gymnastid, present[y/n],datetime)
}
?>

Native javascript. Prevent form submit not working in Chrome

I have a small snippet and can't understand why it doesn't work (Form submitted everytime in Chrome) ?
<script type="text/javascript">
function checkForm(e) {
alert('Test');
e.preventDefault();
}
</script>
<form id="cart" method="post" name="cart" onsubmit="return checkForm(event);">
<input type="hidden" name="qty" value="1">
<input type="hidden" name="id" value="1">
<button type="submit">Submit</button>
</form>
P.S (IMPORTANT) - This code loaded dynamically via Ajax and injected into div container!

Form or a on click trigger submit

I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com

Form event onChange not working on dropdown selection

I have one form that works perfectly and changes the action of the form based on radio buttons:
<form name="form1" method="post" action="[[base_urlnt]]/electricity-rate-plans">
<input type="radio" name="energy" value="electricity" checked>
<label for="electricity">Electricity</label>
<input type="radio" name="energy" value="gas" onChange="if(this.checked){document.forms[0].action='[[base_urlnt]]/natural-gas-rate-plans'}">
<label for="gas">Natural Gas</label>
<input name="service_zip_5" type="text" id="search" placeholder="Enter ZIP Code"><button type="submit" class="bigButton">Get Rates</button>
</form>
And I want to do the same thing, but change the action on another form by using onChange but not on radio buttons, but using a dropdown list seen below. What am I doing wrong?
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service">
<option value="Electricity" selected="selected">Electricity</option>
<option value="Gas" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/natural-gas-plans'}">Natural Gas</option>
<option value="Dual" onChange="if(this.selected){document.forms[0].action='[[base_url]]alberta/dual-fuel-plans'}">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode">
<button type="submit" id="submit">Get Started</button>
</form>
I tried
onChange="if(this.checked)
first and the thought that since it is a selection it should be onChange="if(this.selected) but neither work. Is this just not a function?
You need to change it slightly.
Your onchange events should be bound to the select not the individual options.
I have also added an attribute "data-url" to each option to store the url that will need to be added to the form action onchange.
This "data-url" attribute can then be used by the javascript function to update the form action. It also means you don't have to repeat the same code in all of your onchange attributes. You can just call a function that extracts the corresponding "data-url".
See - http://jsfiddle.net/williamtdavies/8kxzaquw/
<form name="form1" method="post" action="[[base_url]]alberta/electricity-plans">
<p>Choose Your Service</p>
<select name="service" id="service" title="Choose Your Service" onChange="changeFormAction(this);">
<option value="Electricity" data-url="[[base_url]]alberta/electricity-plans">Electricity</option>
<option value="Gas" data-url="[[base_url]]alberta/natural-gas-plans">Natural Gas</option>
<option value="Dual" data-url="[[base_url]]alberta/dual-fuel-plans">Dual Fuel</option>
</select>
<p>Enter Your ZIP Code</p>
<input name="service_zip_5" type="text" id="zipcode"/>
<button type="submit" id="submit">Get Started</button>
</form>
<script>
function changeFormAction(elem){
document.forms[0].action = elem.options[elem.selectedIndex].getAttribute("data-url");
}
</script>

add html code on button in android to open html page on browser?

I want to add the HTML code on the submit button in registration form in android application. I want when the submit button is pressed then the output layout of that code open in the web browser with in the application.
This code include some text,URL and subscribe button for my android application client to put membership by Paypal payment.
I am newer in this field so please tell me the solution.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="DriverGroupConnect#gmail.com">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="item_name" value="DGC Taxi Membership">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="src" value="1">
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="bn" value="PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest">
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Monthly Payment Option">Monthly Payment Option</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="DGC Taxi Membership">DGC Taxi Membership : $25.99 AUD - monthly</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="option_select0" value="DGC Taxi Membership">
<input type="hidden" name="option_amount0" value="25.99">
<input type="hidden" name="option_period0" value="M">
<input type="hidden" name="option_frequency0" value="1">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
OK, first use a WebView to load the webpage.
http://www.mkyong.com/android/android-webview-example/
If your webpage is local, save the html file in the Assets Folder.
http://www.androidsnippets.com/webview-load-from-assets
Sample launching a webview in onclick Button
http://www.tutorialspoint.com/android/android_webview_layout.htm
Check res/layout/activity_main.xml in the sample, specificly in the Button.
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/urlField"
android:layout_centerHorizontal="true"
android:onClick="open" <!-- Java method to launch webview -->
android:text="#string/browse" />
You can take a WebView to open a browser and put the html code there...pass all required data through bundle to webview and use it there..
To pass the data :
Intent intent = new Intent(MainActivity.this,webViewActivity.class);
intent.putExtra("key", data);
intent.putExtra("key", data);
...
startActivity(intent);
To get the data :
Bundle bundle = getIntent().getExtras();
data= bundle.getString("key");

Categories