Develop Reference

Remove <style> tag and <script> tag from plain HTML using Jquery

Here is my plain HTML code.
<style>
/* style tag goes here*/
</style>
<form method="POST" action="#" id="_form_93_" class="_form _form_93 _inline-form _dark" novalidate>
<input type="hidden" name="u" value="93" />
<input type="hidden" name="f" value="93" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
</form>
<script type="text/javascript">
// script tag goes here
</script>
I want to remove <style></style> and <script></script> tag from HTML code so expected result will be.
<form method="POST" action="#" id="_form_93_" class="_form _form_93 _inline-form _dark" novalidate>
<input type="hidden" name="u" value="93" />
<input type="hidden" name="f" value="93" />
<input type="hidden" name="s" />
<input type="hidden" name="c" value="0" />
<input type="hidden" name="m" value="0" />
</form>

You can remove the tags using this
$('style, script').remove();
Styles will no longer show on screen and both HTML elements will dissapear from the DOM.
BUT, javascript code will still be executed if events have been attached before running the remove() code.
If you're only looking to clean some code returning by an ajax call (for example), it will work fine. If you want to clear the styles and javascript from the page you're already in, some Javascript code might already be attached to elements before you remove the script tag.
Check this fiddle for an example.

Using jQuery:
jQuery('style').remove();
jQuery('script').remove();
Using Plain JavaScript:
window.onload = function(){
var getStyle = document.getElementsByTagName("style");
getStyle[0].remove();
var getScript = document.getElementsByTagName("script");
getScript[0].remove();
}
Please find a working fiddle, which shows how to delete h1 tag, Link

Replace text in the input form and visit

I want to create a form for my blog visitors like this:
<form name="myform" id="test">
<input type="text" name="url"/>
<input type="submit" value="submit"/>
</form>
If someone enters a URL: https://demo.website.com/page/blablabla.html
It will generate a URL: https://newwebsite.com/page/blablabla.html
So the point is: just change demo.website be newwebsite
Is this possible with javascript or jQuery?

Try this approach:
$("input[name='url']").on('change', function(e){
$(this).val($(this).val().replace("demo.website.","newwebsite."));
})

Working code would be somewhat like this
<form name="myform" id="test">
<input type="text" name="url" onblur="func(this)" />
<input type="submit" value="submit"/>
</form>
<script>
function func(elem){
var _url = elem.value;
var finUrl = _url.replace('demo.website','newwebsite');
console.log(finUrl);
}
</script>

How to update stripe payment data attribute

I am trying to update data attribute from input value. i am trying this way but not work data-description=$("#stripeAmount").val();
<form action="paymentStrip" method="POST">
<input type="hidden" name="stripeAmount" id="stripeAmount" value="35" />
<input type="hidden" name="itemid" id="itemid" value="" />
<input type="hidden" name="business_category" id="business_category" value="1" />
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_pa9c33hPMCuAV941sMktI5Mw"
data-image="http://www.phpgang.com/wp-content/themes/PHPGang_v2/img/logo.png"
data-name="PHPGang.com"
data-description=$("#stripeAmount").val();>
</script>
</form>

To change the value on change use:
$('#stripeAmount').change(function () {
$('#stripeScript').attr('data-description', $(this).val())
});
You also have to add id="stripeScript" to the stripe <script> tag.
NOTE: that being said, I am not sure if this actually does anything. You may have to remove the stripe script and create it for it to have effect. I am not familiar with the stripe API

Changing 2 hidden input fields on select

I have a form that is need to be passed to my CRM.
the form is simple and contains 2 important fields that defines under what category the data will be received in my crm.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<input type="submit" value="submit"/>
</form>
I want to add a drop down list with 2 options first will send the form i mentiond above as is.
the second will modify the values of "lm_key" and "lm_form" to other values.

Plain JS code can be like this. But I would advice you to use some JS library like JQuery, AngulerJS or another one.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form" name="form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<select name="selectField" onchange="changeValues()">
<option value="1">1</value>
<option value="2">2</value>
</select>
<input type="submit" value="submit"/>
</form>
<script>
function changeValues() {
form.lm_key.value = form.selectField.value;
form.lm_form.value = form.selectField.value;
}
</script>

why javascript Form Processing is no standard at all ？

After my test,
The first way to write
<form name="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.tx1.value);
</script>
The second way to write
<form id="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.tx1.value);
</script>
The third way to write
<form id="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.elements['tx1'].value);
</script>
The forth way to write
<form id="form" >
<input type="text" name="tx1" value="123"><br>
</form>
<script>
alert(form.elements['tx1'].value);
</script>
........
Permutations and combinations are many, pay attention to the form's id, name and input the id, the name, combined with the wording of the js, no matter how you write, are no problem. .
There is no standard at all. . . .

Actually, there is a standard: http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-40002357
On top of the standard, most browsers implement additional features.
The safest way to refer to form elements through a named collection is:
<form name="formname">
<input type="text" name="tx1" value="123">
</form>
<script>
alert(document.forms['formname'].elements['tx1'].value);
</script>
document.forms is a HTMLCollection of <form> elements. In each of these form, the elements property is a collection of all form input elements. All elements have to be referred by name.

What about this?
<form id="form" >
<input type="text" id="tx1" value="123"><br/>
</form>
<script>
alert(tx1.value);
</script>