I have two separate forms with radio buttons. I need to make a button, clicking which submit two forms.
<form action="/second_vote" method="post" id="poll-view-voting" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-1" name="choice" value="1" class="form-radio">
<label class="option" for="edit-choice-1">1 </label>
</div>
</div>
</div>
</div>
<input type="submit" id="edit-vote" name="op" value="Vote" class="form-submit">
</form>
<form action="/second_vote" method="post" id="poll-view-voting--2" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice--2" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-3" name="choice" value="3" class="form-radio">
<label class="option" for="edit-choice-3">1 </label>
</div>
</div>
</div>
</div>
<input type="submit" id="edit-vote--2" name="op" value="Vote" class="form-submit">
</form>
I try to do like this, but only sent the first form.
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$('#poll-view-voting').submit();
}
</script>
I think that you can't send two form in one single request. You should use some AJAX request to send both of them in sequence, or, even better, use just one form (you're using the same action for both of your form..)
You can submit the first form using AJAX, otherwise the submission of one will prevent the other from being submitted.
1
<form action="/second_vote" method="post" id="poll-view-voting--2" accept-charset="UTF-8">
<div class="choices">
<div class="form-item form-type-radios form-item-choice">
<div id="edit-choice--2" class="form-radios">
<div class="form-item form-type-radio form-item-choice">
<input type="radio" id="edit-choice-3" name="choice" value="3" class="form-radio">
<label class="option" for="edit-choice-3">1 </label>
</div>
</div>
</div>
</div>
</form>
<input type="button" value="Click Me!" onclick="submitDetailsForm()" />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$('#poll-view-voting').submit();
$('#poll-view-voting--2').submit();
}
</script>
Related
I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:
Here is my situation, It's giving me lot of trouble..
I have an ajax submit form, on submit, id like an action to happen.
I'm quite dependant as this is on squarespace, so i dont have acess to much code.
On submit of the form ( when sucessfull), I can see a 'hidden' class is added.
So i would like to use this for my action as:
if ( $("input.button").hasClass("hidden") ) {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
};
But nothing seems to happen !! event alert is not working as well, I believe this is due because its not reloading the page as the hidden class appear only when the form has been submitted.
Is there any other method which could work to achieve this ?
Thanks a lot for your help, it will be a life saving !!!
--update --
BElow the all form html:
<form autocomplete="on" action="https://website.squarespace.com" method="POST" onsubmit="
return (function(form) {
Y.use('squarespace-form-submit', 'node', function(Y){
(new Y.Squarespace.FormSubmit({
formNode: Y.Node(form)
})).submit('5a568ac053450ad102451bc4', '5a568a42c8302558efde1ae7', 'page-5a568a42c8302558efde1ae7');
});
return false;
})(this)" data-form-id="5a568ac053450ad102451bc4">
<div class="field-list clear">
<div id="text-yui_3_17_2_1_1515620880734_20061" class="form-item field text required">
<label class="title" for="text-yui_3_17_2_1_1515620880734_20061-field">FULL NAME
<span class="required">*</span>
</label>
<input class="field-element text" type="text" id="text-yui_3_17_2_1_1515620880734_20061-field">
</div>
<div id="email-yui_3_17_2_3_1515620880734_11301" class="form-item field email required">
<label class="title" for="email-yui_3_17_2_3_1515620880734_11301-field">E-MAIL ADDRESS
<span class="required">*</span>
</label>
<input class="field-element" name="email" x-autocompletetype="email" type="text" spellcheck="false" id="email-yui_3_17_2_3_1515620880734_11301-field">
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21108" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21108-field">GENDER
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="MALE">
<div id="check"></div> MALE</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21108-field" value="FEMALE">
<div id="check"></div> FEMALE</label>
</div>
</div>
<div id="radio-yui_3_17_2_1_1515620880734_21855" class="form-item field radio required">
<div class="title" for="radio-yui_3_17_2_1_1515620880734_21855-field">SHOE SIZE (EU SIZE)
<span class="required">*</span>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="36">
<div id="check"></div> 36</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="37">
<div id="check"></div> 37</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="38">
<div id="check"></div> 38</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="39">
<div id="check"></div> 39</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="40">
<div id="check"></div> 40</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="41">
<div id="check"></div> 41</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="42">
<div id="check"></div> 42</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="43">
<div id="check"></div> 43</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="44">
<div id="check"></div> 44</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="45">
<div id="check"></div> 45</label>
</div>
<div class="option">
<label>
<input type="radio" name="radio-yui_3_17_2_1_1515620880734_21855-field" value="46">
<div id="check"></div> 46</label>
</div>
</div>
</div>
<div class="form-button-wrapper form-button-wrapper--align-center">
<input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
</div>
<div class="hidden form-submission-text">Thank you!</div>
<div class="hidden form-submission-html" data-submission-html=""></div>
If I understand this right, you want a block to appear with a fade-in once the form is submitted.
A few things here:
First, attaching to an arbitrary class change to make something happen feels very fragile. Why not try attaching this action to the form submit event?
Second, the javascript you put as an example will never make it unless the button was hidden on page load. You would need to attach this code to an actual dom event to execute it.
Here is my proposed solution. Note that this solution assumes the block with the ID you provide is already mounted on the DOM:
Since you seem to want to listen for a submit event and then make something appear, and your code was generic enough, you could:
$('form').onSubmit(function() {
$("#block-yui_3_17_2_2_1515660345355_6688").fadeIn();
});
There are simpler css transitions as well, again assuming the block is already on the DOM when the page loads.
Only final gotcha might be that you don't have jquery loaded on your site. I recommend adding jQuery from a Google CDN.
I am working on a website that has a sort of quiz in it. What I am currently trying to do is have a value be sent to my function when I hit submit and if it is 0 then write "false" and if it is 1 then write "pass". I wrote the JavaScript but it does not work and I am unsure why. The write to HTML event is firing when I hit the radio button which I assume is because of the onclick I have for it. I don't know how to send the value without it though and if that would fix the issue. I also know that the program is only writing false no matter what I click instead of "pass" for no and "false" for yes. When I press the submit button it doesn't work right. The false/pass shouldn't appear until it is pressed but instead when I press the submit button It will change "false" to "pass". I don't know how to fix any of this or why it is doing this.
Thank you for the help let me know if more clarification is needed.
This is my HTML
<body>
<form id="myForm">
<div class="sub form-row align-items-center">
<div class="col">
<fieldset>
<h3><legend>Eligibility Test</legend></h3>
</fieldset>
</div>
</div>
<div class="col">
<fieldset>
<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" id="field1" value="0" onclick="getscores1()"/>
<label>
Yes
</label>
<input type="radio" name="field1" id="field1" value="1" onclick="getscores1()"/>
<label>
No
</label>
</fieldset>
</div>
<div class="col">
<div class="row">
<fieldset>
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" id="field2 value="0" onclick="getscores2()"/>
<label>
Yes
</label>
<input type="radio" name="field2" id="field2 value="1" onclick="getscores2()"/>
<label>
No
</label>
</fieldset>
</div>
</div>
<fieldset id="submitbutton">
<input type="button" id="submit" value="submit"
onclick='answer()' />
</fieldset>
<p id="totalScore">this is answer </p>
This is my JavaScript
<script>
function getscores1(){
score1= document.getElementById('field1').value;
answer(score1);
}
function answer(score1){
if (score1 == 0 ){
document.getElementById('totalScore').innerHTML = "false";
}
else{
document.getElementById('totalScore').innerHTML = "pass";
}
}
</script>
It's not working for the following reasons:
You're missing a </div> before </fieldset>
You have duplicate IDs (2 field1 and 2 field2)
Your duplicate field2 IDs are both missing the closing quotation mark
Considering you're not allowed duplicate IDs, I recommend removing those. As you're calling the function on click of both radio buttons, instead of using IDs, you can actually just pass through the element itself to the function with the this operator as onclick="getscores1(this)".
Then you just have to adapt your function to take the argument as a function parameter:
function getscores1(score1) {
answer(score1.value);
}
This can be seen working in the following example:
function getscores1(score1) {
answer(score1.value);
}
function answer(score1) {
if (score1 == 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<body>
<form id="myForm">
<div class="sub form-row align-items-center">
<div class="col">
<fieldset>
<h3>
<legend>Eligibility Test</legend>
</h3>
</fieldset>
</div>
</div>
<div class="col">
<fieldset>
<div class="col">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" onclick="getscores1(this)" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" onclick="getscores1(this)" />
<label>
No
</label>
</div>
</fieldset>
</div>
<div class="col">
<div class="row">
<fieldset>
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value=" 0 " onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2 " value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
</div>
</div>
<fieldset id="submitbutton">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
<p id="totalScore">this is answer </p>
Hope this helps! :)
how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));
I am trying to validate a form with javascript. The function gets called properly and the alert is displayed, but the form is still submitted after I click ok on the alert. The function never returns false. I have seen this question asked before, but I have not seen an answer that worked. I am using some JQuery mobile in this and that may be the problem. I have tried to change the button input type=button, but that would not even submit the form.
The javascript function is:
<script>
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
The form is:
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
I am adding the href that calls up the popup for the form. I don't know if that has anything to do with this problem. I keep hearing that my code is being replicated and it is working just fine. I can't get it to work and I want to represent the issue in its entirety.
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="#popupCustomer_alert" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Add Customer Alert</a></li>
<li><a href="#popupQuery_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Query Inventory</a></li>
<li><a href="#popupEdit_customer" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Edit Customer</a></li>
<li><a href="return_qr_code.php" >Get QR Code</a></li>
<li><a href="#popupDownload_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Download Inventory</a></li>
</ul>
Try adding return true at last line of validateInventoryform() and remove extra "/" in this
<button type="submit" data-theme="b"/>Submit</button>
try Jquery to bind event
$(function () {
$('#form').bind('submit', function (e) {
var isValid = true;
if (!isValid) {
e.preventDefault();
}
});
});
It's better if you validate the form before it is submitted. Do the validation on button click.
Or better yet, use radio buttons instead of checkboxes since you only want to allow one option to be selected:
<input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />
<input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />
Below coding is working perfectly:
<html>
<head>
<title>checkbox</title>
<script type="text/javascript">
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
</head>
<body>
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
</body>
</html>
Try this one and I hope this is what you are looking for:
Html:
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv">
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />SKU
<input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />Entire Inventory
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a" />
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<input type="button" data-theme="b" value="Submit" id="submitBtn" />
</form>
</div>
</div>
Javascript
$("#submitBtn").on("click", function(event){
//Your validation code here
if($("#sku").val() == ""){
alert("Item sku is null")
} else {
// Submit event if everything is okey
$("#inv").submit();
}
});
http://jsfiddle.net/8aapR/
I am using same html and script code provided by you and tested in all browser and it is working fine.
<html>
<head>
<script>
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
{
alert("You may only choose one option to check customer inventory");
return false;
}
}
</script>
</head>
<body>
<div data-role="popup" id="popupQuery_inventory" data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
<label for="sku_checkbox">SKU</label>
<input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b"/>Submit</button>
</form>
</div>
</div>
</body>
</html>