dynamic form using javascript - javascript

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:

Related

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

Jquery function after Ajax submit not working

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.

Show div on checkbox tick

I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..

How to get checkbox value through serializedarray()

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));

How to make Input text inline with Radio Button in Button

i am new to bootstrap building a web page .my code segment of HTML page is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
</form>
a screen shot of page generated by this code is
as you can see percentage radio button and Upperlimit label and text input are not inline to each other .i want to make them inline.can any one please help how to accomplish this ??
Update
i tried the suggestion in the comment this time my html segment is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline" id="label3" >
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
<div class="control-group">
<div> Promo-code usage count *
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">
</div>
</div>
</form>
and main.css is
#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
display: inline-block; float: left;
}
and i am getting the screen shot and it is not the expected any other suggestions ??
Does this JSBin look like what you want?

Categories

Resources